Quick Start: Create Your First React App

How to Set Up and Start a React Project Starting a React project involves a few key steps to get everything up and running. Here’s a step-by-step guide to help you set up React correctly. Prerequisites Before you begin, make sure you have Node.js installed on your computer (this includes npm, the Node Package Manager, which is required to install React and other dependencies). Setting Up a React Project: Method 1: Using create-react-app (Traditional Approach) Run the following command in your terminal: npx create-react-app my-app (my-app is the name of your project folder). Navigate into your project folder: cd my-app Run the following to start the development server: npm start This will open your app in the browser (usually at http://localhost:3000). Method 2: Using Vite (Faster & Modern Alternative): Run the Vite setup command: npm create vite@latest my-app -- --template react (my-app is your project folder name). Navigate into the project folder: cd my-app Install dependencies and start the app: npm install npm run dev Your app will run at a local URL (usually http://localhost:5173). Project Structure Overview: After setup, your React project will have key folders and files: src/ – Contains your main React code (e.g., App.jsx or App.js). public/ – Stores static assets like HTML and images. node_modules/ – Contains installed dependencies. Adding Custom Components: Create a components folder inside src/ for reusable components. Import components into App.js as needed. Opening an Existing React Project: If you download a React project (e.g., from a ZIP file or GitHub): Install dependencies: npm install Start the app: npm run dev # (for Vite) npm start # (for create-react-app) BUT! In plain React (JavaScript), you typically don't get any compiler-level checks. JavaScript is dynamically typed, so the browser only throws errors when it runs your code. That’s why you don’t see issues like: Typos in variable names Missing props Wrong data types Until you actually run the app with npm start or npm run dev , React does not pre-check files for errors until you run the dev server. Tools like ESLint or TypeScript help catch issues before runtime. ESLint: Lints (analyzes) your code for potential bugs, bad patterns, or inconsistent formatting. Step 1: Install ESLint & Plugins: npm install -D eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y If you're using TypeScript, also install: npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin Step 2: Create a .eslintrc config file: You can do this manually or run: npx eslint --init If you want to skip the prompts, here’s a recommended .eslintrc.json setup for React + TypeScript: { "parser": "@typescript-eslint/parser", "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:jsx-a11y/recommended", "plugin:@typescript-eslint/recommended" ], "plugins": ["react", "react-hooks", "@typescript-eslint", "jsx-a11y"], "parserOptions": { "ecmaVersion": 2020, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "settings": { "react": { "version": "detect" } }, "rules": { // Customize your rules here } } Step 3: Add a script in package.json: In your package.json, add: "scripts": { "lint": "eslint . --ext .js,.jsx,.ts,.tsx" } Now you can run: npm run lint To check your whole project for issues. Step 4: Optional — Auto-Fix on Save: If you're using VS Code, install the ESLint extension, then in your VS Code settings: "editor.codeActionsOnSave": { "source.fixAll.eslint": true } Now your code will auto-fix lint errors when you save! ps: Add a .eslintignore file to avoid linting things like dist/ or node_modules. 2.TypeScript: Adds type safety: Catches errors before you run your app. If you’re setting up a new React project, you should create it with TypeScript from the start (which will automatically set things up for you): Option 1: Set up a TypeScript React project from scratch (using Vite): Create your project with TypeScript: Run this command to create a new React + TypeScript app using Vite: npm create vite@latest my-app -- --template react-ts my-app is the name of your project folder. react-ts ensures you get the TypeScript template. Install dependencies: Move into your project folder and install everything: cd my-app npm install Your files in src/ will use .tsx (for React components). Option 2: Adding TypeScript to an Existing React Project: If you already have a React project (say created with create-react-app or vite without TypeScript) and want to add TypeScript later, follow these steps: Install TypeScript and Type Definitions: npm install --save-dev typescript @type

Apr 5, 2025 - 19:46

Quick Start: Create Your First React App

How to Set Up and Start a React Project

Starting a React project involves a few key steps to get everything up and running. Here’s a step-by-step guide to help you set up React correctly.

Prerequisites

Before you begin, make sure you have Node.js installed on your computer (this includes npm, the Node Package Manager, which is required to install React and other dependencies).

Setting Up a React Project:

Method 1: Using create-react-app (Traditional Approach)
Run the following command in your terminal:

npx create-react-app my-app

(my-app is the name of your project folder).

Navigate into your project folder:

cd my-app

Run the following to start the development server:

npm start

This will open your app in the browser (usually at http://localhost:3000).

Method 2: Using Vite (Faster & Modern Alternative):

Run the Vite setup command:

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

(my-app is your project folder name).

Navigate into the project folder:

cd my-app

Install dependencies and start the app:

npm install
npm run dev

Your app will run at a local URL (usually http://localhost:5173).

Project Structure Overview:

After setup, your React project will have key folders and files:

src/ – Contains your main React code (e.g., App.jsx or App.js).

public/ – Stores static assets like HTML and images.

node_modules/ – Contains installed dependencies.

Adding Custom Components:

Create a components folder inside src/ for reusable components.

Import components into App.js as needed.

Opening an Existing React Project:

If you download a React project (e.g., from a ZIP file or GitHub):
Install dependencies:

npm install

Start the app:

npm run dev  # (for Vite)  
npm start    # (for create-react-app)

BUT!

In plain React (JavaScript), you typically don't get any compiler-level checks. JavaScript is dynamically typed, so the browser only throws errors when it runs your code. That’s why you don’t see issues like:

Typos in variable names
Missing props
Wrong data types

Until you actually run the app with npm start or npm run dev ,
React does not pre-check files for errors until you run the dev server.

Tools like ESLint or TypeScript help catch issues before runtime.

ESLint: Lints (analyzes) your code for potential bugs, bad patterns, or inconsistent formatting.

Step 1: Install ESLint & Plugins:

npm install -D eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

If you're using TypeScript, also install:

npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

Step 2: Create a .eslintrc config file:
You can do this manually or run:

npx eslint --init

If you want to skip the prompts, here’s a recommended .eslintrc.json setup for React + TypeScript:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "plugins": ["react", "react-hooks", "@typescript-eslint", "jsx-a11y"],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    // Customize your rules here
  }
}

Step 3: Add a script in package.json:

In your package.json, add:

"scripts": {
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
}

Now you can run:

npm run lint

To check your whole project for issues.

Step 4: Optional — Auto-Fix on Save:

If you're using VS Code, install the ESLint extension, then in your VS Code settings:

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

Now your code will auto-fix lint errors when you save!

ps: Add a .eslintignore file to avoid linting things like dist/ or node_modules.

2.TypeScript:
Adds type safety: Catches errors before you run your app.
If you’re setting up a new React project, you should create it with TypeScript from the start (which will automatically set things up for you):

Option 1: Set up a TypeScript React project from scratch (using Vite):

Create your project with TypeScript: Run this command to create a new React + TypeScript app using Vite:

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

my-app is the name of your project folder.

react-ts ensures you get the TypeScript template.

Install dependencies: Move into your project folder and install everything:

cd my-app
npm install

Your files in src/ will use .tsx (for React components).

Option 2: Adding TypeScript to an Existing React Project:

If you already have a React project (say created with create-react-app or vite without TypeScript) and want to add TypeScript later, follow these steps:

Install TypeScript and Type Definitions:

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

Add a tsconfig.json file: You need this file to configure TypeScript. Create a tsconfig.json in your root directory:

npx tsc --init

If you don’t want to deal with the default config, you can create it manually or use this as a starting point for React projects:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src"
  ]
}

Rename Files: Change your .jsx files to .tsx (since they contain JSX).

Change .js files that don't have JSX to .ts.

TypeScript will start checking your code for type issues once you rename the files.

When Do You Use npm run build?

You use it when you’re ready to deploy your app to a server, hosting service, or share it publicly.

For example:
Deploy to Netlify, Vercel, or GitHub Pages.
Upload to your own web server.

So first finish building your app, Once everything looks good, build it:

npm run build

This creates a dist/ folder (or build/ in Create React App), which contains:

Your index.html

Minified JavaScript and CSS

All static assets (images, fonts, etc.)

Upload the dist/ folder (or its contents) to your web server, hosting service, or cloud storage — depending on how you're deploying.