![A Stateful Component
var EventHistory = React.createClass({
getInitialState: function() {
return {events: []};
},
componentWillMount: function() {
var eventItems = [];
this.dataProvider = new PMDataProvider();
this.dataProvider.getEvents(function(event) {
// `unshift` used instead of `push` to place the newest items at the top
eventItems.unshift(event);
this.setState({
events: eventItems
});
}.bind(this));
},
componentWillUnmount: function() {
this.dataProvider.close();
},
render: function() {
var eventNodes = this.state.events.map(function (event, keyIndex) {
var eventComponent;
if (event.type === "Diaper") {
return (<DiaperEvent event={event} key={keyIndex} />);
}
else {
return (<Event event={event} key={keyIndex} />);
}
});
return (
<div className="list card">
{eventNodes}
</div>
);
}
});](https://image.slidesharecdn.com/reactottjsprezexport-150909233215-lva1-app6891/85/OttawaJS-React-15-320.jpg)
OttawaJS - React
- 1. REACTA PRESENTATION FOR OTTAWAJS
- 3. REACT: A JAVASCRIPT LIBRARY FOR CREATING USER INTERFACES
- 4. Why React? Component based Fast Performance To learn Simple No templates Means no abstractions Markup lives with its corresponding view logic
- 5. Demo!
- 6. On the Shoulders of Giants React - http://facebook.github.io/react/ React Router - https://rackt.github.io/react-router/ React Intl - http://formatjs.io/react/ Ionic Framework CSS - http://ionicframework.com/ Firebase - https://www.firebase.com/ PhoneGap - http://phonegap.com/
- 11. ...with React, the only thing you do is build components. - Why React?
- 12. Your First Component var Header = React.createClass({ render: function() { return ( <h1>{this.props.title}</h1> ); } });
- 13. Use It var Header = React.createClass({ render: function() { return ( <h1>{this.props.title}</h1> ); } }); React.render( <Header title="Poop Monitor" />, document.getElementById('app') );
- 14. Component Basics Component output is simply a function of `state` and `props` Data flows from "Owner to Owned" <Parent><Child /></Parent> Declarative Focus is on _what_ the program should accomplish without prescribing how to do it
- 15. A Stateful Component var EventHistory = React.createClass({ getInitialState: function() { return {events: []}; }, componentWillMount: function() { var eventItems = []; this.dataProvider = new PMDataProvider(); this.dataProvider.getEvents(function(event) { // `unshift` used instead of `push` to place the newest items at the top eventItems.unshift(event); this.setState({ events: eventItems }); }.bind(this)); }, componentWillUnmount: function() { this.dataProvider.close(); }, render: function() { var eventNodes = this.state.events.map(function (event, keyIndex) { var eventComponent; if (event.type === "Diaper") { return (<DiaperEvent event={event} key={keyIndex} />); } else { return (<Event event={event} key={keyIndex} />); } }); return ( <div className="list card"> {eventNodes} </div> ); } });
- 16. Let's Break it Down var EventHistory = React.createClass({ getInitialState: function() { // Set up the component's initial state }, componentWillMount: function() { // Component is about to be rendered }, componentWillUnmount: function() { // Component is about to be removed from the DOM }, render: function() { // Returns a single child element // Pure: // - Does not modify state // - Does not interact with the DOM directly // - Returns same result each time it is invoked } }); More on component lifecycle methods can be found here
- 17. ...code is read far more than it's written, and it's extremely easy to read this modular, explicit code. - Pete Hunt, Thinking in React
- 18. Speed: at a price No two-way data binding; `props` flow from parent to child Form element data often needs to propogate up var GenericEventForm = React.createClass({ onDateUpdate: function(date) { // Deal with the updated date }, render: function() { return ( <form className="eventForm"> <TimeSelector onUpdate={this.onDateUpdate}/> </form> ) } }); var TimeSelector = React.createClass({ timeSelectionChanged: function(e) { var eventDate = new Date(); // manipulate date as required this.props.onUpdate(eventDate); }, render: function() { // Simplified for code sample return ( <input type="radio" name="timeOption" onChange={this.timeSelectionChanged} /> ); } });
- 19. Gotchas Use an NPM/Gulp/Browserify workflow from the start Like this react-app-boilerplate Beware copying source from non-React samples `class` becomes `className` `for` becomes `htmlFor` React is not a monolithic framework like Angular It will not make XHRs for you It does not handle routing between views You will have to code your own page transitions
- 20. Thanks!
- 21. Project source on Github: bit.ly/ott-react