Skip to content

Instantly share code, notes, and snippets.

@roberto
Last active January 18, 2018 19:28
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save roberto/bc2c57c2f862ff287fec16dcfd9e58dc to your computer and use it in GitHub Desktop.
Save roberto/bc2c57c2f862ff287fec16dcfd9e58dc to your computer and use it in GitHub Desktop.

10 weird tricks that React developers near you are using to create reusable components

https://www.youtube.com/watch?v=nQo0EdHNjto

  • reusable components
    • props over state
      • prop === state => problem!
    • stateless components
    • easy to unit test
  • PropTypes are serious
    • props immutable!
      • shouldComponentUpdate improved
    • console.warn = (warning) => throw new Error(‘warning: ‘, warning);
    • npm install eslint-plugin-react
  • break html out into components (8:34)
  • children don’t have to be children
    • can be used to declare stuff
    • render () { React.Children.forEach(this.props.children, (child) => { if(child.Type === Header) … } ) }
  • cross behavior
    • mixins: not (still around??)
    • composition: meh
    • Higher order component: yay! (13:25)
      • withValidation(AnyComponent) => { return class WithValidation... }
        • decorators: awesome
  • pay attention to CSS class names
  • separate ui components and app components
    • compose components with logic + ui components
  • performance
    • check React.addons.Perf
    • implement shouldComponentUpdate
    • dom manipulation… bad

Building a React Component Library & Styleguide for your org, David Wells - AtTheFrontend 2016

https://www.youtube.com/watch?v=AwofAAThsx0

React plus X: Best Practices for Reusable UI Components

https://www.youtube.com/watch?v=Yy7gFgETp0o

  • WOW!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment