How to Install React App: A Complete Step-by-Step Guide for Developers

React has become one of the most widely adopted JavaScript libraries for building dynamic, interactive user interfaces. Developed and maintained by Facebook (now Meta), React enables developers to create reusable UI components that render efficiently and scale seamlessly across web and mobile platforms. Whether you're building a simple landing page or a complex single-page application (SPA), installing a React app correctly is the essential first step toward a robust development workflow.

Many beginners encounter confusion when setting up their first React project—whether it’s choosing between Create React App (CRA), Vite, or manual Webpack configurations. This guide eliminates ambiguity by providing a comprehensive, up-to-date tutorial on how to install a React app using the most reliable and industry-standard methods. You’ll learn not only how to get started, but also why each step matters, what tools to avoid, and how to optimize your setup for performance, maintainability, and scalability.

By the end of this tutorial, you’ll be equipped to install, configure, and run a production-ready React application with confidence—no prior experience required.

Step-by-Step Guide

Prerequisites: What You Need Before Installing React

Before you begin installing React, ensure your development environment meets the following minimum requirements:

• Node.js (version 18 or higher recommended)
• npm (Node Package Manager) or yarn (optional but supported)
• A code editor (VS Code, Sublime Text, or WebStorm)
• Basic knowledge of JavaScript (ES6+) and the command line

Node.js is required because React applications are built using JavaScript modules, and Node.js provides the runtime environment to manage dependencies, run build tools, and serve development servers. npm comes bundled with Node.js and is used to install React and its related packages.

To verify your setup, open your terminal (Command Prompt on Windows, Terminal on macOS/Linux) and run:

node -v
npm -v

If both commands return version numbers (e.g., v20.10.0 and 10.2.3), you’re ready to proceed. If not, download and install the latest LTS version of Node.js from nodejs.org.

Option 1: Install React Using Create React App (CRA)

Create React App (CRA) is the officially supported way to set up a new React application with zero configuration. It abstracts away complex build tools like Webpack and Babel, allowing you to focus on writing code. While newer alternatives like Vite are gaining popularity, CRA remains a reliable choice for learning and production applications.

To install a React app using CRA, run the following command in your terminal:

npx create-react-app my-react-app

This command does several things automatically:

• Creates a new directory named my-react-app
• Downloads and installs React, ReactDOM, and all necessary dependencies
• Sets up a development server with hot-reloading
• Configures Babel for modern JavaScript support
• Includes ESLint for code quality
• Generates a production-ready build script

Once the installation completes (this may take a few minutes depending on your internet speed), navigate into the project folder:

cd my-react-app

Then start the development server:

npm start

Your browser will automatically open to http://localhost:3000, displaying the default React welcome page. If it doesn’t, manually visit the URL. You’ll see the classic React logo with a spinning animation and a few editable components.

Option 2: Install React Using Vite (Recommended for Modern Projects)

Vite is a modern build tool developed by Evan You, the creator of Vue.js. It offers significantly faster development server startup times and hot module replacement (HMR) compared to CRA. Vite is now the preferred choice for new React projects due to its speed, simplicity, and excellent TypeScript support.

To create a React app with Vite, run:

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

Alternatively, if you prefer using yarn:

yarn create vite my-react-app --template react

You’ll be prompted to select a variant. Choose React (JavaScript) or React + TypeScript if you want type safety from the start.

After the project is scaffolded, navigate into the folder:

cd my-react-app

Install dependencies:

npm install

Then start the development server:

npm run dev

Vite will launch a development server at http://localhost:5173. Unlike CRA, Vite’s server starts in under a second, even on large projects.

Vite’s configuration is minimal and transparent. The vite.config.js file is easy to customize if you need to add plugins, alter build settings, or configure environment variables.

Option 3: Manual Installation with Webpack and Babel (Advanced)

While not recommended for beginners, manually configuring React with Webpack and Babel gives you complete control over your build pipeline. This method is useful if you’re working on enterprise applications with custom requirements or need to integrate with legacy systems.

