Skip to content

Use AppRun with React

React is a popular JavaScript library for building user interfaces. Using AppRun and React in conjunction is one of the best ways to build a web app. Here's why you should consider using AppRun with React:

  • Simplified State Management: React often requires additional libraries like Hooks or Redux for state management. AppRun's state management system is easier use. It can reduce complexity and make your application easier to build and maintain​.

  • Event-Driven Routing: AppRun's routing system is event-based, treating route changes as events just like any other user interaction. This makes routing in single-page applications (SPA) straightforward and consistent with other app logic. It is a pertect replacement of the React Router or similar tools​​.

  • Seamless JSX Integration: AppRun supports JSX, the same syntax used by React, which means you can use React as the rendering engine for AppRun components. This allows you to leverage React's powerful rendering capabilities and its vast ecosystem​​.

You can either create an React app and add AppRun to it or create an AppRun app and add React. Here is how you can do it:

Step 1, Installation

npm create vite@latest my-app -- --template react
cd my app
npm i apprun

or

npm create apprun-app my-app
cd my-app
npm i react react-dom

Step 2, Use React's Rendering Function

Replace AppRun's app.render function with React's render function.

For React 18

import { createRoot } from 'react-dom/client'
import app from 'apprun';
app.use_react(createRoot);

For React 17 and earlier

import { render } from 'react-dom'
import app from 'apprun';
app.use_render(render);

For Preact

import { render } from 'preact'
import app from 'apprun';
app.use_render(render);

Note

Preact's render function has less restriction than React's. We can take advantage of AppRun's unique custom directives ($on, $bind) for handling events and data binding​​.

Usually you replace the app.render function in the main.tsx file once.

import "antd/dist/reset.css"
import './index.css'

import { createRoot } from 'react-dom/client'
import { flushSync } from 'react-dom';
import app from 'apprun';
import App from './App'
import Home from './Home';
import About from './About';
import Contact from './Contact';

// Use React DOM to render components
app.use_react(createRoot);

// Render the App component to create page layout
const root = document.getElementById('root');
flushSync(() => app.render(root, <App />));

// Load page components
new Contact().mount('my-app');
new About().mount('my-app');
new Home().start('my-app');

Step 3, Use React JSX and Components

Write your AppRun components using React's JSX and Component in the view function.

import { Component } from 'apprun';
import { Button } from 'antd';

export default class ContactComponent extends Component {
  state = 0;

  view = state => (
    <>
      <h1>{state}</h1>
      <Button onClick={() => this.run('add', -1)}>-1</Button>
      <Button onClick={() => this.run('add', +1)}>+1</Button>
      <div><p/>(component)</div>
    </>
  );

  update = {
    add: (state, num) => state + num,
    '#Contact': state => state,
  };
}

Note

The React JSX syntax is the mostly compatible with AppRun's JSX syntax. But, you need to remember React uses onClick instead of onclick.

Example

By using React and AppRun together, you can build a powerful web application with AppRun's clean architecture and React component libraries like Ant Design..

Here is an example: https://yysun.github.io/apprun-antd-demo-js

Source: https://github.com/yysun/apprun-antd-demo-js

Conclusion

Whether you add AppRun to your React app or add React to your AppRun app, you can get the best of both worlds.