Create a React Project: A Complete Setup Guide

How to Create a React Project: A Complete Setup Guide

React has become one of the most popular frontend libraries for building modern web applications.

However, when starting a new React project, developers often face an initial question:

What is the best way to create a React application?

Over the years, the React ecosystem has evolved significantly.

The traditional approach using Create React App (CRA) is no longer the preferred choice for most new projects. Modern React development usually involves tools such as:

• Vite
• Next.js
• React frameworks
• Custom build configurations

This article provides a practical overview of different ways to create a React project, including the complete setup steps, terminal commands, and when each approach should be considered.

---

Prerequisites

Before creating a React project, make sure your development environment is ready.

1. Install Node.js

React development requires Node.js.

Check whether Node.js is installed:

node -v

Check npm:

npm -v

If Node.js is not installed, download and install the LTS version from the official Node.js website.

After installation, verify:

node -v
npm -v

Example output:

v22.x.x
10.x.x

---

Method 1: Create React Project with Vite (Recommended)

Currently, Vite is one of the most popular ways to start a React project.

Vite provides:

• Extremely fast development server
• Modern ES module support
• Simple configuration
• Excellent developer experience

For most React projects, Vite should be the default choice.

---

Step 1: Create a New React Project

Run:

npm create vite@latest

The CLI will ask several questions.

Example:

Project name: my-react-app

Enter your project name.

Then select:

Framework:
> React

Variant:
> JavaScript

or:

> TypeScript

---

Step 2: Enter the Project Folder

cd my-react-app

---

Step 3: Install Dependencies

Run:

npm install

This installs:

• React
• React DOM
• Vite dependencies

---

Step 4: Start Development Server

npm run dev

You will see:

Local:
http://localhost:5173/

Open this URL in your browser.

Your React application is now running.

---

Vite Project Structure

A typical Vite React project:

my-react-app
│
├── node_modules
├── public
│
├── src
│   ├── App.jsx
│   ├── main.jsx
│   └── assets
│
├── index.html
├── package.json
└── vite.config.js

Important files:

main.jsx

Application entry point.

Example:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

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

---

App.jsx

Main React component.

Example:

function App() {
  return (
    <h1>
      Hello React
    </h1>
  )
}

export default App

---

Method 2: Create React Project with Create React App (CRA)

Create React App was the official React starter tool for many years.

Command:

npx create-react-app my-app

Enter the folder:

cd my-app

Start:

npm start

The application will run:

http://localhost:3000

---

Why CRA Is Less Common Today

Although CRA is still usable, it is no longer the recommended approach for new projects.

Common limitations:

• Slower startup time
• Larger build process
• Less flexible configuration
• Modern React ecosystem has moved toward frameworks like Vite and Next.js

For learning basic React concepts, CRA is acceptable.

For new production projects, Vite is usually preferred.

---

Method 3: Create React Project with Next.js

Next.js is a React-based full-stack framework.

It is widely used for:

• Production websites
• SaaS applications
• Enterprise applications
• SEO-focused websites

Create a Next.js project:

npx create-next-app@latest my-next-app

Move into the folder:

cd my-next-app

Install dependencies:

npm install

Start:

npm run dev

Open:

http://localhost:3000

---

Next.js Setup Options

During installation, Next.js asks several questions.

Example:

Would you like to use TypeScript?
Yes

Would you like to use ESLint?
Yes

Would you like to use Tailwind CSS?
Yes

Would you like your code inside a src directory?
Yes

Would you like to use App Router?
Yes

For modern projects, recommended choices:

TypeScript: Yes
ESLint: Yes
Tailwind CSS: Optional
App Router: Yes

---

Next.js Project Structure

Example:

my-next-app

├── src
│   └── app
│       ├── page.tsx
│       ├── layout.tsx
│
├── public
├── package.json
└── next.config.js

Compared with traditional React:

Next.js provides:

• Routing
• Server components
• API routes
• SEO optimization
• Server-side rendering

---

Method 4: Create React Project Manually

For learning purposes, developers can also create React projects manually.

This helps understand how React actually works.

---

Step 1: Create Folder

mkdir my-react-project

cd my-react-project

---

Step 2: Initialize npm

npm init -y

This creates:

package.json

---

Step 3: Install React

npm install react react-dom

---

Step 4: Install Vite

npm install vite --save-dev

---

Step 5: Update package.json

Add:

{
  "scripts": {
    "dev": "vite"
  }
}

---

Step 6: Create Files

Create:

index.html

src/
 ├── main.jsx
 └── App.jsx

---

index.html

<div id="root"></div>

<script type="module" src="/src/main.jsx"></script>

---

src/main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM
.createRoot(
 document.getElementById("root")
)
.render(
 <App />
);

---

src/App.jsx

export default function App(){

 return (
   <h1>
     My React App
   </h1>
 )

}

---

Step 7: Run Project

npm run dev

Now you have a manually configured React application.

---

Which Method Should You Choose?

Use Vite When:

Choose Vite for:

• Standard React applications
• Frontend projects
• Admin dashboards
• Internal business applications
• Learning React

Recommended stack:

React + Vite + TypeScript

---

Use Next.js When:

Choose Next.js for:

• Business websites
• SaaS applications
• Content platforms
• SEO-sensitive applications
• Full-stack React projects

Recommended stack:

Next.js + TypeScript + Tailwind CSS

---

Use CRA When:

Use CRA mainly for:

• Existing legacy projects
• Basic React learning

Not recommended for new production projects.

---

Use Manual Setup When:

Manual configuration is useful for:

• Understanding React internals
• Learning build tools
• Custom architecture requirements

---

Common Next Steps After Creating a React Project

After project creation, most applications need additional packages.

Routing

Install React Router:

npm install react-router-dom

---

State Management

Popular choices:

Redux:

npm install @reduxjs/toolkit react-redux

Zustand:

npm install zustand

---

HTTP Requests

Install Axios:

npm install axios

---

UI Libraries

Examples:

Material UI:

npm install @mui/material @emotion/react @emotion/styled

Ant Design:

npm install antd

---

Final Thoughts

React project creation has changed significantly over the years.

Today, the most common choices are:

| Scenario | Recommended Approach | | ------------------------- | -------------------- | | General React application | Vite | | Enterprise website | Next.js | | SaaS product | Next.js | | Learning React basics | Vite | | Legacy maintenance | Create React App | | Learning internals | Manual setup |

For modern React development, the recommended direction is:

React + TypeScript + Vite

or:

Next.js + TypeScript for production-grade applications.

Understanding different project creation methods helps developers choose the right foundation before writing the first line of code.