Creating the React Application with Vite (Project Initialization)

What is Vite?

Vite is a rapid, modern front-end build system that helps developers build and run web applications faster and more effectively.

Why do we choose Vite for creating a React project?

Vite is regarded as the new approach to creating React applications due to its rapid setup, shorter development server startup time, and faster development experience, which is much faster than the traditional method ( npx create-react-app, which is deprecated ).

Follow the steps below sequentially to successfully set up your React project using Vite:

Step 1: Create a New Project Folder

Create a new folder on your system where you want to set up your React project.

Step 2: Open the Folder in VS Code

Open Visual Studio Code and open the newly created project folder.

Step 3: Open the Terminal

Open the integrated terminal inside VS Code.

Step 4: Create the Vite Project

Run the following command in the terminal:

npm create vite@latest

Then follow the prompts below:

• Enter Project Name

You will be asked to define the project name. You can enter any name of your choice, or keep the default name if you prefer.

• Select Framework

When prompted to choose a framework, select React.

• Select Variant

Next, select JavaScript as the variant.

• Choose Vite Version

When asked “Use Vite 8 beta (Experimental)?”, choose No because the stable version of Vite is more reliable and recommended for projects.

• Install Dependencies

Finally, choose Yes to install the dependencies automatically and start the project on your localhost.

Step 5: Access the Localhost Link

After a few seconds, the terminal will display a local development link (localhost URL).

Press Ctrl + Click on the link to open the project in your web browser.

You will see your React project running in the browser. Please refer to the screenshot below for better understanding.

Step 6: Clean the Initial Files

Since we are designing a new project, remove all the default styling and HTML content from the following files:

• App.jsx
• App.css
• index.css

Remove their default content completely so that you get a plain, clean web page to start building your project from scratch.

Note:

Pressing Ctrl + C stops the running development server but does not close the terminal; you can restart localhost at any time by running npm run dev in the terminal.