React Installation

Whether you’re new to React or looking to sharpen your skills, this series will guide you step by step—from the basics to building a fully functional React application.

To create a new React project using Vite, follow these steps:

1. Install Node.js

Ensure you have Node.js installed on your machine. You can download it from nodejs.org.

2. Create a New Vite Project

Open your terminal and run the following command to create a new Vite project with React:

npm create vite@latest

3. Follow the Prompts

• Project name: Enter a name for your project.
• Select a framework: Choose React.
• Select a variant: Choose JavaScript or TypeScript based on your preference.

4. Navigate to Your Project Directory

After the project is created, navigate to the project directory:

cd your-project-name

5. Install Dependencies

Install the necessary dependencies by running:

npm install

6. Start the Development Server

To start the development server, run:

npm run dev

This will start the Vite development server, and you can view your React app by opening the provided URL (usually http://localhost:5173) in your browser.

7. Build for Production

When you’re ready to build your project for production, run:

npm run build

This will create an optimized production build in the dist directory.

8. Preview the Production Build

To preview the production build locally, you can run:

npm run preview

This will serve the production build locally so you can test it before deployment.

Summary of Commands

npm create vite@latest
cd your-project-name
npm install
npm run dev
npm run build
npm run preview

That’s it! You now have a React project set up with Vite.