React
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.
React Basics #13: Custom Hooks
Learn how to write custom hooks — the elegant tool for sharing logic between components — with walkthroughs of commonly used examples.
React Basics #12: useContext
Learn the tool that solves prop drilling — the React Context API and the useContext hook.
React Basics #11: Lifting state up
Learn the core pattern for sharing data between two sibling components: lifting state up.
React Basics #10: useEffect
Learn how the useEffect hook works — the standard tool for handling side effects that interact with the outside world — and explore common patterns.
React Basics #9: Working with forms (controlled inputs)
Cover the canonical form pattern in React — controlled components — and how to handle inputs like textarea, select, checkbox, and radio.
React Basics #8: Lists and key
Render an array on screen, understand the meaning of the key prop, and avoid the index-as-key pitfall.