React Playbook

Styles, Conventions, Rules, Tips, and Tools!

Table of contents

• Component Architecture
  • Intro - The "Component" Problem
  • A Single Component
  • Multiple Components
  • Component Dependencies
  • Example App Structure
  • Future Tooling
  • Appendix
• Deep Dives
  • All about shouldComponentUpdate() - [post]
  • All about cloneElement() - [post]
  • All about refs - [post]
  • What is a HOC? - [post]
  • You Can Spread Props In JSX, But Should You? - [post]
• Patterns and Conventions
  • <IMMUTABLE /> - [post]
  • <Injector_ /> - [post]
  • <_Null_ /> - [post]
  • Spacing Components - [post]
  • The Case for <Row> (and <Col>) - [post]
• Best Practices
  • React
  • Reusable Components
  • Redux - [post]
• Notes (aka Shallow Dives)
  • Flow-Type
  • How React Works
  • Immutable
  • License
  • MobX
  • License
  • Performance
  • Preact
  • React Native
  • Security
  • Terms
• Style
  • Coding Style
  • Decisions
• Useful Libs
  • MobX
  • React
• Trivia
  • React

Why?

I believe the Rails part of Ruby on Rails was what made it so popular and developer-friendly.

Conventions, patterns, rules, styles, etc reduce the mental load while you are developing. Instead of spending your decision-making energy on how best to perform a routine task, you can essentially go into auto-pilot mode, saving that energy for solving more interesting problems.

React Playbook is a collection of documents that attempts to give React its rails.

Like this playbook? Maybe you'll like the other ones, too!

• Web Playbook
• Dev Playbook

Feel free to follow @kylpo on Twitter and Medium