Overview

Want to learn React through code? This by-example tutorial provides 75 heavily annotated examples covering 95% of React + TypeScript. Master React idioms, patterns, and best practices through working code rather than lengthy explanations.

What Is By-Example Learning?

By-example learning is a code-first approach where you learn concepts through annotated, working examples rather than narrative explanations. Each example shows:

1. What the code does - Brief explanation of the React concept
2. How it works - A focused, heavily commented code example
3. Key Takeaway - A pattern summary highlighting the key takeaway
4. Why It Matters - Production context, when to use, deeper significance

This approach works best when you already understand programming fundamentals and basic web development concepts. You learn React's component model, hooks system, and TypeScript integration by studying real code rather than theoretical descriptions.

What Is React?

React is a JavaScript library for building user interfaces that prioritizes component composition and declarative rendering. Key distinctions:

• Not a framework: React focuses on the view layer; routing, state management, and other concerns require additional libraries
• Component-based: UI built from reusable, composable components with clear boundaries
• Declarative: Describe what UI should look like for any state; React handles DOM updates efficiently
• TypeScript integration: Strong typing provides better developer experience and catches errors early
• Modern patterns: Hooks, Context API, Suspense enable powerful composition without class components

Learning Path

%% Color Palette: Blue #0173B2, Orange #DE8F05, Teal #029E73, Purple #CC78BC, Brown #CA9161
graph TD
  A["Beginner<br/>Core React Concepts<br/>Examples 1-25"] --> B["Intermediate<br/>Production Patterns<br/>Examples 26-50"]
  B --> C["Advanced<br/>Performance & Scale<br/>Examples 51-90"]
  D["0%<br/>No React Knowledge"] -.-> A
  C -.-> E["95%<br/>Framework Mastery"]
 
  style A fill:#0173B2,stroke:#000000,stroke-width:2px,color:#fff
  style B fill:#DE8F05,stroke:#000000,stroke-width:2px,color:#fff
  style C fill:#029E73,stroke:#000000,stroke-width:2px,color:#fff
  style D fill:#CC78BC,stroke:#000000,stroke-width:2px,color:#fff
  style E fill:#029E73,stroke:#000000,stroke-width:2px,color:#fff

Coverage Philosophy: 95% Through 75 Examples

The 95% coverage means you'll understand React deeply enough to build production applications with confidence. It doesn't mean you'll know every edge case or advanced optimization—those come with experience.

The 75 examples are organized progressively:

• Beginner (Examples 1-25): Foundation concepts (JSX, components, props, state, basic hooks, event handling, conditional rendering)
• Intermediate (Examples 26-50): Production patterns (custom hooks, context, forms, data fetching, routing, error boundaries, performance basics)
• Advanced (Examples 51-75): Scale and optimization (advanced patterns, performance optimization, testing strategies, accessibility, deployment patterns)

Together, these examples cover 95% of what you'll use in production React applications.

Annotation Density: 1-2.25 Comments Per Code Line

CRITICAL: All examples maintain 1-2.25 comment lines per code line PER EXAMPLE to ensure deep understanding.

What this means:

• Simple lines get 1 annotation explaining purpose or result
• Complex lines get 2+ annotations explaining behavior, state changes, and side effects
• Use // => notation to show expected values, outputs, or state changes

Example:

const [count, setCount] = useState(0);     // => count is 0 initially (type: number)
                                           // => setCount updates count and triggers re-render
 
const handleClick = () => {                // => Event handler for button clicks
  setCount(count + 1);                     // => Increments count by 1
                                           // => Component re-renders with new count
};
 
return <button onClick={handleClick}>     {/* => Button displays current count */}
  Count: {count}                          {/* => Shows "Count: 0" initially */}
</button>;                                 {/* => Updates to "Count: 1" after click */}

This density ensures each example is self-contained and fully comprehensible without external documentation.

Structure of Each Example

All examples follow a consistent five-part format:

### Example N: Descriptive Title

2-3 sentence explanation of the concept.

```typescript
// Heavily annotated code example
// showing the React pattern in action

Key Takeaway: 1-2 sentence summary.

Why It Matters: 50-100 words explaining significance in production applications.

**Code annotations**:

- `// =>` shows expected output, state changes, or results
- Inline comments explain what each line does
- Variable names are self-documenting
- Type annotations make data flow explicit

