LetCodes

Learn React

React is a popular JavaScript library for building fast, component-driven user interfaces. This short series walks through what React is, why people use it, and how to start building with it.

Tutorial contents

Introduction to React
What Is React & Why Use It
React vs Angular vs Vue
How React Works (Virtual DOM)
Project Setup with Vite
Project Setup with Create React App
Understanding the Project Structure
React Developer Tools
JSX: Writing Markup in JavaScript
Embedding Expressions in JSX
JSX Attributes & className
JSX Rules & Gotchas
Fragments
Rendering Elements to the DOM
React StrictMode
Your First Component
Function Components
Class Components (Legacy)
Importing & Exporting Components
Component Composition
Thinking in React
Passing Props to Components
The children Prop
Default Prop Values
Destructuring Props
Props Are Read-Only
Validating Props with PropTypes
State: A Component's Memory
The useState Hook
State vs Props
Updating State Correctly
Updating Objects in State
Updating Arrays in State
State Updates & Batching
Handling Events
The Synthetic Event Object
Passing Event Handlers as Props
Conditional Rendering
Ternary & Logical && in JSX
Rendering Lists with map()
Keys: Identifying List Items
Common Key Mistakes
Forms in React
Controlled Components
Uncontrolled Components
Handling Multiple Inputs
Form Validation
React Hook Form Overview
Introduction to Hooks
Rules of Hooks
useEffect: Side Effects
useEffect Dependency Array
Cleanup Functions in useEffect
Effects vs Event Handlers
You Might Not Need an Effect
useContext Hook
useReducer Hook
useReducer vs useState
useRef Hook
Manipulating the DOM with Refs
Forwarding Refs
useImperativeHandle Hook
useMemo: Memoizing Values
useCallback: Memoizing Functions
useMemo vs useCallback
useLayoutEffect Hook
useId Hook
useTransition Hook
useDeferredValue Hook
useSyncExternalStore Hook
Building Custom Hooks
Custom Hook Patterns
Lifting State Up
The Context API
Context Best Practices
Context & Re-render Performance
State Colocation
Component Lifecycle
Render Props Pattern
Higher-Order Components (HOCs)
Compound Components Pattern
Controlled vs Uncontrolled Pattern
Error Boundaries
Portals
Lazy Loading Components
Suspense for Loading States
Code Splitting Strategies
React.lazy & Dynamic import()
React.memo
Reconciliation & the Diffing Algorithm
Understanding Re-renders
Profiling with the Profiler
Performance Optimization Techniques
List Virtualization
Avoiding Unnecessary Renders
State Management Overview
Redux Toolkit
Async Logic with Thunks
RTK Query
Zustand
Jotai Atoms
Recoil Overview
Choosing a State Library
Data Fetching Basics
Fetching with useEffect
TanStack Query (React Query)
SWR
Caching & Revalidation
React Router: Introduction
Routes, Links & Navigation
Dynamic & Nested Routes
Route Params & Search Params
Programmatic Navigation
Protected Routes
Styling Approaches Overview
CSS Modules
Styled Components & CSS-in-JS
Tailwind CSS with React
Inline Styles & Dynamic Styling
TypeScript with React: Setup
Typing Props & State
Typing Hooks
Typing Events & Refs
Generic Components
React Server Components Overview
React Frameworks (Next.js, Remix)
React 19 New Features
Accessibility (a11y) in React
Folder Structure Best Practices
React Best Practices
Common Mistakes & Anti-Patterns
Security Considerations
React Glossary
React Cheatsheet
Interview Questions