Approach 1: Using create-react-app

08-Jan-2024

create-react-app

Running a React application necessitates the initial establishment of a ReactJS development environment. This guide offers a detailed, step-by-step walkthrough for setting up and configuring a functional React development environment.

Prerequisite:

ReactJS Installation:

a. Method 1: Utilizing create-react-app (CRA command)

b. Method 2: Employing webpack and babel.

Prerequisite: Ensure NodeJS is installed on your PC. Begin by installing NodeJS, followed by the setup of the React Boilerplate.

Installation of Node.js:

Node.js installation on Windows

Node.js installation on Linux React JS

Installation:

Explore the two primary methods for setting up the React JS Environment

Opting for create-react-app for a quicker setup.

Implementing webpack and babel

Now, let's put the aforementioned methods into action.

Method 1:

Using create-react-app (CRA command)

Step 1: Open a terminal and navigate to your desired project folder.

Step 2: In the terminal, within the project directory, input the following command.


npx create-react-app YOUR_APP_NAME

Step 3: Navigate to the newly created folder using the command.


cd YOUR_APP_NAME

When run, a standard application is generated with the specified project structure and dependencies.

By default, it will install certain packages, shown in the 'dependencies' section of the package.json file, as shown below:


"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 4: Execute the application by entering the following command in the terminal.