## What's Covered

### Core React Concepts

- **JSX & Elements**: JSX syntax, element creation, rendering, fragments
- **Components**: Function components, composition patterns, component lifecycle
- **Props**: Prop passing, children, prop drilling, type safety with TypeScript
- **State**: useState hook, state updates, state lifting, derived state

### Hooks System

- **Basic Hooks**: useState, useEffect, useContext
- **Advanced Hooks**: useReducer, useCallback, useMemo, useRef
- **Custom Hooks**: Creating reusable hooks, hooks composition, testing hooks
- **Hook Rules**: Rules of hooks, dependency arrays, stale closures

### Event Handling & Forms

- **Event System**: Event handling, synthetic events, event delegation
- **Forms**: Controlled components, form validation, form libraries (React Hook Form)
- **Input Patterns**: Text inputs, checkboxes, radio buttons, file uploads

### Component Patterns

- **Composition**: Component composition, render props, higher-order components
- **State Management**: Context API, reducers, state machines
- **Error Handling**: Error boundaries, error recovery patterns
- **Code Splitting**: Lazy loading, Suspense, dynamic imports

### TypeScript Integration

- **Type Safety**: Component props typing, event typing, children typing
- **Generic Components**: Generic props, type inference, constraint types
- **Type Guards**: Discriminated unions, type narrowing, type predicates
- **Utility Types**: Partial, Pick, Omit, Record for React patterns

### Performance & Optimization

- **React.memo**: Component memoization, comparison functions
- **useCallback & useMemo**: Hook memoization, dependency optimization
- **Virtualization**: List virtualization, windowing techniques
- **Profiling**: React DevTools profiler, performance measurement

### Production Patterns

- **Data Fetching**: Fetch patterns, loading states, error handling, caching
- **Routing**: React Router patterns, nested routes, protected routes
- **Authentication**: Auth patterns, token management, protected components
- **Testing**: Jest, React Testing Library, integration tests
- **Accessibility**: ARIA attributes, keyboard navigation, screen reader support

## What's NOT Covered

We exclude topics that belong in specialized tutorials:

- **Advanced TypeScript**: Deep TypeScript features unrelated to React
- **State Management Libraries**: Redux, MobX, Zustand (covered in separate tutorials)
- **Testing Deep Dives**: Advanced testing strategies (separate testing tutorial)
- **Build Tools**: Webpack, Vite, bundler configuration details
- **Server-Side Rendering**: Next.js, Remix (covered in framework-specific tutorials)
- **React Native**: Mobile development (separate tutorial)

For these topics, see dedicated tutorials and framework documentation.

## Prerequisites

### Required

- **JavaScript fundamentals**: ES6+ syntax, arrow functions, destructuring, spread/rest operators
- **TypeScript basics**: Basic types, interfaces, generics, type inference
- **HTML/CSS**: Basic web fundamentals, DOM concepts
- **Programming experience**: You've built applications before

### Recommended

- **Web APIs**: Fetch API, local storage, event handling
- **Asynchronous JavaScript**: Promises, async/await patterns
- **Modern tooling**: npm/yarn, command-line basics

### Not Required

- **React experience**: This guide assumes you're new to React
- **Framework experience**: Not necessary, but helpful
- **Advanced TypeScript**: We teach TypeScript patterns as needed

## Getting Started

Before starting the examples, ensure you have basic environment setup:

1. **Review Initial Setup**: [Initial Setup](/en/learn/software-engineering/platforms/web/tools/fe-react/initial-setup) - Install Node.js, npm, and create React + TypeScript project
2. **Try Quick Start**: [Quick Start](/en/learn/software-engineering/platforms/web/tools/fe-react/quick-start) - Build a simple todo app to understand React basics

These tutorials provide hands-on foundation before diving into by-example learning.

## How to Use This Guide

### 1. Choose Your Starting Point

- **New to React?** Start with Beginner (Example 1)
- **Framework experience** (Angular, Vue)? Start with Intermediate (Example 21)
- **Building specific feature?** Search for relevant example topic

### 2. Read the Example

Each example has five parts:

- **Explanation** (2-3 sentences): What React concept, why it exists, when to use it
- **Code** (heavily commented): Working TypeScript code showing the pattern
- **Key Takeaway** (1-2 sentences): Distilled essence of the pattern
- **Why It Matters** (50-100 words): Production context and deeper significance

