react-in-patterns
A free book that talks about design patterns/techniques used while developing with React.
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.
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.
Where it fits
- Learn how to structure a React app using component composition, higher-order components, and render props with working examples for each.
- Understand one-directional data flow, Flux architecture, and Redux with runnable code to see each concept in action.
- Study dependency injection and styling approaches in React to improve organization in an existing codebase.