First, initialize a new Node.js project:

mkdir my-react-manual
cd my-react-manual
npm init -y

Install React and ReactDOM:

npm install react react-dom

Install development dependencies:

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin css-loader style-loader

Create a src folder and inside it, create index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
const App = () => <h1>Hello, React!</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Create an index.html file in the root folder:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Manual Setup</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

Create a webpack.config.js file in the project root:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
],
resolve: {
extensions: ['.js', '.jsx'],
},
devServer: {
static: './dist',
port: 3000,
hot: true,
},
};

Create a .babelrc file:

{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}

Update your package.json scripts:

"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
}

Run the development server:

npm start

While this method gives you full control, it requires ongoing maintenance. For most use cases, Vite or CRA are superior choices.

Verify Your Installation

Regardless of the method you choose, verify your React app is working correctly by:

• Confirming the browser opens automatically or manually visiting the correct port (3000 for CRA, 5173 for Vite)
• Checking the browser’s developer console for errors
• Modifying the text in App.js (or main.jsx in Vite) and saving the file to trigger live reload
• Ensuring the page updates without a full refresh

If the page updates instantly when you change code, your setup is working correctly. If you encounter errors, check the terminal output for specific messages—common issues include missing dependencies, port conflicts, or incorrect file paths.

Best Practices

Use the Right Tool for the Job

Don’t default to Create React App just because it’s familiar. For new projects, especially those targeting performance and modern tooling, Vite is the better choice. CRA is still excellent for learning and legacy compatibility, but Vite’s speed, smaller bundle sizes, and native ES module support make it ideal for modern development.

Always Use a Version Manager for Node.js

Node.js versions change frequently, and different projects may require different versions. Use a version manager like nvm (Node Version Manager) to switch between versions seamlessly.

Install nvm (macOS/Linux):

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Then install and use the latest LTS version:

nvm install --lts
nvm use --lts

On Windows, use nvm-windows or Volta for similar functionality.

Initialize Git Early

As soon as you create your React project, initialize a Git repository:

git init
git add .
git commit -m "feat: initial React app setup"

This ensures your code is version-controlled from day one. Create a .gitignore file to exclude node_modules, .env, and build folders:

node_modules/
.env
build/
dist/
.DS_Store

Organize Your Project Structure

As your app grows, a well-structured folder hierarchy prevents chaos. Use a scalable structure like this:

src/
├── components/          
Reusable UI components
├── pages/               
Route-specific views
├── assets/              
Images, fonts, styles
├── hooks/               
Custom React hooks
├── context/             
React Context providers
├── services/            
API calls and data fetching
├── utils/               
Helper functions
├── App.jsx              
Main component
├── main.jsx             
Entry point (Vite)
└── index.css            
Global styles

Keep components small, focused, and reusable. Avoid putting logic in components that belongs in hooks or services.

Use TypeScript from the Start

While JavaScript is sufficient for small apps, TypeScript adds type safety, better tooling, and fewer runtime errors. If you're building anything beyond a prototype, choose the React + TypeScript template in Vite or convert your CRA project later.

To add TypeScript to an existing CRA project:

npm install --save typescript @types/react @types/react-dom

Then rename src/App.js to src/App.tsx and src/index.js to src/index.tsx. CRA will auto-configure the rest.

Set Up Environment Variables

Never hardcode API keys or URLs in your source code. Use environment variables instead.

Create a .env file in your project root:

REACT_APP_API_URL=https://api.yourservice.com
REACT_APP_VERSION=1.0.0

Access them in your code with process.env.REACT_APP_API_URL. Only variables prefixed with REACT_APP_ are exposed to the browser in CRA. Vite allows any variable prefixed with VITE_.

Optimize for Performance

React apps can become bloated quickly. Follow these performance tips:

