How to Set Up React with Vite

Introduction

Setting up React with Vite is easy and quick. First, make sure you have Node.js installed. If you don't have it yet, you can download it from the official Node.js website. After that, open your command line tool and let’s create your new project. Ready? Let’s break it down into simple steps.

Step 1: Create a New Vite Project

To start, you'll need to run a command to create a new Vite project. Type the following command in your command line:

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

In this command:

npm create vite@latest tells npm to create a new Vite project.
my-react-app is the name of your project. You can choose any name you like.
--template react specifies that you want to set up a React template.

After you run the command, Vite will create your project and download the necessary files.

Step 2: Navigate to Your Project Directory

Now that Vite has created your project, navigate to the project folder. Use the command:

cd my-react-app

This command changes your current directory to the new project folder you just created.

Step 3: Install Dependencies

Next, you need to install the project's dependencies. This is easy. Just run:

npm install

This command will grab all the packages Vite and React need to run your app. It won’t take long.

Step 4: Start the Development Server

Now, it's time to see your work in action! Start the development server by running this command:

npm run dev

This command will start the server and show you the URL where your app is running, usually http://localhost:5173. Open your web browser and go to that address. You should see a page displaying a simple React app!

Step 5: Explore the Project Structure

Let’s take a look at what Vite set up for you. Here’s a brief overview of the important folders and files:

src/: This is where your source code lives. You will spend most of your time here.
public/: You can put static files here that don’t need processing by Vite.
index.html: The main HTML file. It’s the entry point for your app.
package.json: This file holds information about your project and the dependencies you installed.

Step 6: Make Changes to Your App

You can start editing your app right away. Open the src/App.jsx file in your favorite code editor. You will see some starter code. Change the text in the h1 tag to something like:

<h1>Hello, Vite with React!</h1>

As you make changes, the development server will automatically refresh your browser. It’s a super smooth experience!

Step 7: Build for Production

When you’re ready to publish your app, you need to create a production build. You can do this with the command:

npm run build

This command prepares your app for deployment. It bundles your code and optimizes it for performance. You can find the built files in the dist/ folder.

Conclusion

Setting up React with Vite is straightforward and fun. You now have a solid foundation to create amazing web apps. Play around with the code, add new features, and explore the documentation. With Vite and React, you’re ready to build something great!

For more details on Vite, check out the Vite official site, and for React, visit the React official site. Happy coding!