simonliubo/react-bits

✨ React patterns, techniques, tips and tricks ✨

React Bits

A compilation of React Patterns, techniques, tips and tricks.

Your contributions are heartily ♡ welcome. (✿◠‿◠)

• 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 Indexes 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
• Perf Tips
  • Introduction
  • shouldComponentUpdate() check
  • Using Pure Components
  • 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
• Related Links