React Basics

React Installation and Setup with Vite

Vite is the recommended way to start a React project in 2026. It creates a project in a few seconds, starts a dev server that reloads changes almost instantly, and produces a small optimised production bundle with a single build command.

What is Installation and Setup with Vite in React?

Why Installation and Setup with Vite matters

The older create-react-app tool is deprecated and noticeably slow on modest laptops. Vite gives you a faster feedback loop, which matters a lot while you are learning and saving a file every few seconds.

Installation and Setup with Vite example

Create and run a new React app

Terminal

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

How this works

The first command scaffolds a project using the React template. npm install downloads react, react-dom and the build tooling. npm run dev starts a local server, usually on http://localhost:5173, and reloads the browser whenever you save.

The other commands you will use

Terminal

npm run build    # production bundle into dist/
npm run preview  # serve dist/ locally to check the build
npm install axios react-router-dom   # add libraries

Key points to remember

Node.js 18 or newer is required — check with node -v.
Use --template react-ts instead if you want TypeScript from day one.
The dev server is for development only; deploy the contents of dist/.
Install the React Developer Tools browser extension on day one.

Common mistakes with Installation and Setup with Vite

Forgetting the extra -- before --template, which makes npm swallow the flag.
Running npm run dev without npm install first.
Creating the project inside a folder whose path contains spaces or non-English characters — some tools still trip on this.