React.js Design Patterns for Professional Developers

Understand layout components that organize and act as containers for sections, controlling the position of child elements, with patterns for splitting content into reusable components.

Explore the split screen pattern by building a reusable layout with left and right components, props for left width and right width, and Tailwind styling for a responsive side-by-side interface.

Explore the render list pattern by building a reusable list component that maps over data arrays of games and movies, using props data, resource name, and data to render.

Create a modal with the layout component in a React app, wiring games data from data.ts to a game info component, and control visibility with useState.

Learn the container component pattern to load and manage data, use useEffect for fetching, and pass data to presentational components via props for a modular, reusable user interface.

Build a container component with a single to do loader that fetches todos from a json placeholder API using axios, then renders a child to do list.

Refactor the to-do loader to fetch data by a specific id using dynamic template literals, render the id and title, and handle loading state with clear UI feedback.

Refactor 2 focuses on building a reusable resource loader in React to fetch and render data from todos and comments, using props, state, useEffect, and axios.

Perform the refactor by creating a data source component, fetching todo data (and comments) with a get server data function using axios from a JSON placeholder, and rendering the data.

Explore the higher order component pattern in React.js, which reuses component logic by wrapping a component and returning an enhanced version. See how props are added without mutating the original.

See a print props higher order component in action that takes a component, returns a wrapped component, and logs props to the console, using a to-do list example.

Build a higher order component in React using TypeScript to display a loading state before rendering the wrapped component, illustrating an actionable hoc pattern with useState and useEffect.

Use a higher order component to fetch a to do by id and render its id and title.

Explore factory design pattern for creating components without specifying types. Use a factory function with if-else or switch to render primary, secondary, or danger buttons in React.

Explore the factory design pattern in React by building a button factory that renders primary, secondary, and danger buttons based on type and label props.

Explore factory design pattern practice in React by building a card factory that renders image, profile, and text cards through a switch-based component factory.

Discover the compound component design pattern that splits a card into title, content, and footer subcomponents to enable flexible, reusable UI with shared internal control.

Explore the compound component pattern in React by building a reusable card with dedicated subcomponents for title, content, and footer, then compose them via dot notation for flexible layouts.

Explore the slot design pattern in React by using default, name, compound, and context slots with props and children to create flexible, reusable components.

Explore the render props design pattern to share code by passing a render function as a prop, letting parent control child rendering with examples of counters and a mouse tracker.