time to react!
TRANSCRIPT
TIME TO REACT!TIME TO REACT!Radosław Jankiewicz / / @radek_j radekj
WHO AM IWHO AM IProgramming since 2007Web applicationsPython (mostly)
AGENDAAGENDAWhat is React?1. How do you use it?2. Why should you give it a chance?3. Are there any weaknesses of React?4.
WHAT IS REACT?WHAT IS REACT?
A JAVASCRIPT LIBRARY FORA JAVASCRIPT LIBRARY FORBUILDING USER INTERFACESBUILDING USER INTERFACES
1ST PUBLIC RELEASE - MAY 20131ST PUBLIC RELEASE - MAY 2013
JUST THE UIJUST THE UILots of people use React as the V in MVC.Since React makes no assumptions aboutthe rest of your technology stack, it's easyto try it out on a small feature in an existingproject.
https://facebook.github.io/react/
VIRTUAL DOMVIRTUAL DOMReact abstracts away the DOM from you,giving a simpler programming model andbetter performance.
https://facebook.github.io/react/
DATA FLOWDATA FLOWReact implements one-way reactive dataflow which reduces boilerplate and is easierto reason about than traditional databinding.
https://facebook.github.io/react/
HOW DO YOU USE REACT?HOW DO YOU USE REACT?
COMPONENTSCOMPONENTSvar SimpleComponent = React.createClass({ render: function() {
return ( <div> It is time to react {this.props.today.toTimeString()} !!! </div> ); }});
ReactDOM.render( <SimpleComponent today={new Date()}/>, document.getElementById('example'));
It is time to react 20:24:59 GMT+0100 (CET) !!!
JSXJSX<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
render: function() { return ( <div id="transform">transform text</div> );}
render: function() {return (
React.DOM.div({id: "transform"}, "transform text") );}
NESTED COMPONENTSNESTED COMPONENTSvar books = [
{author:'John Smith', title:'Lorem Ipsum'},{author:'Jane Doe', title:'Dolor sit amet'}
];
var ListOfBooks = React.createClass({ render: function() {
return ( <ul> {this.props.books.map(function(book, index) {
return <Book key={index} bookItem={book} />; })} </ul> ); }});var Book = React.createClass({ render: function() {
var bookItem = this.props.bookItem;return <li>{bookItem.title} - {bookItem.author}</li>
}});
NESTED COMPONENTSNESTED COMPONENTS<ul data-reactid=".0"> <li data-reactid=".0.$0">John Smith - Lorem Ipsum</li> <li data-reactid=".0.$1">Jane Doe - Dolor sit amet</li></ul>
COMPONENT STATECOMPONENT STATEvar Counter = React.createClass({ getInitialState: function() {
return {count: 1}; },
handleClick: function() {this.setState({count: this.state.count + 1});
},
render: function() {return (
<input type="button" onClick={this.handleClick} value={this.state.count} /> ) }});
1
VIRTUAL DOMVIRTUAL DOM
REACT APIREACT APICOMPONENT SPECIFICATIONSCOMPONENT SPECIFICATIONS
rendergetInitialStategetDefaultPropssetState
REACT APIREACT APILIFECYCLE METHODSLIFECYCLE METHODScomponentWillMountcomponentDidMountcomponentWillReceivePropsshouldComponentUpdatecomponentWillUpdatecomponentDidUpdatecomponentWillUnmount
LIFECYCLE METHODSLIFECYCLE METHODScomponentWillReceiveProps: function(nextProps) {this.setState({// set something
});}
shouldComponentUpdate: function(nextProps, nextState){// return a boolean valuereturn false;
}
FLUXFLUXMVC model might be too complex
https://facebook.github.io/flux
FLUXFLUXUnidirectional data flow
https://facebook.github.io/flux
WHY SHOULD YOU GIVE IT AWHY SHOULD YOU GIVE IT ACHANCE?CHANCE?
BECAUSE IT'S ...BECAUSE IT'S ...FastSimple to learn and easy to useClean and consiceIntegrates easily with other solutions
ARE THERE ANY CONS OF REACT?ARE THERE ANY CONS OF REACT?HTML templates in js filesMay be initially hard to switch to for jQuery people
QUESTIONS TIMEQUESTIONS TIME
SOURCESSOURCEShttps://facebook.github.io/reacthttps://facebook.github.io/flux