Menu

How to create a React app without npm

Deepak 3 years ago 3 931

React is a JavaScript library and technically it does not require any setup or installation. You can write React code direct in an HTML document, open HTML in a web browser, and it will work. Node Package Manager (npm) is needed for React development to automate the packaging and testing of React apps. Think of it as a tool to help speed up the development.

In this article and code sample, we will create a simple HTML file and write our React code in the HTML and run it by opening the HTML file in a Web browser, without any external library or tool.  We did not want to go through the hassle of npm or anything else.

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 <head /> 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 <div /> tag inside the <body /> 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 <div /> 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(HelloClassnullnull),

    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(HelloClassnullnull),

                    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.

The output will look like this in the browser.

Summary

This step by step tutorial with code example showed how to create a simple React application direct in HTML without npm or other tools.

Some related articles to learn more about React
How to install React.js with create-react-app?
What Is React?
How to run and build a React app?
Props in React

– Advertisement – BuzzMag Ad
Written By

3 Comments

3 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *