Creating & Managing components outside React

You are probably not starting a new project with React in the frontend. You just want to build some components, make use of the apis that your frontend already consumes and use them in your existing application.

Awesome! You can always do that. Let me outline the workflow here.

Take the built output js file and include it your HTML(application). You would need to add React and ReactDOM to the HTML to mount the components on to the page.

javascript
1class WelcomeComp extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = { name: '' };
5    if (props.name) this.state = { name: props.name };
6  }
7
8  updateName = (name) => this.setState({ name });
9
10  render() {
11    return <p>I am a React Component. Hello {this.state.name}</p>;
12  }
13}
14

The transpiled version of the above code is most probably the output you would be getting from build system. (Webpack isn’t mandatory. You can use gulp or grunt if you development is setup using them.)

Next up is including things in your application. I am including directly into HTML.

html
1<html>
2  <head>
3    <title>Sandbox</title>
4    <meta charset="UTF-8" />
5    <script src="<https://unpkg.com/react/umd/react.production.min.js>"></script>
6    <script src="<https://unpkg.com/react-dom/umd/react-dom.production.min.js>"></script>
7  </head>
8
9  <body>
10    <div id="app"></div>
11    <div id="root"></div>
12
13    <script src="build/existing.js"></script>
14    <script src="build/WelcomeComp.js"></script>
15    <script type="text/javascript">
16      var rootEl = document.getElementById('root');
17      ReactDOM.render(React.createElement(WelcomeComp, null, null), rootEl);
18    </script>
19  </body>
20</html>
21

This would mount the component to the root div. Remember you cannot use JSX here as the script in HTML has a type text/javascript. So we used React.createElement() instead of <WelcomeComp />.

The issue

But how would your Component communicate with the existing application? You could be fetching and sending requests from the component itself. Which would need some React code, that isn’t an issue. But in some cases, you need the component to sync up with existing stores in your application.

Maybe you have an ExtJS store or a RxJS store, maybe a MobX one. How do you sync the component with it? 🤔

React ref to our rescue

You can pass a reference to the component and store it as a local variable in the code. All the methods in the React Component can be accessed through those refs. Don’t quite get it? Here is the code.

html
1<script type="text/javascript">
2  var rootEl = document.getElementById('root');
3  var componentProps = {
4    name: 'Balla',
5    ref: function (ref) {
6      this.welcomeComp = ref;
7    },
8  };
9  ReactDOM.render(React.createElement(WelcomeComp, componentProps, null), rootEl);
10
11  setTimeout(function () {
12    this.welcomeComp.updateName('Aravind');
13  }, 2000);
14</script>
15

Syncing is easy now. When ever there is an update, you can just call a method that changes the Component state. See how I did it in a timeout. You can even pass methods that update the store, in the props, and make the Component call it whenever it has to update.

Keep on hacking!

References

https://reactjs.org/docs/react-without-jsx.html
The transpiler used — https://babeljs.io/repl/

Creating & Managing components outside React

The issue

React ref to our rescue

References

Get letters from me 🙌