React - Installing React

Steps to install React

React is a popular JavaScript library for building user interfaces. This guide provides step-by-step instructions on how to install React and set up a new React project using Create React App.

Prerequisites

Before installing React, ensure that you have Node.js and npm (Node Package Manager) installed on your machine. You can verify the installation by running the following commands in your terminal:

node -v
npm -v

If you do not have Node.js and npm installed, follow the guide on Installing Node.js.

Installing Create React App

Create React App is an officially supported CLI tool that sets up a new React project with a sensible default configuration. To install Create React App, run the following command:

npx create-react-app my-react-app

This command creates a new directory called my-react-app and sets up a new React project inside it. Replace my-react-app with your desired project name.

Creating a New React Project

1. Open your terminal.
2. Navigate to the directory where you want to create your new React project.
3. Run the following command to create a new React project:

   npx create-react-app my-react-app

4. Change into the newly created project directory:

   cd my-react-app

5. Start the development server:

   npm start

This command starts the development server and opens your new React application in your default web browser. You should see the default Create React App welcome screen.

Understanding the Project Structure

The default project structure created by Create React App looks like this:

my-react-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

Key files and directories include:

• public/: Contains the public assets of the application, including the HTML file.
• src/: Contains the source code of the application, including React components and CSS files.
• index.js: The entry point of the React application.
• App.js: The main App component.
• package.json: Contains the project metadata and dependencies.

Adding Additional Dependencies

To add additional dependencies to your React project, use npm or yarn. For example, to install React Router, run:

npm install react-router-dom

Summary

In this guide, you learned how to install React and set up a new React project using Create React App. You also learned about the default project structure and how to add additional dependencies to your project. With these steps, you can start building your React applications quickly and efficiently.