Step-by-Step Guide to Setting Up a React Project

If you’re learning modern web development in 2025, chances are you’ll come across React.js — one of the most popular JavaScript libraries for building user interfaces.

From small blogs in the UK to large-scale startups in Silicon Valley, React has become the go-to technology for building fast, scalable, and interactive web applications.

In this beginner-friendly guide, we’ll walk you through a step-by-step process to set up your first React project, covering everything from installation to running your first app.

What is React and Why Should You Learn It?

React.js is an open-source JavaScript library developed by Facebook (now Meta). It’s used to build reusable UI components and manage application states efficiently.

Why Learn React in 2025?

• Demand in the USA/UK job market → Companies like Meta, Netflix, and BBC use React.
• Beginner-friendly ecosystem → Easy to get started with tools like Create React App and Vite.
• Huge community → Tons of tutorials, support groups, and free resources.
• Scalable → Suitable for personal portfolios and enterprise-level apps.

Already know HTML? Check out our Beginner’s Guide to HTML Basics.
Read the official React Documentation.

Prerequisites Before You Start

Before setting up your React project, make sure you have:

1. Basic Knowledge of JavaScript, HTML, and CSS → If not, start with our guide on JavaScript ES6 Features Explained with Examples.
2. Node.js Installed → React requires Node.js and npm (Node Package Manager). Download Node.js here.
3. A Code Editor → Popular free editors include Visual Studio Code or Sublime Text.

Step 1: Install Node.js and npm

Node.js allows you to run JavaScript outside of the browser. npm helps install third-party libraries like React.
Visit the official Node.js website and download the LTS (Long-Term Support) version.

To check installation, run:
bash

node -v
npm -v
This confirms both Node.js and npm are installed correctly.

Step 2: Choose a React Setup Method

In 2025, you have multiple ways to set up a React project:

• Create React App (CRA) – Beginner-friendly, one-command setup.
• Vite – Faster alternative, lightweight and modern.
• Next.js – Recommended for production apps, with built-in SSR (server-side rendering).

For beginners, we’ll use Create React App.

Step 3: Create a New React Project

Open your terminal (Command Prompt or VS Code terminal) and run:

bash

npx create-react-app my-first-app

• npx → comes with npm 5.2+ and allows you to run packages without installing them globally.
• my-first-app → is your project name (you can change it).

After installation, go into your project folder:
bash

cd my-first-app

Step 4: Start Your Development Server

Run the following command:
bash

npm start

This will open your app in the browser at:
http://localhost:3000
You’ll see the default React spinning logo — congratulations, your React app is live!

Step 5: Understand the File Structure

A newly created React project looks like this:
pgsql

my-first-app/
│
├── node_modules/ (Dependencies)
├── public/ (Static files)
├── src/ (Your source code)
│ ├── App.js (Main component)
│ ├── index.js (Entry point)
│ ├── package.json (Project config + dependencies)

Key files you’ll use:

• App.js → Where your app logic lives.
• index.js → Connects React to the DOM.
• package.json → Tracks dependencies.

Step 6: Edit Your First React Component

Open App.js and replace the code with:

Save → Your browser updates automatically with your new text.

Step 7: Add Styling with CSS

Inside App.css, add:
css

h1 {
color: royalblue;
text-align: center;
}
p {
font-size: 18px;
text-align: center;
}

Now your app looks more polished.

Step 8: Install Useful Extensions and Tools

• React Developer Tools → Chrome extension for debugging React apps.
• Prettier → Auto-formatting in VS Code.
• Git → Version control for your projects.

Internal Link: Read our guide on Top 15 Git Commands Every Developer Should Know.

Step 9: Build and Deploy Your React Project

Once your project is ready, build it for deployment:

bash
npm run build

This creates an optimized version of your app in the build/ folder.

You can deploy to:

• • Netlify → Free hosting, great for beginners.
  • Vercel → Perfect for React & Next.js projects.
  • GitHub Pages → Free and easy for small projects.

External Guide: Learn How to Deploy React Apps on Netlify.

Best Practices for Beginners

• Use components for reusable code.
• Keep your files organized inside src/.
• Write clean, readable code with proper indentation.
• Learn React Hooks (useState, useEffect) early on.
• Practice by building small projects (e.g., a to-do list, weather app).

FAQs – Setting Up a React Project

Q1: Do I need to know JavaScript before React?
Yes. React is based on JavaScript, so knowing ES6 basics is essential.

Q2: Should I use Create React App or Vite in 2025?
Vite is faster, but Create React App is still great for beginners.

Q3: Can I deploy a React project for free?
Yes. Platforms like Netlify, Vercel, and GitHub Pages offer free hosting.

Q4: Is React still popular in 2025?
Absolutely. React continues to dominate in USA/UK startups and enterprises.

Q5: How long does it take to learn React basics?
On average, 2–4 weeks if you already know JavaScript.

Wrapping Up

Setting up a React project in 2025 is easier than ever thanks to tools like Create React App, Vite, and Next.js. Whether you’re in the USA aiming for a tech job or in the UK building your first portfolio, React gives you the skills to create modern, interactive web apps.

Here’s a quick recap:

• Install Node.js & npm
• Use Create React App to scaffold your project
• Start with npm start
• Edit components (App.js) and style with CSS
• Deploy with Netlify, Vercel, or GitHub Pages

Once you’ve set up your first React app, check out our guide on Why Responsive Design Matters in 2025.
Explore the official React Tutorial.