To run any React application, we need to first setup a ReactJS Development Environment. In this article, we will show you a step-by-step guide to installing and configuring a working React development environment.
We must have NodeJS installed on our PC. So, the very first step will be to install NodeJS. Once we have set up NodeJS on our PC, the next thing we need to do is set up React Boilerplate.
React JS Installation:
There are basically two methods for React JS Environment Setup
- Using create-react-app (faster method)
- Using webpack and babel
Let us implement the above-mentioned methods
Method 1: Using create-react-app (CRA commond)
Step 1: Navigate to the folder where you want to create the project and open it in terminal
Step 2: In the terminal of the application directory type the following command
npx create-react-app <<Application_Name>>
Step 3: Navigate to the newly created folder using the command
Step 4: A default application will be created with the following project structure and dependencies
It will install some packages by default which can be seen in the dependencies in package.json file as follows:
Step 5: To run this application type the following command in terminal
Step 6: The following output will be displayed in the browser
You can modify the application according to your preferences and change the code accordingly.
Method 2: Using webpack and babel
To setup a react development environment using webpack and babel is a long process and we have to import each package and create setup files ourselves.
We have to create the setup using ‘npm init -y’ command and then import the necessary packages in the folder and then install react using the command.
npm i react react-dom
To install the necessary packages in our project use the command
npm i webpack webpack-cli @babel/core @babel/preset-env@babel/preset-react
babel-loader html-webpack-plugin webpack-dev-server --save-dev
P.S.: This tutorial covers only the steps to install the packages. To understand how to configure these packages refer to the Introduction to babel article.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses
are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!