Use AppRun with React
Tags: javascript, react, webdev, showdev
Published: 2021-05-29 19:39:50

It only takes one line of code to use the [elm-inspired AppRun architecture](https://apprun.js.org/docs/architecture/) in React apps.

## Introduction

> [React](https://reactjs.org/) is a popular JavaScript library for building user interfaces.

> [AppRun](https://apprun.js.org/) is an [elm-inspired event-driven](https://apprun.js.org/docs/architecture/) library.

Using AppRun and React in conjunction is one of the best ways to build a web app. In this post, I will explain why and how-to.

> If you are new to AppRun, please visit the [AppRun Docs](https://apprun.js.org/docs) for more information.


## An Example

Let's use the code from the [React Hooks Doc](https://reactjs.org/docs/hooks-overview.html) as an example.

```js
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.

```js
const state = 0;

const view = count => <>
  <p>You clicked {count} times</p>
  <button onclick={()=>app.run('add')}>
    Click me
  </button>
</>;

const update  = {
  add: state => state + 1
};

app.start(document.body, state, view, update);

```

You can see the AppRun way is easier to understand. They are explained below.

## AppRun Logic

Inspired by Elm, AppRun Application logic is broken down into three separated parts in the AppRun architecture.

* State (a.k.a. Model) — the state of your application
* View — a function to display the state
* Update — a collection of event handlers to update the state

All applications and components have the same architecture. So when you want to understand any applications, you can always start with looking for where the _state_ is, where the _view_ is, and where the _update_ is.

## Use AppRun in React App

If you like the AppRun architecture, it is very easy to use AppRun in React apps. All you need to do is converting the AppRun component to a React component by calling the _toReact_ function.

```js
import React from 'react';
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 the AppRun component in a React app.

![apprun-react](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yntfce1pjhew7b6asl7m.png)

You can visit https://github.com/yysun-apprun to see an example React project created by the [Create React App Cli](https://reactjs.org/docs/create-a-new-react-app.html) that uses AppRun components.

Or you can visit the live Demo site: https://replit.com/@yysun/apprun-react

![apprun-react-replit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gttyfz8mokebdyx2qkqn.png)

## AppRun Benefits

Having the elm-inspired architecture in React apps, we have many benefits. I summarize them briefly here.

The _state_, _view_, and _update_ are function have only dependencies to their input parameters. Without external dependency makes the three functions almost _pure_, which means it's easy to reason, easy to test, and easy to maintain.

For example,  you can see that by making it event-driven, the _update_, a collection of the event handlers, can live outside the React component w/o the dependency to the _setState_ function. Thus, you can use modules to organize them and test them easily.

We provide the _state_, _view_, and _update_ to AppRun and wait for AppRun to call them following the Hollywood Principle (Don't call us. We call you). AppRun uses a state management system and event pub-sub system to combine the _state_, _view_, and _update_ together.

![](https://apprun.js.org/docs/imgs/Figure_1-1.png)

For more information, please visit the [AppRun Site](https://apprun.js.org), [AppRun Docs Site](https://apprun.js.org/docs),

Or read the [AppRun Book from Apress](https://www.amazon.com/Practical-Application-Development-AppRun-High-Performance/dp/1484240685/)

[![Order from Amazon](https://camo.githubusercontent.com/99fad1f024c274a3d752a1583cf125037583811c/68747470733a2f2f696d616765732e737072696e6765722e636f6d2f7367772f626f6f6b732f6d656469756d2f393738313438343234303638372e6a7067)](https://www.amazon.com/Practical-Application-Development-AppRun-High-Performance/dp/1484240685/)

I hope you enjoy it.

_This post updated from using **three** lines of code to just **one line** of code on May 30, 2021._