React Install: Quick Start Guide for 2026

Learn how to install React, compare CRA and Vite, and set up your first app with npm, yarn, or pnpm. Practical steps, code samples, and best practices for a smooth react install in 2026.

Install Manual Team

April 14, 2026·5 min read

React Install Guide - Install Manual — Photo by Mikhail Nilov via Pexels

Quick AnswerSteps

To install React, start by installing Node.js and npm, then scaffold a project with Create React App or Vite. Initialize a new project, install the core React packages (react and react-dom), and run the dev server. This guide also covers using npm, yarn, or pnpm for installation and project setup.

Why the React install matters in 2026

The term react install refers to the initial setup required to start building a React application. In 2026, modern workflows emphasize speed, reproducibility, and easy transitions between tooling (CRA vs Vite). A solid install avoids runtime surprises, ensures compatibility between React and ReactDOM, and prepares your project for production builds. This section frames the landscape so you can choose a path that matches your timeline and team skill level.

Bash

node -v
npm -v

These commands verify you have a supported Node.js and npm environment before proceeding with any project scaffolding. If your versions are outdated, upgrade to an LTS release to minimize friction during the install.

prerequisitesForInstallSectionOkToProceedNotesChecklistÇoherenceBlockFlagNullForNowElse

Prerequisites for a smooth React install

A clean environment prevents many common install issues. Ensure you have a modern Node.js and a package manager, plus a code editor for editing your React files. The following prerequisites cover the essentials, plus optional tools that speed up development.

Bash

node -v
npm -v

If you manage multiple Node versions, you can install the LTS line with a version manager (e.g., nvm). Then prepare npm for package installation:

Bash

nvm install --lts
nvm use --lts
node -v
npm -v

Optional tooling like yarn or pnpm can improve install times in large projects. These steps ensure your environment is ready for a smooth react install workflow.

sectionWithinBlocksCodeExamplesNoteFirstSection

Create React App vs Vite: Two mainstream starters

For a quick CRA setup, use Create React App. It provides a full React + Webpack + Babel setup with sensible defaults.

Bash

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

For a modern, faster scaffold, Vite offers minimal config and instant server start. Use the Vite React template to bootstrap quickly:

Bash

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

Both paths create a runnable React app, but Vite often shines for smaller teams and rapid prototyping, while CRA remains stable for long-standing projects. The choice affects how you structure code, how builds are optimized, and how you handle environment variables. Remember to align your chosen path with your project goals and team experience.

codeBlocksNotesForSecondBlock

Installing React into an existing project

If you already have a project, you can add React and ReactDOM as dependencies and then start rendering your components.

Bash

npm install react react-dom

Your entry point may look like this:

JSX

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

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

And a simple App component:

JSX

// src/App.jsx
import React from 'react'

export default function App(){
  return <div>Hello, React install in 2026!</div>
}

With these pieces, you’ve completed a basic react install into an existing project and can proceed to build features incrementally.

sectionContainsThreeCodeExamples

Choosing a package manager: npm, yarn, pnpm

Package managers affect install speed, determinism, and workflow. Here are equivalent commands across npm, yarn, and pnpm for adding React and ReactDOM to an existing project.

Bash

# npm (default)
npm install react react-dom

# yarn
yarn add react react-dom

# pnpm
pnpm add react react-dom

Each manager has its own lockfile and install semantics. If you’re starting fresh, you might pick one and stick with it for consistency across the team. If you already use a specific workflow, align with that to reduce churn.

sectionTwoCodeFence

Project structure after install

A typical React project after installing dependencies has a predictable structure. Here is a minimal view to orient new developers.

Bash

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

Your main entry file (main.jsx) wires React to the DOM, while App.jsx defines the root component. The index.html file contains the root element where React mounts. This basic layout makes it easy to extend with routes, components, and state management as your app grows.

JSX

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

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

JSX

// src/App.jsx
import React from 'react'

export default function App(){
  return <h1>Welcome to React install basics</h1>
}

sectionSupportsStartAndDevServer

Run dev server and build for production

Choose the workflow you adopted (CRA or Vite) and use the corresponding commands to run the development server and build for production. The following examples cover both approaches so you can adapt quickly.

Bash

# Create React App workflow
npm start        # start the development server
npm run build    # production build

