Installing React: npm, npx, and Vite

In this section, we will guide you through three different methods for setting up and creating a React application: using npm globally, using npx, and setting up React with Vite.

Method 1: Installing Create React App Globally with npm

Step 1: Install Create React App Globally

Open your terminal and run the following command to install Create React App globally:

npm install -g create-react-app

Step 2: Create a New React Application

Once installed, you can create a new React application by running:

create-react-app my-global-app

Replace my-global-app with the name of your project. This command will create a new directory with the same name, initialize a new React project, and install the required dependencies.

Step 3: Navigate to Your Project Directory

Change into your project directory:

cd my-global-app

Step 4: Start the Development Server

Start the development server to see your new React application in action:

npm start

This command will open your default web browser and navigate to http://localhost:3000, where you will see the default React welcome page.

Method 2: Using npx to Create a React Application

Step 1: Create a New React Application with npx

Using npx (which comes with npm 5.2+), you can create a new React application without having to globally install Create React App. Open your terminal and run the following command:

npx create-react-app my-npx-app

Replace my-npx-app with the name of your project. This command will create a new directory with the same name, initialize a new React project, and install the required dependencies.

Step 2: Navigate to Your Project Directory

Change into your project directory:

cd my-npx-app

Step 3: Start the Development Server

Start the development server to see your new React application in action:

npm start

This command will open your default web browser and navigate to http://localhost:3000, where you will see the default React welcome page.

Method 3: Setting Up React Manually with Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

Step 1: Create a New React Application with Vite

Open your terminal and run the following commands:

npm create vite@latest my-vite-app -- --template react

npm create vite@latest my-vite-app

Replace my-vite-app with the name of your project. This command will create a new directory with the same name and set up a new React project using Vite.

Step 2: Navigate to Your Project Directory

Change into your project directory:

cd my-vite-app

Step 3: Install Dependencies

Install the required dependencies by running:

npm install

Step 4: Start the Development Server

Start the development server to see your new React application in action:

npm run dev

This command will open your default web browser and navigate to http://localhost:3000, where you will see the default Vite welcome page.

You've successfully set up your development environment and created a React application using three different methods: npm global installation, npx, and Vite. Each method has its own advantages, and you can choose the one that best fits your workflow.