Setting Up and Running a React Project with Vite

So far, you've worked with isolated React examples. In real-world development, React applications are created and run as projects with a predefined structure and tooling.

In this chapter, you'll learn how to create and run a React project using Vite, a modern build tool that is fast, lightweight, and commonly used in production projects.

Creating a React Project with Vite

To create a new React project, open your terminal and run the following command:

npm create vite@latest

You will be prompted to:

1. Enter a project name;
2. Select a framework → choose React;
3. Select a variant → choose JavaScript.

Once the setup is complete, navigate into the project folder:

cd project-name

Install the project dependencies:

npm install

Running the Development Server

To start the React development server, run:

npm run dev

After running this command:

• Vite starts a local development server;
• A local URL (usually http://localhost:5173) appears in the terminal;
• Opening this URL in the browser displays your React app.

Any changes you make to the code will automatically update in the browser.

Understanding What Just Happened

When you ran the development server:

• Vite bundled your React code;
• React rendered the application into the browser;
• The app entered development mode, optimized for fast feedback.

You now have a real React project running locally.