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.

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, r@rhr.me
    

    View Slide