How to Create a React App? Installation and Environment Setup

Before you begin building applications with React, it’s important to have the right development environment in place. Here’s a step-by-step guide to help you get started:

STEP 1. Install Node.js and npm

The first step in setting up your React environment is to install Node.js, as it provides the JavaScript runtime necessary for executing code outside a browser. When you install Node.js, it comes bundled with npm (Node Package Manager), which is essential for managing dependencies in your project. To download Node.js, visit the official website and select the version suitable for your system.

STEP 2. Set Up a New React Project with Create React App (CRA)

React offers an official tool called Create React App (CRA), which simplifies the process of creating a new project with a pre-configured environment. CRA handles the setup of webpack, Babel, and other necessary tools so you can focus on coding. To create a new React project, open your terminal and run the following command:

npx create-react-app my-react-app

Here, you can replace my-react-app with any name you prefer for your project. This will generate all the necessary files and folders required for a basic React project.

STEP 3. Navigate to Your Project Folder

Once the React project has been created, you’ll want to navigate into your project folder to begin development. Use the following command to move into your newly created project directory:

cd my-react-app

STEP 4. Start and Run Your React Application

Now that your project is set up, you can start the development server to see your React application in action. Run the following command inside your project directory:

npm start

This command will start the development server and automatically open your default browser to display the application.

By default, the app will run on http://localhost:3000. The development server provides hot reloading, which means any changes you make to the code will automatically reflect in the browser without needing to refresh the page manually.

Go to my Medium to learn more about React: https://medium.com/@CodingAdventure

The above is the detailed content of How to Create a React App? Installation and Environment Setup. For more information, please follow other related articles on the PHP Chinese website!