How to use React on your hosting account

This article discusses React, a popular JavaScript library used for web development.

About React

React (also known as React.js or ReactJS) is a client-side JavaScript library for building user interfaces. One of its guiding principles is gradual adoption, and being able to “use as little or as much as you need.”

Using React

To use React in a web page, all you have to do is include two JavaScript files. There are a few ways to do this:

  • You can upload the React library files to a location on your A2 Hosting account, and then reference them directly in your web pages. For example, the following HTML snippet demonstrates one possible way to do this:
    <script src="lib/react.min.js"></script>
    <script src="lib/react-dom.min.js"></script>
    
    • You must upload the React library files to a directory that is publicly accessible (such as the public_html directory or one of its subdirectories).
    • For the official React code repository, please visit https://github.com/facebook/react.
  • Alternatively, you can configure your web pages to reference React library files hosted by a third party. For example, the following HTML snippet demonstrates how to include the React library files from the unpkg package repository:

    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    

After you include the React library files in a web page, you have access to all of React's features.

A simple React example

The following example creates a very simple React element and displays it on an HTML page.

First, create a file named react.html, and then copy and paste the following code into the file:

<!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/[email protected]/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js" crossorigin></script>

    <script src="ui.js"></script>
  </body>
</html>

Next, create a file named ui.js, and then copy and paste the following code into the file:

'use strict';

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

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

Finally, upload the react.html and ui.js files to the public_html directory of your account, and then load the react.html file in your web browser. You should see Hello world from the React element.

Troubleshooting React-enabled pages

Because React is JavaScript-based and runs on the client, you can use a web browser to troubleshoot and diagnose problems. Many web browsers include a console that provides detailed information about the JavaScript run-time environment. This information is extremely helpful for debugging applications:

  • Mozilla Firefox: On the Tools menu, click Web Developer, and then click Web Console.
  • Google Chrome: Click the Google Chrome settings icon icon, click More tools, click Developer tools, and then click the Console tab.
  • Microsoft Internet Explorer: Click the Internet Explorer settings icon icon, click F12 developer tools, and then click the Script tab.

More Information

Get React Hosting

Article Details

Did you find this article helpful? Then you'll love our support. Experience the A2 Hosting difference today and get a pre-secured, pre-optimized website. Check out our web hosting plans today.