# Using React on your hosting account

> Add React to a web page on your hosting account using uploaded files or a CDN, with a simple working example.

Source: https://helpcenter.ruachost.com/developers/web-development/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](https://reactjs.org/)\
React documentation: <https://reactjs.org/docs/>