• Use React.memo() to prevent unnecessary re-renders of components
• Code-split with React.lazy() and Suspense for route-based splitting
• Lazy-load images using the loading="lazy" attribute
• Minimize bundle size by removing unused libraries
• Use a CDN for static assets when possible

Test Your App Early

Integrate testing from the beginning. CRA includes Jest and React Testing Library by default. Create a simple test file:

// src/App.test.js
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

Run tests with:

npm test

Tools and Resources

Essential Development Tools

• VS Code – The most popular code editor with excellent React extensions (ESLint, Prettier, React Snippets)
• React Developer Tools – Browser extension for Chrome and Firefox to inspect React component trees and state
• ESLint – Static code analyzer to catch errors and enforce coding standards
• Prettier – Code formatter that ensures consistent styling across your team
• React Router – Declarative routing for React apps (install with npm install react-router-dom)
• Redux Toolkit – State management solution for complex apps (optional for small apps)
• Axios – HTTP client for making API requests

Learning Resources

• React Documentation (Official) – The most authoritative and up-to-date source
• React Developer Roadmap – Visual guide to learning React and related tools
• freeCodeCamp React Tutorials – Free, project-based learning
• Traversy Media on YouTube – Clear, concise React tutorials
• Egghead.io – In-depth video courses for intermediate to advanced developers

Deployment Platforms

Once your app is ready, deploy it to one of these platforms:

• Vercel – Optimized for React and Next.js, free tier available
• Netlify – Easy drag-and-drop deployment, great for SPAs
• GitHub Pages – Free hosting for public repositories
• Render – Simple, reliable, with custom domains

To deploy a Vite or CRA app to Vercel or Netlify, simply connect your GitHub repository. The platform automatically detects your project type and runs the build command.

Community and Support

Engage with the React community for help and inspiration:

• Reactiflux Discord – Active community with experts and beginners
• Stack Overflow – Search before asking; most React questions have been answered
• Reddit r/reactjs – News, tutorials, and discussions

Real Examples

Example 1: Building a Todo List App with Vite

Let’s walk through a real-world example: creating a simple Todo List app using Vite.

Start by creating the project:

npm create vite@latest todo-app -- --template react
cd todo-app
npm install

Replace the content of src/App.jsx with:

import { useState } from 'react';
function App() {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');
const addTodo = () => {
if (input.trim()) {
setTodos([...todos, { id: Date.now(), text: input, completed: false }]);
setInput('');
}
};
const toggleTodo = (id) => {
setTodos(
todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
)
);
};
const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};
return (
<div style={{ padding: '2rem', maxWidth: '500px', margin: '0 auto' }}>
<h1>Todo List</h1>
<div style={{ display: 'flex', marginBottom: '1rem' }}>
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Add a new task"
style={{ flex: 1, padding: '0.5rem', marginRight: '0.5rem' }}
/>
<button onClick={addTodo} style={{ padding: '0.5rem 1rem' }}>Add</button>
</div>
<ul style={{ listStyle: 'none', padding: 0 }}>
{todos.map(todo => (
<li
key={todo.id}
style={{
padding: '0.75rem',
margin: '0.5rem 0',
backgroundColor: todo.completed ? '
e0e0e0' : '#fff',
textDecoration: todo.completed ? 'line-through' : 'none',
border: '1px solid 
ddd',
borderRadius: '4px',
}}
>
<span onClick={() => toggleTodo(todo.id)} style={{ cursor: 'pointer' }}>
{todo.text}
</span>
<button
onClick={() => deleteTodo(todo.id)}
style={{
marginLeft: '1rem',
padding: '0.25rem 0.5rem',
backgroundColor: '
ff4757',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
}}
>
Delete
</button>
</li>
))}
</ul>
</div>
);
}
export default App;

Run npm run dev and you’ll have a fully functional, interactive Todo app with add, toggle, and delete functionality—all built with React and Vite.

Example 2: Deploying to Vercel

