Post
Ask Question

ReactJS Application Without Installing NPM

Here, we are trying to create a React application without installing any npm package like create-react-app. or react-dom. We will only use the React CDN in an HTML file.

This way of application development gives us a basic understanding of the main building blocks required to develop a React application.

First, create one sample HTML file named index.html.

To copy the CDN, first, open here.

  1. <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">  
  2. </script>  
  3. <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script>  

You can copy the script CDN part and paste in one sample HTML file.

Create one more app.jsx file. In this file, we need to add the React sample code. Also, we need to use babel to transpile the .jsx code into JavaScript. For that, let's add one more CDN script.

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-alpha1/JSXTransformer.js">  
  2. </script>  

Let's put all this script part into the header of the HTML file. The header of the sample index.html file should look like below.

  1. <html>  
  2. <header>  
  3.     <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>  
  4.     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>  
  5.     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-alpha1/JSXTransformer.js"></script>  
  6.     <script src="app.jsx" type="text/jsx"></script>  
  7. </header>  
  8.   
  9. </html>  

Now, we need to add the below code which is very important for integration of the React code into an HTML page.

  1. <body>  
  2.     <div id="root"></div>  
  3. </body>  

After adding this part, the index.html looks like this.

  1. <html>  
  2. <header>  
  3.     <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">  
  4.     </script>  
  5.     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">  
  6.     </script>  
  7.     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-alpha1/JSXTransformer.js">  
  8.     </script>  
  9.     <script src="app.jsx" type="text/jsx"></script>  
  10. </header>  
  11.   
  12. <body>  
  13.     <div id="root"></div>  
  14. </body>  
  15.   
  16. </html>  

Now, let us try to understand what we are going to add in app.jsx.

  1. ReactDOM.render  
  2. (   
  3.   < h1 > Hello, world! < /h1>,  
  4.     document.getElementById('root')  
  5. );  

ReactDOM is rendering the React component in the place of <div id="root"></div>. This application makes it very simple to understand the concept of React.js.

We can extend this application as per our business requirement. Simply, add React component and replace the component to place it at <h1>Hello, world!</h1>.


Similar Articles