React Tutorial

Official Documentation

This tutorial is based on the official React documentation. For the most up-to-date information, visit: https://react.dev/

Welcome to the React tutorial! Learn how to build modern, interactive user interfaces with the world's most popular JavaScript library. This tutorial covers both JavaScript and TypeScript approaches.

What is React?

React is a JavaScript library for building user interfaces, created by Facebook (Meta). It lets you create reusable UI components and efficiently update the DOM when data changes.

┌─────────────────────────────────────────────────────────────┐
│                    How React Works                          │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   Your Code (JSX/TSX)        Virtual DOM         Real DOM   │
│   ┌─────────────┐          ┌───────────┐       ┌─────────┐ │
│   │ <Button />  │  ─────►  │  React    │ ───►  │ Browser │ │
│   │ <Card />    │  render  │  compares │ patch │   DOM   │ │
│   │ <List />    │          │  changes  │       │         │ │
│   └─────────────┘          └───────────┘       └─────────┘ │
│                                                             │
│   React only updates what's necessary! ⚡                   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

JavaScript vs TypeScript

This tutorial provides examples in both JavaScript and TypeScript:

Feature	JavaScript	TypeScript
File Extension	.jsx	.tsx
Type Safety	Runtime errors	Compile-time errors
Learning Curve	Easier	Slightly steeper
IDE Support	Good	Excellent
Industry Trend	Common	Increasingly preferred

Recommendation

If you're new to React, start with JavaScript. If you know TypeScript or want type safety, use TypeScript.

Why Learn React?

Feature	Description
Component-Based	Build encapsulated components that manage their own state
Declarative	Describe what you want, React figures out how
Virtual DOM	Efficient updates for better performance
Huge Ecosystem	Thousands of libraries and tools
Job Market	Most in-demand frontend skill
Learn Once, Write Anywhere	React Native for mobile apps

What You'll Learn

Beginner

• Getting Started - Setup with Vite (JS & TS)
• JSX/TSX - HTML-like syntax in JavaScript/TypeScript
• Components & Props - Building blocks of React

Intermediate

• State - Managing component data
• Events - Handling user interactions
• Hooks - useState, useEffect, and more

Advanced

• Forms - Controlled components, validation
• Routing - Multi-page apps with React Router
• Data Fetching - APIs, loading states, error handling
• Advanced Patterns - Context, performance, best practices

Prerequisites

Before starting this tutorial, you should know:

• ✅ HTML & CSS basics
• ✅ JavaScript fundamentals (ES6+)
• ✅ Basic understanding of the DOM
• ⭐ TypeScript basics (optional, for TS examples)

New to JavaScript?

Check out our JavaScript Tutorial first!

Quick Preview

JavaScript

// A simple React component
function Welcome({ name }) {
  return (
    <div className="welcome">
      <h1>Hello, {name}!</h1>
      <p>Welcome to React</p>
    </div>
  );
}

// Using the component
function App() {
  return (
    <div>
      <Welcome name="Developer" />
      <Welcome name="Student" />
    </div>
  );
}

TypeScript

// Define props interface
interface WelcomeProps {
  name: string;
}

// A typed React component
function Welcome({ name }: WelcomeProps) {
  return (
    <div className="welcome">
      <h1>Hello, {name}!</h1>
      <p>Welcome to React</p>
    </div>
  );
}

// Using the component (type-checked!)
function App() {
  return (
    <div>
      <Welcome name="Developer" />
      <Welcome name="Student" />
    </div>
  );
}

Setting Up Your Environment

JavaScript Setup

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

cd my-react-app
npm install
npm run dev

TypeScript Setup

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

cd my-react-app
npm install
npm run dev

Your app will be running at http://localhost:5173

Project Structure

JavaScript

my-react-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── App.css
│   ├── App.jsx          ← Main component
│   ├── index.css
│   └── main.jsx         ← Entry point
├── index.html
├── package.json
└── vite.config.js

TypeScript

my-react-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── App.css
│   ├── App.tsx          ← Main component (.tsx)
│   ├── index.css
│   ├── main.tsx         ← Entry point (.tsx)
│   └── vite-env.d.ts    ← Type declarations
├── index.html
├── package.json
├── tsconfig.json        ← TypeScript config
└── vite.config.ts

Video Tutorials

Recommended Video Resources

Learn React through these excellent video tutorials from the community.

Free Courses

Course	Creator	Description
React Course for Beginners	freeCodeCamp	12-hour comprehensive beginner course
React Tutorial for Beginners	Programming with Mosh	1-hour crash course
React JS Full Course	Dave Gray	9-hour complete course
React in 100 Seconds	Fireship	Quick 100-second explanation

Official Resources

Resource	Description
React.dev Learn	Official React documentation with interactive tutorials
React.dev Tutorial	Build Tic-Tac-Toe step by step

Topic-Specific Videos

Topic	Video	Duration
React Hooks	React Hooks Tutorial	~30 min
React Router	React Router v6 Tutorial	~30 min
State Management	Redux Toolkit Tutorial	~2 hours
TypeScript + React	React TypeScript Tutorial	~1 hour

Let's Begin!

Ready to start building with React? Head over to the Getting Started guide!

---

Get Started →