How to create a React app?

There are two ways to create React apps. First, you use npm (Node Package Manager) installed on your machine. If you’re using VS Code, you need to make sure you’ve configured your machine to run React code in VS code using npm. You will also need to setup a build environment for React that typically involved use of npm (node package manager), webpack, and Babel.

We can also create a React app without npm by directly importing Reactjs library in our HTML code. This is exactly what we will do here. Here are the steps required to create and run a React app without npm.

Step 1. Create a simple HTML file

Create a simple HTML file with the following HTML and save it as Index.html in any folder you have direct access to. We will open this html file direct in the browser.

<html>  
    <head>  
        <title>Let's React with npm</title>        
    </head>  
    <body>              
    </body>  
</html>

The above HTML file has a head, title, and body, the simplest form of an HTML file.

Step 2. Import React library

To make React work direct in an HTML document, we need to import the React library in HTML. React library is defined in two .js files. The files differ for development and production as you can see below.

The following script imports React library. Copy and paste this code in the tag of the HTML.

<!-- Load React Libraries -->  
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->  
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>  
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

The final HTML document now looks like this,

<html>  
    <head>  
        <title>Let's React with npm</title>  
        <!-- Load React Libraries -->  
        <!-- Note: when deploying, replace "development.js" with "production.min.js". -->  
        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>  
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>                      
    </head>  
    <body>              
    </body>  
</html>

Step 3. Placeholder for React Component

Once React library is imported, we can use React syntaxes in our code. React uses components to represent UI. Think of a component as a user control that has code to represent visual interfaces and data.

To place a component on a page, we need a placeholder where that component will load. We add a

tag inside the tag of the page and give it an id=“root”.

This is the position where our React component will render.

<body>  
   <div id="root"></div>       
</body>

Step 4. Create a React Component

As you may already know, the UI in React is created using components. A component in React is declared as a class. Here is a simple component that displays simple text “react without npm..”.

class HelloClass extends React.Component   
{  
        render()   
        {  
        return React.createElement('div', null, 'React without npm');  
      }  
}

In the above code, React.createElement is react function that creates an element, a

in this case and displays text inside the div.

Step 5. Call React Component

The final step in the process is to call the React component from JavaScript. The following code React.DOM.render() is responsible for rendering a React component. In this code, the first parameter is the component class name. The render method also takes a root element where the component is rendered. In out case, we render component inside the div id=‘root’. ReactDOM.render(
React.createElement(HelloClass, null, null),
document.getElementById('root')
);

Step 6. Complete code

Here is the complete HTML document.

<html>  
    <head>  
        <title>React's React</title>          
        <!-- Load React. -->  
        <!-- Note: when deploying, replace "development.js" with "production.min.js". -->  
        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>  
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>  
        </head>  
        <body>  
        <div id="root"></div>      
       <!-- This is embedded JavaScript. You can even place this in separate .js file -->  
       <script>              
            window.onload = function()  
            {        
                class HelloClass extends React.Component   
                {  
                    render()   
                    {  
                        return React.createElement('div', null, 'React without npm..');  
                    }  
                }  
                ReactDOM.render(  
                    React.createElement(HelloClass, null, null),  
                    document.getElementById('root')  
                );  
            };          
        </script>  
    </body>  
</html>

Step 7. Run React code

To run the above code, create a text file in any text editor such as Notepad or Visual Studio Code, save it as Index.html or other name and open html file in a Web browser.

How to create a React app?

Table of contents

No headings in the article.