How to create React JS Application

The React JS is actually a Javascript framework. Compared to Angular JS its totally different. Lets discuss about the comparison in later posts.

Now we are just entering to how to create React JS Project.

On starting with ReactJS there are two method to using React JS in your website.

Install React Application

On creating React application there is 2 methods. Means we can use react in our website by 2 methods.

• By just adding React Scripts in the html file
• By using CLI

First of all we can discuss about the first step – by adding react script in script tags.

Method 1 – By adding React Script in the script tag

In this step first of all add the script to the html file.

‹!-- Note: when deploying, replace "development.js" with "production.min.js". --›
‹script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin›‹/script›
‹script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin›‹/script›
‹!-- Load our React component. --›

That’s it now you can use React JS scripting any ware in that particular page. Please note that if you adding react to normal html page then please put the above code to the bottom of the html page. If you put the above code to top then may you get error because of  the query selector can’t get the location of the DOM. I will provide you the sample html HelloWorld.

'use strict';

const e = React.createElement;

class HelloWorld extends React.Component {
  render() {
    return 'Hello World';
  }
}
const domContainer = document.querySelector('#hello_world');
ReactDOM.render(e(HelloWorld), domContainer);
‹!DOCTYPE html›
‹html›
‹head›
    ‹title>React Sample‹/title›
‹/head›
‹body›
    ‹div id="hello_world"›‹/div›
    ‹script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin›‹/script›
    ‹script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin›‹/script›

    ‹!-- Load our React component. --›
    ‹script src="hello-world.js"›‹/script›
‹/body›
‹/html›

Method 2 – By using CLI

In this method we need Node JS Application in our machine. After installing Node JS run the bellow codes

1. Run  npx create-react-app my-app
2. Run  cd my-app
3. Run  npm start

That’s it. In this steps you create and run the React JS application. In the first step you create a sample structure of the React application. And in the second step switch the directory to React project. In the third step running the React JS application.

I think you understood the basics of React JS usage by this blog. If you have any suggestion please comment under the blog.