Tweet
Tweet

Slide 1

Slide 1 text

Robert Haritonov @operatino BUILDING REACT COMPONENT LIBRARY

Slide 2

Slide 2 text

Front-end Lead at Liberty Global

Slide 3

Slide 3 text

Author of the Style Guide Platform

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

WHAT IS A COMPONENT LIBRARY

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Material UI Belle Elemental UI React Components (collection)

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

COMPONETIZING THE WEB

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

PATTERNS

Slide 14

Slide 14 text

SMART DUMB CONTAINER COMPONENTS

Slide 15

Slide 15 text

// 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 ; } }

Slide 16

Slide 16 text

// 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}
    • ; } }

    Slide 17

    Slide 17 text

    and...

    Slide 18

    Slide 18 text

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

    Slide 19

    Slide 19 text

    CSS IN JS FOR ISOLATED WIDGETS AND COMPLEX UI'S

    Slide 20

    Slide 20 text

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

    Slide 21

    Slide 21 text

    Radium React Style JSS

    Slide 22

    Slide 22 text

    TOOLS

    Slide 23

    Slide 23 text

    WORKBENCH ISOLATED DEVELOPMENT WITH HOT RELOAD

    Slide 24

    Slide 24 text

    Fast set-up Focus on decomposition Advanced tooling support

    Slide 25

    Slide 25 text

    No content

    Slide 26

    Slide 26 text

    PUTTING ALL TOGETHER INTO OWN COMPONENT LIBRARY

    Slide 27

    Slide 27 text

    Demo time...

    Slide 28

    Slide 28 text

    Organized components catalogs Live examples Automatic doc generation Hot module replacement

    Slide 29

    Slide 29 text

    Amsterdam React Conference

    Slide 30

    Slide 30 text

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