#React
85 posts
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.
React Basics #7: Conditional Rendering
A roundup of conditional rendering patterns for showing, hiding, or swapping parts of the screen based on state.
React Basics #6: Event Handling
Look at how React handles events: synthetic events, handler patterns, and how to pull information out of the event object.
React Basics #5: State and useState
Learn how a component handles changing data — the concept of state and the useState hook.
React Basics #4: Components and Props
Learn how to make components — the core unit of React — to break the screen into small pieces, and how to pass data using props.
React Basics #3: What Is JSX?
We look at the basic syntax and rules of JSX, the special syntax used when writing React components.
React Basics #2: Setting Up the Development Environment (Node.js + Vite)
To start writing real code, we install Node.js, create our first React project with Vite, and launch the dev server.