In this lesson, you will learn how to setup up successful environment for ReactJS development. This setup involves many steps but this lesson helps you to speed up the development process later. In this process you first need NodeJS, so if you don’t have already installed in your system, you can follow below link to download and install NodeJS.

When you successfully installed NodeJS, you can follow these steps to setup ReactJS. You can install ReactJS using npm. There are two ways to install NodeJS.

First by using webpack and babel.

Secondly using the create-react-app command.

Installing ReactJS using webpack and babel

Webpack compiles dependent modules in a single file or bundle. Basically, webpack is a module bundler. It bundles the modules into single files. When you develop apps you can use it by command line or you can configure it by using webpack.config file.

Babel is a JavaScript transpiler and compiler. It converts one source code to another. You can easily use new ES6 features in your code because babel converts it into ES5 which can be easily run on all browser.

Step 1 – Create the Root Folder

First create a folder called reactApp to install all required files on your system. We are using mkdir command.

Now open package.json file and delete the “test” “echo \”Error: no test specified\” && exit 1″ inside the “scripts” object. We don’t need this line because this line is for testing purpose and we don’t do any testing in this lesson. Now add start and build commands.

Note −Remember when you want to use something you need to import it first. If you want to use components in other parts of your app, you need to export it after creation and import in a file where you need to use it.

Step 9 – Running the Server

Setup is complete now we add server. We can start server by using following command.

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

We can now see our port. In our case, the URL is http://localhost:8080/. Open in its browser and you see following output.

Step 10 – Generating the bundle

In the end, you need to run build command in the command prompt to generate bundle.

C:\Users\Tutorialspoint\Desktop\reactApp>npm run build

This command generate bundle in current folder as shown in picture.

Using the create-react-app command

You can install ReactJS in more simple way by installing create-react-app instead of webpack and babel.

Step 1 – install create-react-app

Find desktop and install Create React App using the following command in command prompt.

Step 4 – Run the project

Tutorial Pace is Pakistan's first and only platform from where you can learn market demanding technologies right from developers. Tutorial Pace is developed by a developer for developers. We are working to maintain the quality of content and practical knowledge within our tutorials.