Installing and Configuring React

In this chapter, we will set up our React development environment. We will use Create React App, the official tool recommended by the React team for starting a new project.

Prerequisites

Before you begin, make sure you have the following installed:

1. Node.js (version 14.0.0 or higher)
2. npm (usually installed with Node.js)

To verify your installations, open a terminal and run:

node --version
npm --version

Creating a New React Project

The easiest way to create a new React application is to use Create React App. Here's how:

1. Open a terminal and run the following command:

npx create-react-app mon-app-react

2. Once the installation is complete, go to the project directory:

cd mon-app-react

3. Start the application in development mode:

npm start

Your application should now be available at http://localhost:3000.

Project Structure

After creation, your project will have the following structure:

mon-app-react/
  ├── node_modules/
  ├── public/
  │   ├── favicon.ico
  │   ├── index.html
  │   └── manifest.json
  ├── src/
  │   ├── App.css
  │   ├── App.js
  │   ├── App.test.js
  │   ├── index.css
  │   ├── index.js
  │   ├── logo.svg
  │   └── reportWebVitals.js
  ├── package.json
  └── README.md