Setting Up a React Project: A Beginner's Guide

What is React?

React (or React.js) is a JavaScript library for building user interfaces, developed and maintained by Meta (Facebook). It’s component-based, fast, and widely used for single-page applications (SPAs).

Prerequisites Before You Begin

To set up a React project, make sure you have the following installed:

Node.js and npm (Node Package Manager)
- 📥 Download from: https://nodejs.org
- To verify :
  
  node -v
  npm -v
A code editor – VS Code is recommended: https://code.visualstudio.com/
Basic knowledge of JavaScript and HTML/CSS

Step-by-Step: Creating Your First React Project

We will use the official React scaffolding tool called Create React App (CRA).

Step 1: Install Create React App

Open your terminal (Command Prompt or PowerShell) and run:

npx comes with npm 5.2+ and higher – it downloads and runs the latest Create React App without installing it globally.

This command creates a folder named my-first-react-app with all boilerplate files.

Step 2: Navigate to the Project Folder

Step 3: Start the Development Server

This launches the React development server and opens http://localhost:3000 in your browser.

You’ll see a spinning React logo and a welcome page – Congratulations! You’ve created your first React app!

Folder Structure Overview

When you open the created React app, the folder structure looks like this:

my-first-react-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js        <-- Main component
│   ├── index.js      <-- Entry point
├── package.json      <-- Project dependencies & scripts

Key Folders and Files:

public/ Contains static assets.

index.html: The single HTML file that React renders into.

favicon.ico: The app’s icon.

src/

Contains the React application code.

App.js: Main React component.

index.js: Entry point for rendering the React application into the DOM.

node_modules/

Stores all dependencies installed via npm.

package.json

Lists the project dependencies and scripts.

Example: Edit the App Component

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React World!</h1>
      <p>This is your first React component.</p>
    </div>
  );
}

export default App;

Now save and your browser will update automatically (thanks to hot reloading).

Useful Commands

Command	Description
`npm start`	Starts the dev server
`npm run build`	Prepares production build
`npm test`	Runs unit tests
`npm run eject`	Exposes config (advanced use only)

Deploying Your React App (Optional)

To deploy a production version, run:

Then you can deploy the build/ folder using:

Netlify
Vercel
GitHub Pages

Common Issues and Fixes

Problem	Solution
`npx` not recognized	Reinstall Node.js or update npm
Port 3000 already in use	Use another port: `PORT=3001 npm start` (Unix)
Syntax error in JSX	Make sure to close all tags and use `className`