An Introduction to React - All Things Open 2014

React is a JavaScript library for building user interfaces. But more than just being a high-performance way to build rich and interactive web applications, React also represents a fresh way of thinking about how such applications can be architected. In this session, we explore those philosophies before quickly diving into practical advice on how to get started with React and build your first apps.

Transcript

1. An Introduction to React
   JAMES PEARCE

   @jamespearce
   

   View Slide

2. View Slide

3. toddler

   imperative programming

   describe computation in terms
   of statements that change a
   program state
   teenager

   declarative programming

   express the logic of a
   computation without
   describing control flow
   

   View Slide

4. A JavaScript Library For

   Building User Interfaces
   

   View Slide

5. http://todomvc.com/
   

   View Slide

6. View Slide

7. View Slide

8. ☕(n)
   

   View Slide

9. Simple
   !
   Declarative
   http://reactjs.org
   

   View Slide

10. state describe
    

    View Slide

11. state describe
    for every
    change of
    the whole
    user interface
    

    View Slide

12. state describe
    for every
    change of
    the whole
    user interface
    

    View Slide

13. state 1 state 2
    

    View Slide

14. state 1 state 2
    DOM mutations
    

    View Slide

15. MVD #1
    * Minimum Viable Demo
    

    View Slide

16. 
    
    
    
    
    
    
    

    View Slide

17. var LabelApp = React.createClass({
    render: function () {
    return Hello World!;
    }
    });
    !
    React.render(
    ,
    document.body
    );
    

    View Slide

18. var LabelApp = React.createClass({
    render: function () {
    return {this.props.message};
    }
    });
    !
    React.render(
    ,
    document.body
    );
    

    View Slide

19. View Slide

20. State & component lifecycle
    

    View Slide

21. props
    !
    passed in from parent
    !
    

    

    this.props read-only within
    !
    can be defaulted & validated
    state
    !
    created within component
    !
    getInitialState
    

    this.state to read

    

    this.setState() to update
    

    View Slide

22. var MyComponent = React.createClass({
    !
    propTypes: {},

    getDefaultProps: function () {},
    getInitialState: function () {},
    !
    componentWillMount: function () {},
    componentWillUnmount: function () {},
    ...

    render: function () {
    // only read props & state -> return UI
    },
    });
    

    View Slide

23. var MyComponent = React.createClass({
    !
    iGotClicked: function () {...},
    !
    render: function () {
    return Click;
    },
    });
    Or a parent’s method passed in via props
    

    View Slide

24. MVD #2
    

    View Slide

25. var LabelApp = React.createClass({
    getDefaultProps: function () {
    return {message: 'Hello World!'};
    },
    !
    getInitialState: function () {
    return {message: this.props.message};
    },
    !
    render: function() {
    return {this.state.message};
    }
    });
    

    View Slide

26. onClick: function () {
    this.setState({message: 'Hello Raleigh!'});
    },
    !
    render: function () {
    return (
    
    {this.state.message}
    
    );
    }
    

    View Slide

27. View Slide

28. How does data flow?
    

    View Slide

29. Component
    Component
    Component
    Component
    Component Component
    props
    props
    setState
    

    View Slide

30. Component
    Component
    Component
    Component
    Component Component
    props
    props
    setState
    event

    callback
    

    View Slide

31. state

    stored as high up as it needs to be 

    to pass down to affected children
    

    View Slide

32. Table
    Row Cell Cell Cell Cell
    Row Cell Cell Cell Cell
    Row Cell Cell Cell Cell
    state is

    on cells
    

    View Slide

33. Table
    Row Cell Cell Cell Cell
    Row Cell Cell Cell Cell
    Row Cell Cell Cell Cell
    Total
    Total
    Total
    state is

    on rows
    

    View Slide

34. Table
    Row Cell Cell Cell Cell
    Row Cell Cell Cell Cell
    Row Cell Cell Cell Cell
    Total
    Total
    Total
    Row Total Total Total Total Total
    state is

    on table
    

    View Slide

35. MVD #3
    

    View Slide

36. var Table = React.createClass({
    getInitialState: function () {
    var data = [];
    for (var r = 0; r < this.props.rows; r++) {
    data[r] = [];
    for (var c = 0; c < this.props.columns; c++) {
    data[r][c] = 0;
    }
    }
    return {data: data};
    },
    render: function () {return ...;}
    });
    !
    React.render(, ...
    

    View Slide

37. var Row = React.createClass({
    render: function () {
    return {this.props.children};
    }
    });
    !
    var Total = React.createClass({
    render: function () {
    return {this.props.value};
    }
    });
    

    View Slide

38. var Cell = React.createClass({
    onChange: function (e) {
    this.props.onChange(
    this.props.row,
    this.props.column,
    parseInt(e.target.value) || 0
    );
    },
    render: function () {
    return (
    onChange={this.onChange} />
    );
    },
    });
    

    View Slide

39. var Table = React.createClass({
    onCellChange: function(row, column, value) {
    this.state.data[row][column] = value;
    this.setState({data: this.state.data});
    },
    !
    render: function() {
    // for rows & columns, append s containing

    // // value={this.state.data[r][c]}

    // onChange={this.onCellChange} />
    //
    // also append to each row and in a final row:

    // 

    },
    ...
    

    View Slide

40. View Slide

41. Component-based UI

    Virtual DOM
    Uni-directional data flow
    

    View Slide

42. “Give it 5 minutes”
    http://reactjs.org
    

    View Slide

43. JAMES PEARCE

    @jamespearce
    https://www.flickr.com/photos/matthewpaulson/6773801511
    https://www.flickr.com/photos/johnath/5358512977
    

    View Slide