React JS Install: Quick Start Guide

Developer-friendly guide for installing React.js using Create React App, Vite, or a minimal esbuild setup. Includes prerequisites, bootstrap commands, and practical troubleshooting tips.

Install Manual Team

April 8, 2026·5 min read

React Install Guide - Install Manual — Photo by Lukas Blazek via Pexels

Quick AnswerSteps

To install React.js, first install Node.js (LTS) and npm, then boot your project with a starter like Create React App or Vite. Both paths produce a working dev server with hot reloading; you can also adopt a minimal esbuild setup for tiny projects. After installation, run your dev server with npm start or npm run dev to view your app.

Before you install: prerequisites

Before you install React.js, ensure your environment is prepared. You will run commands in a terminal or shell, so a basic familiarity with the command line helps. You should have a modern runtime for JavaScript, typically Node.js with npm or Yarn. Node.js acts as the runtime for your development server, while npm or Yarn handles package installation. Use an LTS (long-term support) release for stability across projects. Additionally, you’ll want Git installed to fetch starter templates and manage version control. Confirm these essentials are available before proceeding.

Bash

node -v
npm -v

If you don’t have Git installed, verify it as well:

Bash

git --version

Optional checks: ensure your shell supports common bindings and environment variables. These prerequisites help avoid late-stage failures during bootstrap.

Bootstrap with Create React App

Create React App (CRA) is a conventional starting point for many React projects. It configures a complete development environment with a sensible default: Webpack, a dev server, and a build pipeline. If you're new to React, CRA reduces boilerplate and helps you focus on building components. You can start with TypeScript by using the TypeScript template.

Bash

npx create-react-app my-app

This creates a folder named my-app with all necessary files. To run the development server:

Bash

cd my-app
npm start

Optional TypeScript template:

Bash

npx create-react-app my-app --template typescript
cd my-app
npm start

CRA provides a conventional project structure: public/, src/, index.js, and App.js. It’s ideal for rapid prototyping and learning React concepts.

Bootstrap with Vite (modern, fast)

Vite is a modern bundler that starts a development server quickly and offers fast hot module replacement. It’s a great choice for new projects where you value build performance and lean configuration.

Bash

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

Navigate into the project and start the dev server:

Bash

cd my-app
npm install
npm run dev

Alternative (TypeScript):

Bash

npm create vite@latest my-app -- --template react-ts

If you prefer Yarn:

Bash

yarn create vite my-app --template react

Vite-generated projects tend to have smaller initial bundles and a simpler dev experience, making them a popular choice for modern React development.

Minimal manual setup with esbuild (tiny projects)

For lightweight projects where you want full control over the tooling, a minimal esbuild setup is instructive. This path requires a little more hands-on work but yields a fast, dependency-light environment.

Bash

mkdir my-app && cd my-app
npm init -y
npm install react react-dom
npm install --save-dev esbuild

Create a minimal React entry:

JavaScript

// src/index.jsx
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

const root = document.getElementById('root')
createRoot(root).render(<App />)

Create a simple App component:

JavaScript

// src/App.jsx
import React from 'react'
export default function App() {
  return <div>Hello React</div>
}

Add a basic HTML shell via a here-doc (to avoid editing multiple files manually):

Bash

cat > index.html << 'HTML'
<!doctype html>
<html>
  <head><meta charset="UTF-8" /></head>
  <body><div id="root"></div><script src="/dist/bundle.js"></script></body>
</html>
HTML

Wire up a couple of npm scripts to build and serve:

JSON

// package.json (scripts excerpt)
"scripts": {
  "build": "esbuild src/index.jsx --bundle --outfile=dist/bundle.js",
  "start": "esbuild src/index.jsx --bundle --outfile=dist/bundle.js --serve=8080"
}

Visit http://localhost:8080 to see the app. This path is best for experimentation or education when you want full visibility into the bundling process.

Verifying the install and first run

After bootstrap, verify the dev server is running and the app renders in a browser. CRA typically serves on http://localhost:3000, while Vite defaults to http://localhost:5173. If you used the esbuild route, your server will be at http://localhost:8080 as configured in your start script.

Bash

# CRA path (example)
cd my-app
npm start
# Vite path (example)
cd my-app
npm run dev

In your browser, navigate to the appropriate URL and confirm you see the default React welcome screen or your custom App component. You should also see that hot module replacement updates the page when you save files in src/.

To quickly test the server response:

Bash

curl http://localhost:3000

If you’re on Vite, try:

Bash

curl http://localhost:5173

These steps confirm the install is successful and the development environment is ready for coding.

Troubleshooting common issues

Even with a clear path, you may hit snags. Common problems include version conflicts, missing dependencies, or port collisions. Start by confirming Node.js and npm/yarn are installed and in your PATH. If a bootstrap command fails, remove node_modules and reinstall dependencies.

Bash

# Clean and reinstall
rm -rf node_modules
npm install

If the bootstrap script complains about peer dependencies, you can retry with legacy peer deps (for npm):

Bash

npx create-react-app my-app --legacy-peer-deps

For Vite, if the dev server can’t start due to port issues, try a different port:

Bash

npm run dev -- --port 3001

If you see module resolution errors, double-check your import paths and ensure your file structure matches the example templates. Keeping a clean workspace and consistent package manager helps avoid hidden lockfile conflicts.

