Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building React Component Library (Meetup Edition)

Rob
November 19, 2015

Building React Component Library (Meetup Edition)

Video recording: https://www.youtube.com/watch?v=qtu11dPWBhI

React provides a great foundation for building and implementing reusable components, that whole team (and community) could greatly benefit from. But to make the code actually reusable, it should be properly presented and documented.
Robert will guide you through the key patterns of building React components library with proper navigation, rendered examples sandbox and API description.

Rob

November 19, 2015
Tweet

More Decks by Rob

Other Decks in Programming

Transcript

  1. Robert Haritonov
    @operatino
    BUILDING REACT
    COMPONENT LIBRARY

    View Slide

  2. Front-end Lead at Liberty Global

    View Slide

  3. Author of the Style Guide Platform

    View Slide

  4. View Slide

  5. WHAT IS
    A COMPONENT LIBRARY

    View Slide

  6. A set of re-usable modules
    Searchable library
    Rendered examples and docs

    View Slide

  7. View Slide

  8. View Slide

  9. Material UI
    Belle
    Elemental UI
    React Components (collection)

    View Slide

  10. View Slide

  11. COMPONETIZING
    THE WEB

    View Slide

  12. View Slide

  13. PATTERNS

    View Slide

  14. SMART DUMB
    CONTAINER COMPONENTS

    View Slide

  15. // CommentListContainer.js
    class CommentListContainer extends React.Component {
    constructor() {
    super();
    this.state = { comments: [] }
    }
    componentDidMount() {
    $.ajax({
    url: "/my-comments.json",
    dataType: 'json',
    success: function(comments) {
    this.setState({comments: comments});
    }.bind(this)
    });
    }
    render() {
    return ;
    }
    }

    View Slide

  16. // CommentList.js (Dumb component)
    class CommentList extends React.Component {
    constructor(props) {
    super(props);
    }
    render() {
    return {this.props.comments.map(renderComment)} ;
    }
    renderComment({body, author}) {
    return {body}—{author};
    }
    }

    View Slide

  17. and...

    View Slide

  18. I want you to take a moment and forget
    everything you know about web
    development.
    Keep an open mind.
    - Christopher Chedeau @vjeux

    View Slide

  19. CSS IN JS
    FOR ISOLATED WIDGETS
    AND COMPLEX UI'S

    View Slide

  20. // Radium example
    return (




    );
    var styles = {
    both: {
    background: 'black',
    border: 'solid 1px white',
    height: 100,
    width: 100
    },
    one: {
    ':hover': {
    background: 'blue',
    }
    },
    two: {
    ':hover': {
    background: 'red',
    }
    }
    };

    View Slide

  21. Radium
    React Style
    JSS

    View Slide

  22. TOOLS

    View Slide

  23. WORKBENCH
    ISOLATED DEVELOPMENT
    WITH HOT RELOAD

    View Slide

  24. Fast set-up
    Focus on decomposition
    Advanced tooling support

    View Slide

  25. View Slide

  26. PUTTING ALL TOGETHER
    INTO OWN
    COMPONENT LIBRARY

    View Slide

  27. Demo time...

    View Slide

  28. Organized components catalogs
    Live examples
    Automatic doc generation
    Hot module replacement

    View Slide

  29. Amsterdam React Conference

    View Slide

  30. bit.ly/sourcejs-loves-react
    Robert Haritonov
    @operatino, [email protected]

    View Slide