How to Setup the ReactJs Project from Scratch

I am writing this blog to share the steps that how to set up the ReactJs project from scratch because I have recently worked on it.
First of all, let's just brief about ReactJs.

ReactJs is a library of javascript which is used on the front side to develop the user interface. It is developed by Facebook.some people face the issues while setup of the project like I also have faced some issues. So that's why I'll share some simple and easy steps for setup.
Firstly you must have installed NodeJs in your system. You can install NodeJs using two ways.

(i) using create-react-app command
(ii) using webpack and babel

Installing ReactJs using Webpack and Babel

Webpack is a bundle of the module or we can say that it is a module bundler which takes the individual module and compiles all the module into a single file/bundle.

Babel is a transpiler or compiler which transforms one source code into another. So by using the babel, we can convert ES6 code into ES5 code because there is some feature in ES6 which is not compatible on all browsers so it can be converted into the plain ES5.

Step1:-

You must create a folder with name reactApp or whatever name you want to give you folder using mkdir command on command prompt.

C:\Users\username\Desktop> mkdir reactApp
C:\Users\username\Desktop> cd reactApp

After creating the folder, it is required to generate the package.json file to create any module.So we need to run npm init command on command prompt.

C:\Users\username\Desktop\reactApp>npm init

Step2:-

After creating the root folder we need to install the ReactJs and its dom packages. So you can install it using the following command.

C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save

Step3:-

After successful installation of reactjs and its dom packages, we need to install the webpack. As we have discussed it is module bundler so it must be install.

C:\Users\username\Desktop\reactApp>npm install webpack –save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save

Step4:-

After installation of webpack, we need to install the babel and its plugins.

C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev

Step5:-

Create the files.
To complete the entire installation process, we need to create some basic files like app.js and some more files. so you can create these file using command prompt or you can create these manually.

C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

Step6:-

Set Server, Compiler and Loader

In this step, we are going to entry point main.js in webpack-config.js file and will set development server to port 8080 or whatever port you want.

webpack-config.js file

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

so after this step we need to delete the "test" "echo \"Error: no test specified\" && exit 1" from package.json file because we won't do any testing anything in this. so we will add start and build command in place of this.

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

Step7:-
index.html

It is just a normal HTML file

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

In this file we have setted div id="app" as a root element and index_bundle.js is a bundled file for our app.

Step8:-

App.js

This will be our first react component. It will render the message which we will give in header tag in below code.

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>This is the first React Component</h1>
         </div>
      );
   }
}
export default App;

Step9:-

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

one important thing which I must to tell you that whenever you want to use something in the file you have to import it first or want to make the component reusable you have to export it after the creation of file or component.

create a file named .babelrc

{
   "presets":["env", "react"]
}

Step10:-

Start the Server

After this step you will be able to run the ReactJs project by using npm start command on your terminal.

C:\Users\username\Desktop\reactApp>npm start

So these were the steps to setup the project and I hope you will like this blog.