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/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/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/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>
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 menu, click , and then click .
- Google Chrome: Click the
icon, click , click , and then click the Console tab. - Microsoft Internet Explorer: Click the
icon, click , and then click the Script tab.
More Information
- To view the official React site, please visit https://reactjs.org.
- To view the official React documentation, please visit https://reactjs.org/docs.
Article Details
- Product: All accounts
- Level: Intermediate
Grow Your Web Business
Subscribe to receive weekly cutting edge tips, strategies, and news you need to grow your web business.
No charge. Unsubscribe anytime.
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.