Using React on your hosting account

React (also called React.js or ReactJS) is a popular JavaScript library for building user interfaces, and it works on Ruachost accounts.

About React

React is a client-side JavaScript library used to build interactive user interfaces.
A key idea behind React is gradual adoption you can use only the parts you need.

Using React

To use React in any web page, you just need to include two JavaScript files:
react and react-dom.

There are two ways to include them:

1. Upload the React files to your hosting account

Upload the library files to a public directory such as public_html, then reference them:

<script src="lib/react.min.js"></script>
<script src="lib/react-dom.min.js"></script>

You can find the official React repository at:
https://github.com/facebook/react

2. Use a third-party CDN (recommended for simplicity)

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

After including these files, React becomes available on the page.

A Simple React Example

Create a file named react.html and add:

<!DOCTYPE html>
<html>
  <head>
    <title>React test</title>
  </head>
  <body>
    <p>Here is our React element:</p>
    <div id="react_ui"></div>

    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="ui.js"></script>
  </body>
</html>

Now create ui.js:

'use strict';

const e = React.createElement('h1', {}, 'Hello world');

const domContainer = document.querySelector('#react_ui');
ReactDOM.render(e, domContainer);

Upload both react.html and ui.js to your public_html directory.
Open react.html in your browser and you should see “Hello world” rendered by React.

Troubleshooting React Pages

Since React runs in the browser, use your browser’s developer console to diagnose issues:

• Firefox: Tools → Web Developer → Web Console
• Chrome: More tools → Developer tools → Console
• Internet Explorer: F12 Developer Tools → Script

More Information

React official website: https://reactjs.org
React documentation: https://reactjs.org/docs/