React first impressions

Slide 1

Slide 1 text

React first impressions 2016.01.15 @qckanemoto 1 / 45

Slide 2

Slide 2 text

(1) What's that? 2 / 45

Slide 3

Slide 3 text

3 / 45

Slide 4

Slide 4 text

4 / 45

Slide 5

Slide 5 text

5 / 45

Slide 6

Slide 6 text

A JavaScript Library for Building User Interfaces 6 / 45

Slide 7

Slide 7 text

7 / 45

Slide 8

Slide 8 text

8 / 45

Slide 9

Slide 9 text

9 / 45

Slide 10

Slide 10 text

(2) Features? 10 / 45

Slide 11

Slide 11 text

11 / 45

Slide 12

Slide 12 text

12 / 45

Slide 13

Slide 13 text

13 / 45

Slide 14

Slide 14 text

14 / 45

Slide 15

Slide 15 text

15 / 45

Slide 16

Slide 16 text

16 / 45

Slide 17

Slide 17 text

17 / 45

Slide 18

Slide 18 text

(3) Example 18 / 45

Slide 19

Slide 19 text

var Hello = React.createClass({ render: function () { return

Hello, React!

; } }); ReactDOM.render( , document.getElementById('app') ); React Example

19 / 45

Slide 20

Slide 20 text

var Hello = React.createClass({ // It's called 'Component' render: function () { return

Hello, React!

; } }); ReactDOM.render( , document.getElementById('app') ); React Example

20 / 45

Slide 21

Slide 21 text

var Hello = React.createClass({ render: function () { return

Hello, React!

; } }); ReactDOM.render( , // Set the Component... document.getElementById('app') ); React Example

21 / 45

Slide 22

Slide 22 text

var Hello = React.createClass({ render: function () { return

Hello, React!

; } }); ReactDOM.render( , // Set the Component document.getElementById('app') // to the element '#app' ); React Example

22 / 45

Slide 23

Slide 23 text

23 / 45

Slide 24

Slide 24 text

Next step (2/5) 24 / 45

Slide 25

Slide 25 text

Use props var Hello = React.createClass({ render: function () { return

Hello, React!

; } }); var Hello = React.createClass({ render: function () { return

Hello, !

; } }); var World = React.createClass({ render: function () { return {this.props.name}; } }); 25 / 45

Slide 26

Slide 26 text

26 / 45

Slide 27

Slide 27 text

props is that passed from parent. 27 / 45

Slide 28

Slide 28 text

Next step (3/5) 28 / 45

Slide 29

Slide 29 text

Use state var Hello = React.createClass({ render: function () { return

Hello, !

; } }); var Hello = React.createClass({ getInitialState: function () { return { worldName: 'React state' }; }, render: function () { return

Hello, !

; } }); 29 / 45

Slide 30

Slide 30 text

30 / 45

Slide 31

Slide 31 text

state is that held by itself. 31 / 45

Slide 32

Slide 32 text

Next step (4/5) 32 / 45

Slide 33

Slide 33 text

Change state var Hello = React.createClass({ getInitialState: function () { return { worldName: 'React state' }; }, + // just change state after 1 sec + componentDidMount: function () { + var that = this; + setTimeout(function () { + that.setState({ worldName: 'Changed state' }); + }, 1000); + }, render: function () { return

Hello, !

; } }); 33 / 45

Slide 34

Slide 34 text

34 / 45

Slide 35

Slide 35 text

35 / 45

Slide 36

Slide 36 text

When state updated component re-rendere whole tree under itself. 36 / 45

Slide 37

Slide 37 text

Final step (5/5) 37 / 45

Slide 38

Slide 38 text

Make child stateful var World = React.createClass({ render: function () { return {this.props.name}; } }); var World = React.createClass({ getInitialState: function () { return { name: this.props.name }; }, render: function () { return {this.state.name}; } }); 38 / 45

Slide 39

Slide 39 text

39 / 45

Slide 40

Slide 40 text

Not changed 40 / 45

Slide 41

Slide 41 text

props is immutable. state is mutable. 41 / 45

Slide 42

Slide 42 text

Conclusion 42 / 45

Slide 43

Slide 43 text

React is a JavaScript FW Component Oriented powered by One-way Reactive Data Flow Virtual DOM Immutable props & Mutable state 43 / 45

Slide 44

Slide 44 text

Also has Two-way Binding And It's Necessary for some complicated apps (I think) Similar to Angular2 ? 44 / 45

Slide 45

Slide 45 text

Thanks :) 45 / 45