#React
85 posts
Modern React + Next.js #5 Loading with Suspense and use()
Streaming that shows parts as they become ready, Suspense boundaries, loading.js, and the newly stabilized use() hook.
Modern React + Next.js #4 Data Fetching and Caching
Fetching data directly in Server Components with async/await, plus how Next.js caches and revalidates.
Modern React + Next.js #3 Server Components vs Client Components
How the two component types differ, how the 'use client' directive draws the boundary, and how to mix them effectively.
Modern React + Next.js #2 Getting Started with Next.js and the App Router
Create a Next.js project and get hands-on with the App Router — file-based routing, the layout system, and nested layouts.
Modern React + Next.js #1: Why Next.js and Server Components
The limits of client-side React, the problems Server Components solve, and the differences between CSR, SSR, and RSC.
Build a Todo App with React #5: Persistence and Wrap-up
Persist data with localStorage so it survives a refresh, then wrap up with a series retrospective and pointers to next steps.
Build a Todo App with React #4: Editing
Double-click an item to enter inline edit mode, save with Enter / cancel with Escape, and meet useRef for the first time.
Build a Todo App with React #3: Filtering
Add All / Active / Completed filters and a bulk operation that deletes all completed items.
Build a Todo App with React #2: Completion Toggle and Stats
Add a checkbox to each item to toggle completion, distinguish completed items visually, and show a summary of remaining/total counts.
Building a Todo App with React #1 Getting Started, Add and Delete
Build a real Todo app using the React you learned in the basics course. The first post covers requirements, component design, and add/delete functionality.
React Basics #15: Routing overview (React Router)
Cover SPA routing, React Router basics, dynamic routes, navigation, and nested routes — all in one article.
React Basics #14: Performance optimization (memo / useMemo / useCallback)
Cover performance optimization with React.memo, useMemo, and useCallback, and clarify when to use these tools and when to avoid them.