DEV Community

Cover image for Setting Up Your First React Project with Vite and VS Code
christal riziki
christal riziki

Posted on

Setting Up Your First React Project with Vite and VS Code

Introduction

React is one of the most popular JavaScript libraries for building modern user interfaces. For beginners, the biggest challenge is often not React itself, but setting up the development environment correctly. This article walks through a simple, modern, and reliable way to set up your first React project using Node.js, Vite, and Visual Studio Code, while addressing common issues beginners face.

Prerequisites

Before starting a React project, you need the following:

A computer running Windows, Linux, or macOS

Node.js (LTS version recommended)

npm (comes bundled with Node.js)

Visual Studio Code

Installing Node.js

Download Node.js from the official website:

After installation, verify it by running:

node -v
npm -v

Why Use Vite Instead of Create React App?

Vite is a modern build tool that provides:

Faster startup time

Instant hot reload

Minimal configuration

Industry adoption for modern React projects
reating a React Project with Vite

Run the following command in your terminal:

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

When prompted, select:

Framework: React

Variant: TypeScript /Javascript (Work with a languange that you best understand)
During setup, you may see this prompt:

Use rolldown-vite ?
○ Yes
● No

What Is rolldown-vite?

rolldown-vite is an experimental version of Vite that uses a new Rust-based bundler. While it promises better performance, it is not recommended for beginners due to limited documentation and potential instability.

Always choose No when a beginner in React.

Installing Dependencies

Navigate into the project folder and install dependencies:

cd my-first-react-app
npm install

Lastly Open your first react project in your Vs Code.

Top comments (0)