Project structure and next steps

Modern React setups share common folders but differ slightly in file naming. A typical CRA project exposes src/, public/, index.js, and App.js. Vite projects generate similar structures but with more modern entry points, often using main.jsx instead of index.js.

Bash

# Simple tree view (on systems with tree available)
tree -L 2

Example structure (generic):

my-app/
├─ node_modules/
├─ public/
├─ src/
│  ├─ main.jsx
│  ├─ App.jsx
│  └─ index.css
├─ index.html
└─ package.json

Next steps include adding routing, state management, and styling. As you grow, you might migrate to TypeScript templates, introduce testing with Jest or Vitest, and optimize builds with code splitting and lazy loading. Remember to lock down your tooling to prevent drift across environments and to document your setup in project READMEs for teammates.

1-Click deeper dive: quick comparisons and best practices

For teams choosing a bootstrap path, prioritize development speed vs. customization. CRA is excellent for beginners and rapid iteration, while Vite shines for larger, modern React codebases with faster hot reloads. In production, consider evaluating bundlers, server configurations, and CI pipelines early so your project scales cleanly. When in doubt, start with Vite for new projects and migrate to CRA if your team relies on its long-standing conventions.

Steps

Estimated time: 60-90 minutes

1
Choose your bootstrap path
Decide between Create React App for rapid start or Vite for a modern, fast setup. Consider project size, team familiarity, and build requirements.
Tip: If you're learning React, CRA gives a stable baseline; for new projects, start with Vite to save time on dev-server hot reloads.
2
Install prerequisites
Verify Node.js, npm (or Yarn), and Git are installed. This ensures you can fetch templates and install dependencies.
Tip: Use LTS versions where possible to maximize compatibility across tools.
3
Bootstrap the project
Run the chosen bootstrap command to scaffold a new React app. This creates a ready-to-run template with a development server.
Tip: Prefer a dedicated project directory to keep tooling isolated.
4
Install dependencies
If the bootstrap path requires a separate install step, run npm install (or yarn) to download frameworks and libraries.
Tip: Check for peer dependency warnings and resolve them early.
5
Start the dev server
Launch the development server and verify the app renders in your browser. Confirm hot-reload updates on file changes.
Tip: Bookmark the local URL (e.g., http://localhost:3000) for quick access.
6
Validate with a simple test
Create a small React component and render it to ensure JSX compiles and DOM updates correctly.
Tip: Keep the test component minimal to isolate any issues quickly.
7
Plan next enhancements
Outline routing, state management, and styling strategies for your project. Prepare for production builds.
Tip: Documentation early accelerates onboarding and reduces later refactors.

Pro Tip: Stick to a single package manager (npm, yarn, or pnpm) per project to avoid lockfile conflicts.

Warning: Do not mix package managers in a project; it can cause subtle dependency resolution issues.

Note: If you use TypeScript, prefer the React + TypeScript templates to avoid later migration work.

Pro Tip: Use Vite for faster startup times and simpler configs on new React projects.

Prerequisites

Required

Node.js (LTS) and npm or Yarn↗
Required
Git↗
Required
A code editor (e.g., VS Code)↗
Required
Basic command-line knowledge
Required
Internet access for package downloads
Required

Optional

Optional: pnpm or Yarn as alternative package managers↗
Optional

Commands

Action	Command
Bootstrap with Create React AppUse the template as shown to initialize a CRA project.	—
Bootstrap with ViteChoose this for a faster dev server and leaner config.	—

Got Questions?

What is the difference between Create React App and Vite?

Create React App provides a stable, opinionated setup with sensible defaults, making it ideal for beginners and quick starts. Vite focuses on speed, modern tooling, and faster startup with on-demand dependencies, which benefits larger projects and advanced workflows.

Do I need Node.js to install React?

Yes. Node.js provides the runtime for React tooling, bundlers, and the npm/yarn package managers used to install React and its dependencies.

Can I install React without internet access?

An internet connection is required to download React and its dependencies. You can set up a local mirror, but typical development relies on online package repositories.

Which package manager should I use: npm, yarn, or pnpm?

All can work. Choose one and stay consistent within the project. npm is most common, Yarn offers workspaces, and pnpm provides efficient disk usage.

Is CRA still maintained?

CRA remains widely used and documented, but many teams prefer Vite for new projects due to faster iteration and modern tooling. Evaluate based on project needs and team familiarity.

Main Points

Choose a bootstrap path that fits project size and team familiarity
Verify Node.js and package managers are installed before bootstrap
CRA and Vite are the two main routes; CRA is stable, Vite is faster
Keep tooling consistent to avoid dependency conflicts
Test the dev server immediately after bootstrap and iterate

← More in Smart Home Installations

Before you install: prerequisites

Bootstrap with Create React App

Bootstrap with Vite (modern, fast)

Minimal manual setup with esbuild (tiny projects)

Verifying the install and first run

Troubleshooting common issues

Project structure and next steps

1-Click deeper dive: quick comparisons and best practices

Steps

Choose your bootstrap path

Install prerequisites

Bootstrap the project

Install dependencies

Start the dev server

Validate with a simple test

Plan next enhancements

Prerequisites

Commands

Got Questions?

Main Points

Related Articles