---
description: A compilation of React Patterns, techniques, tips and tricks.
---

# Table of Content

**Github repo for this book**: [https://github.com/christerjohansson/learns-react-now](https://github.com/christerjohansson/learns-react-now)

> Feel free to contribute to this book by making a pull request on Github.

* Design Patterns and Techniques
  * [Conditional in JSX](design-patterns-and-techniques/18.conditionals-in-jsx)
  * [Async Nature Of setState()](design-patterns-and-techniques/19.async-nature-of-setstate)
  * [Dependency Injection](design-patterns-and-techniques/20.dependency-injection)
  * [Context Wrapper](design-patterns-and-techniques/21.context-wrapper)
  * [Event Handlers](design-patterns-and-techniques/22.event-handlers)
  * [Flux Pattern](design-patterns-and-techniques/23.flux-pattern)
  * [One Way Data Flow](design-patterns-and-techniques/24.one-way-data-flow)
  * [Presentational vs Container](design-patterns-and-techniques/25.presentational-vs-container)
  * [Third Party Integration](design-patterns-and-techniques/26.third-party-integration)
  * [Passing Function To setState()](design-patterns-and-techniques/27.passing-function-to-setstate)
  * [Decorators](design-patterns-and-techniques/28.decorators)
  * [Feature Flags](design-patterns-and-techniques/29.feature-flags-using-redux)
  * [Component Switch](design-patterns-and-techniques/30.component-switch)
  * [Reaching Into A Component](design-patterns-and-techniques/31.reaching-into-a-component)
  * [List Components](design-patterns-and-techniques/32.list-components)
  * [Format Text via Component](design-patterns-and-techniques/33.format-text-via-component)
  * [Share Tracking Logic](design-patterns-and-techniques/34.share-tracking-logic)
* Anti-Patterns
  * [Introduction](anti-patterns/anti-patterns)
  * [Props In Initial State](anti-patterns/01.props-in-initial-state)
  * [findDOMNode()](anti-patterns/02.finddomnode)
  * [Mixins](anti-patterns/03.mixins)
  * [setState() in componentWillMount()](anti-patterns/04.setstate-in-componentwillmount)
  * [Mutating State](anti-patterns/05.mutating-state)
  * [Using Indexes as Key](anti-patterns/06.using-indexes-as-key)
  * [Spreading Props on DOM elements](anti-patterns/07.spreading-props-dom)
* Handling UX Variations
  * [Introduction](handling-ux-variations/ux-variations)
  * [Composing UX Variations](handling-ux-variations/01.composing-variations)
  * [Toggle UI Elements](handling-ux-variations/02.toggle-ui-elements)
  * [HOC for Feature Toggles](handling-ux-variations/03.hoc-feature-toggles)
  * [HOC props proxy](handling-ux-variations/04.hoc-props-proxy)
  * [Wrapper Components](handling-ux-variations/05.wrapper-components)
  * [Display Order Variations](handling-ux-variations/06.display-order-variations)
* Perf Tips
  * [Introduction](perf-tips/perf-tips)
  * [shouldComponentUpdate() check](perf-tips/01.shouldcomponentupdate-check)
  * [Using Pure Components](perf-tips/02.pure-component)
  * [Using reselect](perf-tips/03.reselect)
* Styling
  * [Introduction](styling/styling)
  * [Stateless UI Components](styling/01.stateless-ui-components)
  * [Styles Module](styling/02.styles-module)
  * [Style Functions](styling/03.style-functions)
  * [NPM Modules](styling/04.using-npm-modules)
  * [Base Component](styling/05.base-component)
  * [Layout Component](styling/06.layout-component)
  * [Typography Component](styling/07.typography-component)
  * [HOC for Styling](styling/08.hoc-for-styling)
* Gotchas
  * [Introduction](gotchas/gotchas)
  * [Pure render checks](gotchas/01.pure-render-checks)
  * [Synthetic Events](gotchas/02.synthetic-events)
  * [Related Links](gotchas/readings)