# Vite workflow
npm run dev      # start the Vite dev server
npm run build    # production build with Vite

Dev servers typically provide hot module replacement for rapid iteration. A production build outputs static assets ready for hosting. For teams, consider adding linting, type checking, and test scripts to your standard npm scripts to enforce quality during the react install process.

sectionCodeBlockForTools

Troubleshooting common issues

Install time problems commonly stem from version mismatches, network issues, or misconfigured scripts. Here are quick steps to diagnose typical errors and keep going.

Bash

# Check Node and npm again
node -v
npm -v

# If you're stuck on a package version, clean install
rm -rf node_modules package-lock.json
npm install

Bash

# When using Vite, ensure dev server starts correctly
npm run dev

If you encounter a module not found error after install, verify that you’re importing the correct file path and that the package.json lists the necessary dependencies under "dependencies" or "devDependencies". A clean reinstall often resolves transient issues.

Steps

Estimated time: 30-60 minutes

1
Install prerequisites
Verify Node.js and npm versions, and install an appropriate Node version if needed. This ensures the environment supports a reliable react install.
Tip: Use an LTS release to maximize compatibility.
2
Choose a starter
Decide between Create React App or Vite based on project needs and team familiarity.
Tip: If you want faster startup times, pick Vite.
3
Scaffold project
Run the chosen scaffold command to create the project folder and initial files.
Tip: Avoid naming conflicts with existing folders.
4
Install core packages
Add react and react-dom to your project as dependencies.
Tip: Pin versions to ensure reproducibility.
5
Run the dev server
Start the development server and verify the React app renders in the browser.
Tip: Check the console for warnings and fix gradually.
6
Plan production build
Add a build script and prepare for production deployment.
Tip: Consider adding TypeScript and linting later for robustness.

Pro Tip: Pin exact React and ReactDOM versions in package.json to prevent mismatches.

Warning: Do not mix CRA and Vite configs within the same project.

Note: Use a single package manager to keep the lockfile consistent across the team.

Prerequisites

Required

Node.js 14+ (LTS)↗
Required
npm 6+ (comes with Node)
Required
Basic command line knowledge
Required
Internet connection for package downloads
Required

Optional

Optional: yarn or pnpm for alternative workflows↗
Optional
A code editor (e.g., VS Code)↗
Optional

Keyboard Shortcuts

Action	Shortcut
CopyCopy selected text in editor or terminal	`Ctrl`+`C`
PastePaste text into editor or terminal	`Ctrl`+`V`
Open Terminal/Command PromptOpen a shell to run commands	`Win`+`R, then type 'cmd'`
Run Selected CommandExecute a highlighted command in terminal/console	`↵`

Got Questions?

What is the simplest way to install React today?

The simplest path is to scaffold a new project with Create React App or Vite and then install the core packages: react and react-dom. This approach provides a ready-to-run development environment with sensible defaults.

Can I use React without a bundler or framework?

Yes for very small pages, you can load React from a CDN and render into a root element. For applications, a bundler (like Vite or CRA) is recommended to optimize and bundle code for production.

Which package manager should I pick for React install?

Any of npm, yarn, or pnpm will work. Choose based on team familiarity and project needs; consistency across the repo matters more than the tool itself.

How do I migrate from CRA to Vite later?

Migration involves updating scripts, adjusting build configurations, and ensuring plugin compatibility. Start with a small feature migration, then scale, testing builds at each step.

Why upgrade to React 18 or newer?

Newer versions bring concurrent features, improved performance, and better SSR. Review the official upgrade guide and test thoroughly before upgrading production apps.

Main Points

Decide between CRA and Vite for your project.
Install react and react-dom as core libraries.
Choose a package manager and add dependencies.
Start a dev server to verify setup.
Plan production build early for smoother deployment.

← More in Smart Home Installations

Why the React install matters in 2026

Prerequisites for a smooth React install

Create React App vs Vite: Two mainstream starters

Installing React into an existing project

Choosing a package manager: npm, yarn, pnpm

Project structure after install

Run dev server and build for production

Troubleshooting common issues

Steps

Install prerequisites

Choose a starter

Scaffold project

Install core packages

Run the dev server

Plan production build

Prerequisites

Keyboard Shortcuts

Got Questions?

Main Points

Related Articles