Reactjs @ MOSUT x Tainan.py

Slide 1

Slide 1 text

Reactjs yhsiang @ MOSUTxTainan.py 8/23 Sat.

Slide 2

Slide 2 text

Who am I?

Slide 3

Slide 3 text

〳腋僽㔔捀し➮㣖랔✫

Slide 4

Slide 4 text

HWꅾ䏞♳涗罏将虋䊨玑䌌

Slide 5

Slide 5 text

React

Slide 6

Slide 6 text

MVC but V

Slide 7

Slide 7 text

templates but components

Slide 8

Slide 8 text

update DOM reconciliation

Slide 9

Slide 9 text

Features

Slide 10

Slide 10 text

Virtual DOM also render on server-side

Slide 11

Slide 11 text

Data Flow one-way reactive data

Slide 12

Slide 12 text

JSX XML-like syntax

Slide 13

Slide 13 text

var HelloMessage = React.createClass({  render: function({ return

Hello {this.props.name}

; }); }); React.renderComponent( , mountNode);

Slide 14

Slide 14 text

var HelloMessage = React.createClass({  render: function({ return ! }); }); React.renderComponent( , mountNode); React.DOM.div(null, “Hello “, this.props.name); HelloMessage({name: “John”})

Slide 15

Slide 15 text

React+LiveScript

Slide 16

Slide 16 text

{div} = React.DOM HelloMessage = React.createClass do render: -> div {}, “Hello #{@props.name}” React.renderComponent ( HelloMessage name: ‘John’), mountNode

Slide 17

Slide 17 text

A stateful component

Slide 18

Slide 18 text

{div} = React.DOM Timer = React.createClass do getInitialState: -> secondsElapsed: 0 tick: -> @setState secondsElapsed: @state.secondsElapsed + 1 componentDidMount: -> @interval = setInterval @tick, 1000 componentWillUnmount: -> clearInterval @interval render: -> div {}, “Seconds Elapsed: #{@state.secondsElapsed}” React.renderComponent Timer!, mountNode

Slide 19

Slide 19 text

props vs state external v.s. internal

Slide 20

Slide 20 text

Lifecyle

Slide 21

Slide 21 text

componentWillMount() componentDidMount() componentWillReceiveProps() Mounting Updating this.getDOMnode(), setTimeout, xhr shouldComponentUpdate() componentWillUpdate() componentDidUpdate() Unmounting componentWillUnmount()

Slide 22

Slide 22 text

Slide 23

Slide 23 text

React-boostrap

Slide 24

Slide 24 text

More? propTypes, mixins, statics

Slide 25

Slide 25 text

Flux application architecture

Slide 26

Slide 26 text

unidirectional data ﬂow

Slide 27

Slide 27 text

Action Controller Model View Model Model Model Model View View View View

Slide 28

Slide 28 text

Action Dispatcher Store View Action

Slide 29

Slide 29 text

https://github.com/facebook/ﬂux

Slide 30

Slide 30 text

callbacks waitFor

Slide 31

Slide 31 text

Action Dispatcher action = type: ‘NEW_THREAD’ to: ‘hychen’ text: ‘嗨懂’ threadID: ‘78123’ messageID: ‘1234’ Message Store Thread Store Message View Thread View ‘78123’: participants: <[ hychen ly ]> messageList: <[ 1234 ]>

Slide 32

Slide 32 text

Action Dispatcher action = type: ‘NEW_THREAD’ to: ‘hychen’ text: ‘嗨懂’ threadID: ‘78123’ messageID: ‘1234’ Message Store Thread Store Message View Thread View ‘1234’: text: ‘嗨懂’ thread: ‘78123’ author: ‘ly’