Components done right™

Components done right™

Slides from our talk at ReactiveMeetups 2018 during 10. - 13. September in Brno, Hradec Králové, Prague and Bratislava.

52132fbb1a8d6a1535ba5f8ed0edac56?s=128

Robin Frischmann

September 13, 2018
Tweet

Transcript

  1. 7.
  2. 9.

    - React documentation,
 Components and Props “Components let you split

    the UI into independent, reusable pieces, and think about each piece in isolation.“ Source: https://reactjs.org/docs/components-and-props.html
  3. 11.
  4. 12.

    The Hunger Games Suzanne Collins Twilight #1 Stephanie Meyer Wild

    Cheryl Strayed BookList Trending Books BookListItem
  5. 13.

    The Hunger Games Suzanne Collins Twilight #1 Stephanie Meyer Wild

    Cheryl Strayed BookList Trending Books BookListItem Rating
  6. 14.

    The Hunger Games Suzanne Collins Twilight #1 Stephanie Meyer Wild

    Cheryl Strayed BookList Trending Books BookListItem Rating
  7. 16.

    1. have a single 
 responsibility 2. are accessible 3.

    are predictable 4. are customisable 5. are reusable Good components _ 0 % 23 % 45 % 68 % 90 % single
 responsibility accessible predictable custom isable reusable 84 % 76 % 42 % 19 % 17 %
  8. 25.

    ๏ concerned with how things look ➞ markup & styling

    ๏ are stateless ๏ receive data via props ๏ often just render children ๏ have no dependencies Presentational Source: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 Logical ๏ concerned with how things work ➞ logic ๏ are stateful ๏ render presentational components ๏ have dependencies
  9. 31.

    SEO

  10. 37.

    Pure Functions ๏ given the same input, always return the

    same output ๏ not mutate its arguments ๏ not call non-pure functions (e.g. Date.now or Math.random) ๏ not perform side effects (e.g. API calls) A pure function should _
  11. 38.

    function add(a, b) { return a + b } Examples

    function Header(props) { return <h1>{props.children}</h1> }
  12. 39.

    const View = () => ( <div className={ 'text_success' }>

    Some Text </div> ) .text_success { color: green } JS(X) CSS
  13. 40.

    const View = state => ( <div className={ state.error ?

    'text_failure' : 'text_success' }> Some Text </div> ) .text_success { color: green } .text_failure { color: red } JS(X) CSS
  14. 41.

    const View = state => ( <div className={ state.error ?

    'text_failure' : 'text_success' }> Some Text </div> ) .text_success { color: green } .text_failure { color: red; font-size: 20px } JS(X) CSS
  15. 42.
  16. 44.

    import { createComponent } from 'react-fela' const style = state

    => ({ color: state.error ? 'red' : 'green' }) const View = createComponent(style) // <View /> => <div class="a" /> // <View error /> => <div class="b" /> JS(X)
  17. 46.

    <View /> <View error /> .a { color: green }

    .b { color: red } <div class="a"></div> <div class="b"></div> Rendering Test Snapshot
  18. 49.

    BookListItem BookList Rating The Hunger Games Suzanne Collins Twilight #1

    Stephanie Meyer Wild Cheryl Strayed Trending Books Stars Loading
  19. 52.

    Customisation via props Stars - (int) value - (int) size

    - (string) color - (boolean) showValue size = 10 size = 15 color = yellow color = green showValue = false showValue = true 4.5 of 5 stars
  20. 53.

    Mastering props avoid (multiple) boolean props Click me <Button primary

    /> Click me <Button secondary /> Click me <Button /> <Button primary secondary /> ??? <Button variant="primary" />
  21. 64.

    Customisation Rating • calls API • handles errors • renders

    loading • renders HTML elements Loading
  22. 65.

    React Everywhere React Native, etc … Rating • calls API

    • handles errors • renders loading • renders native elements
  23. 66.

    Headless Components via render-props ๏ encapsulate logic ๏ don’t render

    UI ๏ are platform-agnostic ๏ call a render-function with all relevant props
  24. 68.

    Summary ✓ Single Responsibility (Separation of Concerns, Presentational & Logical)

    ✓ Accessibility (Semantic Markup + Tools) ✓ Predictability (Pure Functions, CSS in JS) ✓ Customisability (Master Props) ✓ Reusability (Theming, Headless Components)