🚀 Getting Started with React

Setting up React is easy! You can start building React applications in minutes using Create React App or try React directly in your browser with online editors.


# Create a new React app
npx create-react-app my-app
cd my-app
npm start

Setup Methods

⚡

Create React App

Official tool for React projects

Recommended Easy Setup

🌐

Online Editors

Practice without installation

CodeSandbox CodePen

📦

Vite

Fast modern build tool

Lightning Fast Modern

🔧

Manual Setup

Custom configuration

Advanced Flexible

🔹 Prerequisites

Before installing React, make sure you have these tools installed on your computer:

Required Software:

Node.js: Version 14.0 or higher (includes npm)
Code Editor: VS Code, Sublime Text, or any editor you prefer
Web Browser: Chrome, Firefox, or Edge with developer tools
Terminal/Command Prompt: To run commands

# Check if Node.js is installed
node --version

# Check if npm is installed
npm --version

🔹 Method 1: Create React App

The easiest way to start a React project. Create React App sets up everything you need automatically.

# Create a new React application
npx create-react-app my-first-app

# Navigate to the project folder
cd my-first-app

# Start the development server
npm start

What happens next?

Create React App installs all necessary dependencies
Sets up a development environment with hot reloading
Opens your app in the browser at http://localhost:3000
You can start editing files and see changes instantly!

🔹 Method 2: Online Editors

Try React instantly without installing anything. Perfect for learning and quick experiments.

🔸 CodeSandbox (Recommended)

Visit codesandbox.io
Click "Create Sandbox"
Choose "React" template
Start coding immediately!

// Try this in CodeSandbox
import React from 'react';

function App() {
  return (
    <div>
      <h1>My First React App</h1>
      <p>Running in the browser!</p>
    </div>
  );
}

export default App;

Output:

My First React App

Running in the browser!

🔹 Method 3: Vite (Fast Alternative)

Vite is a modern, super-fast build tool that's becoming very popular for React projects.

# Create a new React app with Vite
npm create vite@latest my-react-app -- --template react

# Navigate to the project
cd my-react-app

# Install dependencies
npm install

# Start the development server
npm run dev

Why Vite?

Lightning Fast: Instant server start and hot module replacement
Modern: Uses native ES modules
Optimized: Better build performance

🔹 Project Structure

After creating a React app, you'll see this folder structure:

my-app/
├── node_modules/      # Dependencies
├── public/            # Static files
│   └── index.html     # Main HTML file
├── src/               # Source code
│   ├── App.js         # Main component
│   ├── App.css        # Styles
│   └── index.js       # Entry point
├── package.json       # Project info
└── README.md          # Documentation

Important Files:

src/index.js: Entry point that renders your app
src/App.js: Main component where you build your UI
public/index.html: HTML template
package.json: Lists dependencies and scripts

🔹 Development Commands

Useful commands for working with your React project:

# Start development server
npm start

# Build for production
npm run build

# Run tests
npm test

# Remove build folder
npm run clean

React Get Started