Intro deck on React, presented at the Ottawa JS Sept. 2015 meetup. Github repo for the Poop Monitor app: https://github.com/blefebvre/react-poop-monitor Deck was built with Spectacle: https://github.com/FormidableLabs/spectacle Source: https://github.com/blefebvre/react-ottawajs-spectacle-deck

1. REACTA PRESENTATION FOR OTTAWAJS

2. Hello
@brucelefebvre

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/

7. Dashboard Components

8. Dashboard Components
Dashboard
Header
EventSelector
EventTypeLink
EventHistory
Event
DiaperEvent
FormattedRelative

10. AddDiaperEvent
Header
DiaperEventForm
TimeSelector

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