React Bits

✨ React patterns, techniques, tips and tricks ✨

• Design Patterns and Techniques
  • Stateless Functions
  • JSX Spread Attributes
  • Destructuring Arguments
  • Conditional Rendering
  • Children Types
  • Array As Children
  • Function As Children
  • Render Callback
  • Children Pass Through
  • Proxy Component
  • Style Component
  • Event Switch
  • Layout Component
  • Container Component
  • Higher Order Component
  • State Hoisting
  • Controlled-Uncontrolled Input
  • Conditional in JSX
  • Async Nature Of setState()
  • Dependency Injection
  • Context Wrapper
  • Event Handlers
  • Flux Pattern
  • One Way Data Flow
  • Presentational vs Container
  • Third Party Integration
  • Passing Function To setState()
  • Decorators
  • Feature Flags
  • Component Switch
  • Reaching Into A Component
  • List Components
  • Format Text via Component
  • Share Tracking Logic
• Anti-Patterns
  • Introduction
  • Props In Initial State
  • Refs over findDOMNode()
  • HOC over Mixins
  • setState() in componentWillMount()
  • Mutating State
  • Using Indexs as Key
  • Spreading Props on DOM elements
• Handling UX Variations
  • Introduction
  • Composing UX Variations
  • Toggle UI Elements
  • HOC for Feature Toggles
  • HOC props proxy
  • Wrapper Components
  • Display Order Variations
• Conventions
  • Introduction
  • Class Organization
  • Adding Class Names
  • Computed Props and State
  • Cached variables in render()
  • Using HTML Entities
  • Tables
  • Inline List Iteration
  • Closures in render()
  • Functional Components
  • Formatting Props
  • ES6 class constructor super()
• Perf Tips
  • Introduction
  • shouldComponentUpdate() check
  • Using recompose
  • Using reselect
• Styling
  • Introduction
  • Stateless UI Components
  • Styles Module
  • Style Functions
  • NPM Modules
  • Base Component
  • Layout Component
  • Typography Component
  • HOC for Styling
• Gotchas
  • Introduction
  • Pure render checks
  • Synthetic Events
• References
  • React in Patterns by krasimir
  • React Patterns by planningcenter
  • reactpatterns.com
  • 10 React Mini-patterns