react
TRANSCRIPT
@7sheepnet 1
1 https://twitter.com/sangramvajre/status/582740689001172992
Data flow
— no framework: any component can communicate with any other component
— Backbone: pubsub
— Angular & Ember: two-way binding
— React: one-way data flow
class CartItem extends React.Component { render() { return ( <div> <Button text="Remove" /> </div> ) }}
class Button extends ReactComponent { render() { return ( <button>{this.props.text}</button> ) }}
class Button extends React.Component { render() { this.props.text = 'bar' // not working
return ( <button>{this.props.text}</button> ) }}
class CartItem extends React.Component { render() { this.setState({ text: 'Remove this item' })
return ( <div> <Button text={this.state.text} /> </div> ) }}
class CartItem extends React.Component { removeItem() { /* ... */ },
render() { return ( <div> <Button text="Remove" onClick={this.removeItem} /> </div> ) }}
class Button extends React.Component { render() { return ( <button onClick={this.props.onClick}>{this.props.text}</button> ) }}
Read more— @reactjs
— https://egghead.io
— https://facebook.github.io/react/index.html
— http://www.slideshare.net/AndrewHull/react-js-and-why-its-awesome
— http://www.slideshare.net/KamleshKumarSingh/react-mit