To run any React application, we need to first set up 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.
Table of Content
- Pre-requisite
- React JS Installation
- Method 1: Using create-react-app
- Method 2: Using web pack and babel
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 two methods for React JS Environment Setup
- Using create-react-app (faster method)
- Using web pack and babel
Method 1: Using create-react-app
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 "your project name"
Step 3: Navigate to the newly created folder using the command
“cd/project name”
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 the package.json file as follows:
“dependencies”: {
“@testing-library/jest-dom”: “^5.17.0”,
“@testing-library/react”: “^13.4.0”,
“@testing-library/user-event”: “^13.5.0”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-scripts”: “5.0.1”,
“web-vitals”: “^2.1.4”
}
Step 5: To run this application type the following command in terminal
npm start
Step 6: The following output will be displayed in the browser
Method 2: Using web pack and babel
To set up 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 the ‘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
