React JS Setup and Installation

Here, we are going to learn about the React JS setup and installation.
Submitted by Godwill Tetah, on November 09, 2020

Here, we will be looking at how to set up and install React JS.

There are practically 2 ways of getting started with React JS. Firstly, we have the static HTML method, and secondly, the latest recent method which Facebook introduced is called the create-react-app method which is a configured environment ready to run React JS code.

In this article, we'll look at the HTML file method and then the other method in our next tutorial...

Directly in HTML File

I don't think the name static HTML file method is a conventional name for this method, but some developers just decided to give it that name.

This method has its own advantages and disadvantages.

This method is not like the other where we have an environment set up for use.

This method is for those who are not familiar with node js...

Create an index.html file and type the following code...

<html>
    <head>
        <title>REACT</title>

        <script src="https://unpkg.com/react@16/umd/react.development.js">
            // react CDN
        </script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
            // react DOM CDN
        </script>
        <script src="https://unpkg.com/[email protected]/babel.js">
            // BABEL CDN
        </script>
    </head>
    <body>
        <center>
            <div id="root"></div>

            <script type="text/babel">
                // the root value for the div id above is the convention entry point for the app

                class App extends React.Component {
                    // ES6 class in use
                    render() {
                        return <h1>Hello world!</h1>;
                    }
                }

                // ReactDOM.render used to render the pipeout the content of the Class App in the div element.
                // Always ensure you your Class name is spelt same as the one written in the ReactDOM.render parameter.

                ReactDOM.render(<App />, document.getElementById("root"));
            </script>
        </center>
    </body>
</html>

This method requires 3 CDNs which include;

REACT: connects with react
REACT DOM: works with the DOM
BABEL: a compiler for ES6 in old browsers.

As you can see, this method requires internet connection to actually load the CDNs online.

The HTML div element with id=root is called the root node, meaning the element where you want to React JS to display its output.

This method can also be used to add React JS on your website where you'll just need to add the CDNs and then code out your site in your class and components.