React Basics: Setting up a React project with Vite

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.


There are many ways to create a project with React.

The way I suggest is by using Vite.

Vite is a modern tool that provides a development server, is very fast, and many people in the JS community consider it optimal.

💁‍♂️ Note: Vite can be used as a replacement for create-react-app, another tool that’s popular but also slower. You can use that instead if you prefer, but I found Vite just great and it can also be used with other libraries, not just React.

To create a project using Vite you first go into the folder where you host all your projects, in my case a dev folder in my user’s home folder.

Then run

npm create vite@latest

# or

bun create vite

Choose a name for the project. That will also be the project’s folder name. In this case “test”:

Now you can choose a framework. Pick “React”.

Pick JavaScript or TypeScript:

Done!

Now go to the newly created project folder:

cd test

and run

npm install

to install the dependencies, followed by

npm run dev

to start the application:

The application should be running at http://localhost:5173 (the port might be different if it’s already used)

Now you’re ready to work on this application!

Here’s the application folder opened in VS Code.

As you can see, Vite created a basic application and you can now open src/App.tsx (TypeScript) or App.jsx to start working on it.

One convenience of a tool like Vite is that now you can add files and Vite will automatically recognize them, without the need of restarting npm run dev like we had to do with our Node.js projects.

And when you save a component, it’s automatically updated in your browser.

It makes development very fast and fun!

Lessons in this unit:

0: Introduction
1: ▶︎ Setting up a React project with Vite
2: React Components
3: Introduction to JSX
4: Using JSX to compose UI
5: The difference between JSX and HTML
6: Embedding JavaScript in JSX
7: Handling user events
8: Install the React Developer Tools
9: Getting started with JSX
10: How to return multiple elements in JSX
11: How to learn React
12: Should you use jQuery or React?
13: React concepts: declarative
14: The Virtual DOM
15: The roadmap to learn React
16: What’s new in React 19
17: How to install React
18: The React Fragment
19: React, how to transfer props to child components
20: React PropTypes
21: React DOM events on components
22: How to pass a parameter to event handlers in React