Now a days React.js is very popular library for the front end developers. Today I'm going to discuss a very important topic to start the react.js development.

Just to start with React.js we should know how to setup react js application.

I'm assuming you have installed node.js and NPM in your system.

Actually there are 2 ways to setup the react.js application at your system.

1. React.js provides you facility to create the react application through the CLI (command line interface). Let me tell you how ? You know you just need to run only 2 command and you are ready for development.
   
   npm install -g create-react-app create-react-app my-app

   1 2	npm install -g create-react-app create-react-app my-app

   
   You'll can install create-react-app globally to your system so that in future you will not need to install it again. What you will need is just type create-react-app your-app-name .Here my-app is your application name. You can change it whatever name you wanted to your application.
2. You can setup the react application with your custom configuration with the help of webpack and babel. Without going more theoretical let me explain the steps to setup the react application using webpack and babel.

Let suppose I have a directory react-setup and I'm into this directory.

Create a file named as package.json and inside package.json I have added all the dependencies which I need to run a react application. I also have setup the script commands for running project in development and to create the production build.

Now go to project directory which is react-setup. And run the command

This will install all the dependencies inside node_modules folder. All the dependencies has been added in package.json

After that create a file webpack.config.js. Inside webpack.config.js I'm defining my application entry point, output of the application when you create the build, file extensions, some rules for loaders and files, plugin page path and the history api fallback.

Since we need latest ES6 support to our application for that we have babel which will help us to get the features of ES6 and more freatures in our application. Now we need to create .babelrc file in our project directory.

If you have measured in webpack.config.js I have added my entry point which is index.js and should be inside src directory.

Now lets create src folder inside react-setup and then create index.js file in src folder.

Since I have defined my HTML webpack plugin template in webpack.config.js which is index.html and should be inside in src directory. So now lets create index.html inside src directory.

Inside src/index.js we are rendering the templates in root id which is added in index.html. If you noticed we have used a component inside index.js. Now lets create this component.

Create a directory Component inside src. and create a file named as app.component.jsx inside Components folder.

Now we are all done to run our first customized setup react application. To start the application run the following command:

To create the production build you can run the below command: