How to Create a React Project from Scratch Using Vite

Hey there! If you’re looking to get started with React, you’ve come to the right place. In this guide, I’ll walk you through the steps to create a React project from scratch using Vite. Vite is a build tool that makes setting up a new project super fast and efficient. Let’s get started!

What is Vite?

Vite is a modern build tool that provides a faster and leaner development experience for modern web projects. It offers a quick setup and lightning-fast Hot Module Replacement (HMR), which means changes to your code are reflected instantly in the browser without needing a full reload.

Prerequisites

Before we begin, make sure you have the following installed on your computer:

• Node.js (version 12 or higher)
• npm (comes with Node.js)

Step 1: Setting Up Your Project

First, you’ll need to create a new directory for your project. Open your terminal and run the following commands:

mkdir my-react-app
cd my-react-app

Step 2: Initializing the Project with Vite

Next, we’ll use Vite to scaffold a new React project. Run the following command in your terminal:

npm create vite@latest

You’ll be prompted to enter a project name. Type my-react-app (or whatever name you prefer) and hit enter. Then, choose React from the list of templates, and finally, select JavaScript or TypeScript depending on your preference.

Step 3: Installing Dependencies

Navigate into your project directory and install the dependencies:

cd my-react-app
npm install

Step 4: Running the Development Server

Now, let’s start the development server to see our new React app in action:

npm run dev

Vite will start the development server and open your new React app in the browser. You should see a welcome screen indicating that your project setup was successful.

Project Structure

Here’s a quick overview of the project structure that Vite creates for you:

my-react-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

• public/: Contains static assets like the index.html file.
• src/: Contains your React components and styles.
• .gitignore: Specifies files and directories to ignore in Git.
• package.json: Manages project dependencies and scripts.
• vite.config.js: Configuration file for Vite.

Step 5: Customizing Your App

Now that your project is set up, you can start customizing it. Open src/App.jsx and make some changes. Vite’s HMR will instantly reflect your changes in the browser.

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Hello, React with Vite!</h1>
      <p>Welcome to your new React project.</p>
    </div>
  );
}
export default App;

Conclusion

And that’s it! You’ve successfully created a React project from scratch using Vite. This setup provides a solid foundation for building your React applications quickly and efficiently. From here, you can start adding more components, styles, and functionality to your app.

If you have any questions or run into any issues, feel free to leave a comment below. Happy coding!