Setup ReactJS Application

To create a single page application in ReactJS,

  • NodeJS ( version >= 6)
  • Node Package Manager - NPM ( version >= 5.2 )

We are not going to learn about NodeJS and NPM here.

Create a React app

There are two ways to start development:

  • Start from scratch and install ReactJS, ReactDOM, Babel (To convert the code in ES5 from ES6) and Webpack (module bundler and dependency loader).
    In this way, after installing you need to create a config file for the Webpack for the application entry point, where to put the code after the build, etc.
    This is a very tedious task and error-prone. So we will see another much easier and suggested way.
  • Using npx create-react-app command.

npx create-react-app

Go to the folder where you need the development started. Run the following command in command prompt.


npx create-react-app new-app
                    

This will create a folder "new-app", install react, react-dom and react-script and other dependencies to run the react app. It will also add sample code which is ready to deploy.
npx is not any typing error. npx is a package runner tool which comes in npm ( version >= 5.2 ).
To start the app, go inside the "new-app" folder using command prompt cd new-app and run following command.


npm start
                    

It will deploy the sample code.
This way, you won't spend much time creating the development environment and focus on developing the application.
Sample code is inside new-app/src folder. We will delete the sample code and write our code.

Conclusion

In this section, you learned about setting up react environment and how to run ReactJS application.
In the next section, you will learn about folder structure in ReactJS application.