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, Setup AppRun

To use React, call AppRun's `app.use_react` function by passing in React and ReactDOM.

### For React

    import React from 'react';
    import ReactDOM from 'react-dom/client'
    app.use_react(React, ReactDOM);

### For Preact

    import React from 'preact/compat';
    import ReactDOM from 'preact/compat';
    app.use_react(React, ReactDOM);

Since Preact is less restrictive than React. You can just use Preact's render function.

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

This way allows us to take advantage of AppRun's unique custom directives ($on, $bind) for handling events and data binding​​.

Note

You need to remember React / Preact uses onClick instead of onclick.

## Step 3, Use React JSX and Components

Build your AppRun components using React's JSX 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

Since AppRun directives are not supported in React, you need to call this.run to publish events.

## Example

By using React and AppRun together, you can build a powerful web application with AppRun's clean architecture and beautiful React components from Ant Design.

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

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

This project has the AppRun architecture. As well as the React components from the Ant Design.

## Conclusion

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