Create a React App with Vite

Brandon Dusch

Prerequisites: Command Line
Versions: Node v18, Vite 5.0.12
Read Time: 25 minutes

# Introduction

For the last decade, React has grown from a project used by a small Facebook team into a tool used by a global community. React's ability to let you code your website with reusable components and make edits from fewer places changed the world of web development.

But like many tools, getting React set up on your local computer can be tricky. It isn't as simple as installing one package or double-clicking an .html file.

In this tutorial, you will create and run a React app with Vite! ⚡

## What is Vite?

We can render our React code with Vite.

Vite is a tool that allows us to create and run light to mid-sized React applications.

While there are other ways to launch a React app, Vite is the most straightforward.

Vite (French for "quick"), is a remarkably speedy frontend build tool. Though not a full-fledged framework for React, Vite is nice for small to moderate-sized apps.

In order to use Vite, we'll need to do a few things first. Let's get started!

# Node

Vite can be installed as a package from a Node package manager. In this tutorial, we will use npm (or "node package manager").

But wait, what is "Node"?

Node.js is a special tool that lets you run your JavaScript code on a server, in addition to a browser. When Node is installed, you already have npm!

To check if Node is installed, run the following command on the terminal:

node -v

If Node is installed, this command will print the version number you're using. This means you'll also have npm installed! If Node is not found, then download it here.

Next, we will need an editor to write our React code. We recommend VS Code but feel free to use any editor you like.

If your Node version is older than 18, or you don't get a version number at all, make sure to download the latest version here.

# Install Vite

Now that we've ensured that Node is installed, it's time to start using npm!

We can use npm to install Vite.

Enter the following in the terminal and press enter:

npm install vite@latest

This will download the latest version of Vite.

# Setup React App

Now, let's set up our React app!

Run the following command:

npm create vite@latest

This will begin with a set of prompts that you'll need to fill out to create the app.

The first asks what you want to name your project. Maybe something like my-first-app?

Next, you'll be asked what kind of app you want to make. Use the arrow keys to go to "React" and select with enter.

Note: With Vite, you can make more than just a React app. Even ones in Vue or Svelte!

You'll then be asked whether you want the React app set up with TypeScript or regular JavaScript. Let's go for just JavaScript.

But wait, what about this "SWC" thing? This stands for "Speedy Web Compiler" and it allows your code to get processed a little quicker. For this tutorial, it doesn't matter if you select it.

# Run React App

After this point, everything should be set and Vite will print directions for how to run your React app!

First, use the cd command to change into the new Vite folder you made:

cd my-first-app

Next, run the following npm command:

npm install

Just like how we are using Vite as a tool, Vite itself uses tools, or dependencies, to work as expected. Similar to booting up a game console, running npm install starts up these dependencies so that Vite can work.

Lastly, we will run this command:

npm run dev

Vite will now build up our app and then serve it with a localhost link, similar to this:

If we copy/paste this link on a browser, we should see the following output:

To copy/paste, here are the keyboard shortcuts:

• For Mac:

  • Copy: cmd + c
  • Paste: cmd + v

• Windows:

  • Copy: ctrl + c
  • Paste: ctrl + v

# Vite App Structure

When creating a new React project, Vite sets up all the files and folders usually needed. This way, we can get right to building.

If we open our my-first-app folder in an editor like VS Code, the following files and folders are usually found:

• 📂 src/
  • 📄 App.jsx: The code for the <App> component, written in JavaScript Syntax Extension (JSX).
  • 📄 index.css: The base styles for the React app.
• 📄 index.html: The place where the root of the React app (i.e., <div id="root"></div>).
• 📄 package.json: A list of the outside code used to make this app run, including react, react-dom, and vite.
• 📄 vite.config.js: The settings for our Vite React app.

Inside most Vite React apps, there is a src folder (short for "source") that contains all the source code, including .jsx files.

In the package.json file, we'll find:

"dependencies": {
  "react": "^18.0.0",
  "react-dom": "^18.0.0"
}

• The "react" package lets you write React code.
• The "react-dom" package lets you render that React code.

# Conclusion

There you have it! We've just learned to create and run a React app with Vite! 🎉

Vite is currently one of the best options for getting new ideas up and running quickly. And React is one of the best ways to express those ideas!

Feel free to play around with the code in the files, especially in App.jsx. Also, don't be afraid to start your next project with Vite!

# More Resources

• Vite official site
• React official site
• Framework Valley: React

Need Help?

Did you know that you can join our Community to get live help from our Code Mentors?

OR

Report a bug