After testing your app locally, deploy it to Vercel:

1. Push your code to a GitHub repository
2. Go to vercel.com and sign up
3. Click “Add New Project”
4. Import your GitHub repository
5. Ensure the framework preset is set to “React”
6. Click “Deploy”

In under a minute, your app will be live at a unique Vercel URL (e.g., my-todo-app.vercel.app). You can also connect a custom domain.

Example 3: Using React Router in a Multi-Page App

Install React Router:

npm install react-router-dom

Update src/App.jsx:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
</nav>
<Routes>
<Route path="/" element=<Home /> />
<Route path="/about" element=<About /> />
</Routes>
</div>
</Router>
);
}
export default App;

Create src/pages/Home.jsx:

import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<h1>Home Page</h1>
<p>Welcome to the homepage.</p>
<Link to="/about">Go to About</Link>
</div>
);
}
export default Home;

Create src/pages/About.jsx:

import { Link } from 'react-router-dom';
function About() {
return (
<div>
<h1>About Page</h1>
<p>Learn more about this app.</p>
<Link to="/">Go to Home</Link>
</div>
);
}
export default About;

This creates a true multi-page SPA with client-side routing—no page reloads, seamless navigation.

FAQs

What is the easiest way to install React?

The easiest way is to use Vite: npm create vite@latest my-app -- --template react. It’s fast, modern, and requires minimal setup.

Can I install React without Node.js?

No. React is a JavaScript library that requires a build toolchain (like Vite, CRA, or Webpack) to compile JSX and manage dependencies—all of which run on Node.js. You cannot run React apps in production without it.

Is Create React App dead?

No, but it’s deprecated for new projects. Meta announced in 2023 that CRA will no longer receive major updates. Vite is now the recommended tool for new applications.

Do I need to learn Webpack to use React?

No. Tools like Vite and CRA abstract Webpack away. You only need to learn Webpack if you’re building custom tooling or working on legacy systems.

Why is my React app slow to load?

Common causes include large bundles, unoptimized images, or too many third-party libraries. Use the React DevTools Profiler and Chrome DevTools Network tab to identify bottlenecks. Code-splitting and lazy loading can significantly improve load times.

How do I update React to the latest version?

Run npm update react react-dom for CRA or Vite projects. Always check the official React release notes before updating to ensure compatibility with your dependencies.

Can I use React with other frameworks like Angular or Vue?

Technically yes, but it’s not recommended. React is designed to be the UI layer of your application. Mixing frameworks increases complexity and bundle size. Choose one framework per project.

What’s the difference between React and React Native?

React is for building web applications. React Native is a separate framework that uses React syntax to build native mobile apps (iOS and Android). They share similar concepts but have different renderers and APIs.

How do I add CSS to my React app?

You have multiple options: plain CSS files, CSS Modules, styled-components, or Tailwind CSS. For beginners, start with regular CSS imports in your component files. For larger apps, consider Tailwind or CSS Modules for scoping.

Is React free to use?

Yes. React is open-source and free under the MIT license. Meta does not charge for its use, even in commercial products.

Conclusion

Installing a React app is no longer the daunting task it once was. With modern tools like Vite and streamlined setups via Create React App, you can launch a production-ready application in under five minutes. The key is choosing the right tool for your project’s needs: Vite for speed and modernity, CRA for simplicity and learning, and manual setups only when full control is required.

Remember that setup is just the beginning. The real power of React lies in building reusable components, managing state effectively, and creating seamless user experiences. As you progress, continue refining your project structure, adopt TypeScript for scalability, and integrate testing and deployment pipelines early.

React’s ecosystem is vast, but it’s designed to grow with you. Start simple, build incrementally, and don’t be afraid to explore new tools as they emerge. The React community is one of the most active and supportive in web development—so never hesitate to ask questions, share your work, and keep learning.

Now that you know how to install a React app, the next step is to start building. Open your terminal, run your first command, and create something amazing.