Install React: A Practical Step-by-Step Guide
Learn how to install React from prerequisites to a running dev server. This guide covers Vite vs CRA, setup steps, troubleshooting, and best practices for a smooth React installation.
By the end of this guide, you will know how to install React on your computer using a modern setup like Vite, including prerequisites, project creation, dev server startup, and basic verification. According to Install Manual, starting with a clean environment and aligning Node.js versions is key to a smooth installation. You’ll also learn optional enhancements and common pitfalls to avoid.
Prerequisites for Installing React
To install React successfully, you should have a modern development environment. Install Manual recommends starting with a supported version of Node.js (an LTS release), which bundles npm for package management. Ensure your terminal or command prompt is ready and that you have a stable internet connection. A capable code editor (such as VS Code) helps with writing components and debugging. If you plan to use TypeScript later, be prepared to install type definitions and adjust tsconfig settings. Remember, the goal is a clean setup that minimizes global dependencies to avoid version conflicts. The Install Manual approach emphasizes consistent environments across projects to reduce troubleshooting time.
Choosing a Setup: Vite vs Create React App
There are two popular routes when installing React: Vite and Create React App (CRA). Vite is modern, fast, and offers instant server starts with hot module replacement, making it a preferred choice for new projects. CRA is still widely used and documented, but it can be heavier and slower to start for larger apps. If you want a quick start with sensible defaults, Vite is usually the best option. For teams familiar with CRA workflows, you can still bootstrap a CRA project, but plan for longer initial build times and more configuration if you later migrate to a different toolchain. Install Manual recommends evaluating your project timeline and future maintenance when choosing between these approaches.
Step-by-Step: Install React with Vite (Overview)
A typical Vite-based setup involves creating a new project with the Vite helper, selecting a React template, navigating into the project folder, installing dependencies, and starting the dev server. You’ll run a command like npm create vite@latest my-app -- --template react (or react-ts for TypeScript). After entering the directory and running npm install, you start the server with npm run dev. This path provides a fast feedback loop and a clean project structure, aligning with modern React development practices highlighted by Install Manual.
Running and Verifying the Development Server
Once the dev server is running, open your browser and visit the local URL shown in the terminal (usually http://localhost:5173 or a similar port). The Vite or CRA starter page confirms React is wired correctly. If you see a welcome screen or the default React app, you’re in good shape. You can then begin editing the source files and see live updates as you save. If you encounter errors, check your terminal for messages about missing packages, syntax errors, or port conflicts, and resolve them before continuing.
Optional Enhancements: TypeScript, ESLint, and Testing
If you plan to use TypeScript, start with the react-ts template or enable TypeScript in an existing project. Install type definitions for React and ReactDOM, and update your tsconfig to support JSX. For code quality and consistency, consider adding ESLint with recommended rules and Prettier for formatting. You can also add Vitest or Jest for unit testing. These enhancements improve maintainability and align with best practices suggested by Install Manual.
Common Pitfalls and Troubleshooting
New React developers often run into port conflicts, permission issues during package installation, or mismatched Node.js versions. Ensure you’re using an LTS Node version and avoid running npm commands with elevated privileges on desktop systems. If a dependency fails to install, try clearing the npm cache and running the install again. Proxy configurations or restrictive networks can also block package downloads, so adjust your environment or use a different network. Following these tips reduces friction and helps you install React more reliably.
Tools & Materials
- Node.js (LTS version)(Includes npm; ensure Node version is supported for your chosen setup)
- npm or yarn(npm comes with Node.js; Yarn is optional for alternative workflows)
- Code editor (e.g., VS Code)(For editing components, debugging, and intellisense)
- Command-line terminal(PowerShell, Terminal, iTerm2, or Git Bash depending on OS)
- Internet connection(Required to download packages and templates)
- Optional: pnpm or Yarn (alternative package managers)(Can speed up installs or suit team preferences)
Steps
Estimated time: 45-60 minutes
- 1
Verify prerequisites
Open a terminal and run `node -v` and `npm -v` to confirm you have an LTS version of Node.js and npm installed. This ensures compatibility with modern React tooling. If versions are outdated, update Node.js before proceeding.
Tip: Having matching Node and npm versions across projects reduces conflicts. - 2
Choose a setup method
Decide between Vite (fast, modern) and CRA (classic workflow). For new projects, Vite is typically recommended due to quicker starts and simpler configuration.
Tip: Prefer Vite for new projects to enjoy faster iteration and easier customization. - 3
Create a new project with Vite
In the terminal, run `npm create vite@latest my-app -- --template react` to generate a React project scaffold. If you prefer TypeScript, use `react-ts` instead of `react`.
Tip: If you’re on Windows, ensure your path has no spaces to avoid shell quoting issues. - 4
Enter project directory
Navigate into your new project with `cd my-app`. This sets the working directory for subsequent commands.
Tip: Use `pwd` (macOS/Linux) or `cd` (Windows) to verify you’re in the right folder before installing dependencies. - 5
Install dependencies
Run `npm install` to install React, React DOM, and other dependencies defined by the template. This step downloads packages from the npm registry.
Tip: If you have a slow internet connection, consider using a package mirror or a shorter registry URL. - 6
Start the dev server
Start the local server with `npm run dev`. The terminal will display the local URL you can open in your browser.
Tip: If port 5173 is in use, the server will suggest an alternate port automatically. - 7
Verify the app runs
Open the provided URL (usually http://localhost:5173) and confirm the React starter page loads. Make a small edit to src/App.jsx to see live updates.
Tip: Make a tiny change (e.g., change a heading) to validate the hot-reload feature. - 8
Optional: enable TypeScript
If not using TypeScript initially, you can add typings later or re-create the project with `react-ts` template. For TS, install types and adjust files to `.tsx`/`.ts`.
Tip: Start with JS and migrate gradually to TS to reduce upfront complexity. - 9
Build and prepare for production
Run `npm run build` to create a production bundle. You can test the production build locally or deploy to your hosting service. Review the build output for any warnings and fix them.
Tip: Enable source maps in production carefully to balance debugging with bundle size.
Got Questions?
What is the first thing I should install before React?
Install Node.js (LTS) and npm to manage packages. This provides the runtime and package manager needed for React development.
First, install Node.js and npm to manage React packages. This gives you the runtime and tools you need to start.
Should I use Vite or Create React App for a new project?
For new projects, Vite is generally recommended due to faster startup and leaner builds. CRA remains viable for existing projects with CRA workflows.
For new projects, go with Vite for speed. CRA is fine if you’re maintaining an existing CRA project.
Do I need TypeScript to start with React?
No, you can start with JavaScript and add TypeScript later. If you want strong typing early, choose the react-ts template from the start.
You don’t need TypeScript right away. Start with JavaScript and add TypeScript later if you want.
What should I do if the dev server won’t start?
Check the console for port conflicts, ensure Node/npm versions match the template requirements, and verify your network access to npm. Restart the server after resolving any blockers.
If the server won’t start, check ports, versions, and your network access, then try again.
How can I verify React is installed correctly?
Open the local URL from the dev server and look for the React starter page. Make a small change in a component to see live updates via hot reloading.
Open the local page and confirm you see React’s starter content; change a file to test live reload.
Is internet access required for every project setup?
Yes. Installing React and dependencies requires downloading packages from npm. A stable internet connection helps avoid partial installs.
Yes, you need internet access to download React and its dependencies.
Watch Video
Main Points
- Verify prerequisites before starting install react
- Choose a modern toolkit (Vite) for faster development
- Follow a clear step-by-step workflow to create and run a React app
- Consider TypeScript and linting for long-term maintainability
- Troubleshoot ports, permissions, and network issues proactively
