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)