jiixing / react-bits

✨ React patterns, techniques, tips and tricks ✨

React Bits

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

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

---

Table of Contents

• Design Patterns and Techniques

• Anti-Patterns

• Handling UX Variations

• Conventions

• Perf Tips

• Styling

• Gotchas

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

• Conditionals 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

• 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

• Composing UX Variations

• Toggle UI Elements

• HOC for Feature Toggles

• HOC for Props Proxy

• Wrapper Components

• Display Order Variations

Conventions

• 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

• shouldComponentUpdate() check

• Using recompose

• Using reselect

Styling

• Stateless UI Components

• Styles Module

• Style Functions

• NPM Modules

• Base Component

• Layout Component

• Typography Component

• HOC for Styling

Gotchas

• Pure render checks

• Synthetic Events

References

Here are a few great resources:

React in Patterns by krasimir

React Patterns by planningcenter

reactpatterns.com

10 React Mini-patterns

License

MIT