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.

You can use AppRun with React in one of the two ways.

• Use AppRun components in React apps
• Use React Virtual DOM in AppRun apps

Use AppRun Components

It only takes one line of code to use AppRun components in React.

Let's use the code from the React Hooks Doc as an example.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

The same app using the AppRun looks like below.

class MyComponent extends Component {
  state = 0;
  view = count => <div>
    <p>You clicked {count} times</p>
    <button onclick={()=>this.run('add')}>
      Click me
    </button>
  </div>;
  update  = {
    add: state => state + 1
  };
}
new MyComponent().start(document.body);

To use the AppRun component in React is very easy. All you need to do is converting the AppRun component to a React component by calling the toReact function.

import { Component } from 'apprun/esm/component';
import toReact from 'apprun/react';

class MyComponent extends Component {
  state = 0;
  view = count => <div>
    <p>You clicked {count} times</p>
    <button onClick={()=>this.run('add')}>
      Click me
    </button>
  </div>;
  update  = {
    add: state => state + 1
  };
}

const App = toReact(MyComponent);
export default App;

Note

The React VDOM uses JSX. AppRun VDOM also uses JSX. They are similar. However, React VDOM does not have directives. So you cannot use the AppRun $onclick directive. Instead, you need to use the React onClick attribute.

Now, with just one line conversion to React component, we successfully used AppRun in React apps. Thus, we have the elm-inspired AppRun architecture in the React apps.

You can visit https://github.com/yysun-apprun to see an example React project created by the Create React App Cli that uses AppRun components.

Use React VDOM

On the other hand, since we can use any Virtual DOM (VDOM) technology in AppRun apps, including the one from React, lets' use the React VDOM in AppRun apps.

It also just needs one line of code to replace the app.render function with the ReactDOM.render function.

app.render = (el, vdom) => ReactDOM.render(vdom, el);

Below is the AppRun app that uses React VDOM.

import app from 'apprun';
import React from 'react';
import ReactDOM from 'react-dom';

app.render = (el, vdom) => ReactDOM.render(vdom, el);

class MyComponent extends Component {
  state = 0;
  view = count => <div>
    <p>You clicked {count} times</p>
    <button onClick={()=>this.run('add')}>
      Click me
    </button>
  </div>;
  update  = {
    add: state => state + 1
  };
}
new MyComponent().start(document.body);

Again, you must remember to use the React onClick attribute instead of the AppRun $onclick directive.

Conclusion

If you prefer to use React as the main framework, you can use AppRun to get the elm-inspired architecture. If you choose to use AppRun, you can also use the React Virtual DOM for rendering. You get the best of both worlds.