### 3. Run the Code

Create a test project and run each example:

```bash
npm create vite@latest react-examples -- --template react-ts
cd react-examples
npm install
# Paste example code into src/App.tsx
npm run dev

4. Modify and Experiment

Change props, add state, break things on purpose. Experimentation builds intuition faster than reading.

5. Reference as Needed

Use this guide as a reference when building features. Search for relevant examples and adapt patterns to your code.

Ready to Start?

Choose your learning path:

• Beginner - Start here if new to React. Build foundation understanding through 25 core examples.
• Intermediate - Jump here if you know React basics. Master production patterns through 25 examples.
• Advanced - Expert mastery through 25 advanced examples covering performance, scale, and optimization.

Or jump to specific topics by searching for relevant example keywords (hooks, context, forms, testing, performance, etc.).

Examples by Level

Beginner (Examples 1–25)

• Example 1: First React Component with TypeScript
• Example 2: JSX and TSX Syntax
• Example 3: Component Props with Interfaces
• Example 4: Children Props Pattern
• Example 5: Default Props with TypeScript
• Example 6: useState Hook with TypeScript
• Example 7: Multiple State Variables
• Example 8: State with Objects
• Example 9: State with Arrays
• Example 10: Functional State Updates
• Example 11: useEffect Basics
• Example 12: useEffect with Dependencies
• Example 13: useEffect Cleanup
• Example 14: Fetching Data with useEffect
• Example 15: useEffect with Async/Await
• Example 16: Click Event Handlers
• Example 17: Form Input Events
• Example 18: Controlled Components
• Example 19: Form Submission
• Example 20: Form Validation Basics
• Example 21: Conditional Rendering
• Example 22: Lists and Keys
• Example 23: Lifting State Up
• Example 24: Component Composition
• Example 25: Simple Zakat Calculator (Financial Domain Example)

Intermediate (Examples 1–25)

• Example 1: useReducer for Complex State
• Example 2: useCallback for Function Memoization
• Example 3: useMemo for Value Memoization
• Example 4: useRef for DOM Access and Mutable Values
• Example 5: useImperativeHandle for Custom Refs
• Example 6: Creating Custom Hooks
• Example 7: useLocalStorage Hook (Detailed Implementation)
• Example 8: useDebounce Hook
• Example 9: useFetch Hook
• Example 10: useForm Hook for Form Management
• Example 11: Creating and Using Context
• Example 12: Context with TypeScript
• Example 13: Multiple Contexts Pattern
• Example 14: Context with useReducer
• Example 15: Authentication Context Example
• Example 16: React Query Basics
• Example 17: React Query Mutations
• Example 18: Optimistic Updates with React Query
• Example 19: Infinite Scrolling with React Query
• Example 20: Error Handling with React Query
• Example 21: React Router Setup
• Example 22: Dynamic Routes with Params
• Example 23: Protected Routes Pattern
• Example 24: Error Boundaries
• Example 25: Murabaha Contract Dashboard (Complete Financial Application)

Advanced (Examples 1–25)

• Example 1: Generic Components with TypeScript
• Example 2: Utility Types in React (Partial, Pick, Omit, Record)
• Example 3: Discriminated Unions for State
• Example 4: Advanced Type Guards
• Example 5: Template Literal Types for Props
• Example 6: Zustand Store Setup
• Example 7: Zustand with TypeScript and Slices
• Example 8: Zustand Middleware (Persist, Devtools)
• Example 9: Server State vs Client State Separation
• Example 10: State Machine Pattern with XState
• Example 11: Code Splitting with React.lazy and Suspense
• Example 12: Route-Based Code Splitting
• Example 13: React.memo and Memoization Strategies
• Example 14: Virtual Scrolling for Large Lists
• Example 15: Web Workers for Heavy Computations
• Example 16: Suspense for Data Fetching
• Example 17: startTransition for Non-Urgent Updates
• Example 18: useDeferredValue for Expensive Renders
• Example 19: Error Boundaries with Retry Logic
• Example 20: Render-as-You-Fetch Pattern
• Example 21: Vitest with React Testing Library
• Example 22: Testing Custom Hooks
• Example 23: XSS Prevention and Input Sanitization
• Example 24: CSRF Protection Patterns
• Example 25: Complete Zakat Management System (Financial Domain Example)