explaingit

krasimir/react-in-patterns

13,584JavaScriptAudience · developerComplexity · 1/5Setup · easy

TLDR

A free online book covering the recurring patterns experienced developers use to structure React applications, with plain-English explanations and working code examples for components, data flow, Redux, styling, and more.

Mindmap

mindmap
  root((react-in-patterns))
    Foundation
      Props and events
      Component composition
      Higher-order components
    Data Flow
      One-directional flow
      Flux architecture
      Redux pattern
    Miscellaneous
      Dependency injection
      Styling approaches
      Third-party integration
    Formats
      Web book
      PDF and ePub
      Code samples
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Learn how to structure a React app using component composition, higher-order components, and render props with working examples for each.

USE CASE 2

Understand one-directional data flow, Flux architecture, and Redux with runnable code to see each concept in action.

USE CASE 3

Study dependency injection and styling approaches in React to improve organization in an existing codebase.

Tech stack

JavaScriptReactRedux

Getting it running

Difficulty · easy Time to first run · 5min
No license information is provided in the explanation.

In plain English

React in Patterns is a free book about how experienced developers structure their React applications. It covers recurring approaches and techniques that come up repeatedly when building with React, written in plain terms with working code examples for each concept. The book is organized into three main areas. The foundation section covers the basics of how React components communicate with each other through props and events, how to compose components together in different ways (including higher-order components and render props), and the distinction between controlled and uncontrolled form inputs. It also covers the split between presentational components that only display data and container components that manage behavior. The data flow section explains how information moves through a React application. It walks through one-directional data flow as a core principle, then covers Flux as an architecture pattern, and then Redux as a specific implementation of that pattern. Each chapter includes a working example to illustrate the concept. The miscellaneous section covers a few additional topics: dependency injection (how to pass shared services or configuration through the component tree without threading props through every level), different approaches to styling components (plain CSS classes, inline styles, CSS modules, and styled-components), integrating third-party libraries that were not designed for React, and how to think about separation of concerns in a React codebase. The book is available in several formats including web, PDF, Mobi, and ePub. A Simplified Chinese translation exists as a separate GitHub repository. All the code samples used throughout the book are included in the repository alongside the text.

Copy-paste prompts

Prompt 1
Based on React in Patterns, show me a working higher-order component that adds authentication checking before rendering any wrapped React component.
Prompt 2
Using the container and presentational component pattern from React in Patterns, refactor this component so it separates display from data logic: [paste component].
Prompt 3
Implement a small Redux store in React following the one-directional data flow pattern described in React in Patterns, with actions, a reducer, and a connected component.
Prompt 4
Show me the render props pattern from React in Patterns and explain when to prefer it over a higher-order component for sharing behavior.
Open on GitHub → Explain another repo

← krasimir on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.