A gentle introduction to React and the ideas behind it's design and unidirectional data flow.

1. Lets Get Functional!
A Talk by Tyler Johnston @tylerjohnst

2. My Name is Tyler Johnston

3. What is React?
React is the functional view layer from Facebook designed
for building UIs with a focus on immutable data structures.

4. Who is using React?
Facebook, Instagram, AirBNB, Khan Academy,
WhatsApp, CodeAcademy

5. var HelloMessage = React.createClass({
render: function() {
return <div onClick={this.handleClick}>
Hello {this.props.name}
</div>;
},
handleClick: function(event) {
alert('Hello!');
}
});
React.render(<HelloMessage name="John" />,
document.body);
WTF?

6. That’s JSX and it’s completely optional.

7. style architectures with separate templates, co

8. Everything is a component.

9. React has no:
Models
Controllers
Templates
Directives
Just Components.

10. –Johnny Appleseed
“Type a quote here.”

11. Lets take a look at an example React interface.

12. ShoppingCartComponent

13. CartListComponent

14. CartProductComponent

15. Separate interface components and
not your technology.
Make your components:
Reusuable
Testable
Composable
Able to run in isolation

16. itecture is all about two-way binding and mult

17. React is about one-way data flow.
Components can create and communicate
with any child component.

18. var ParentComponent = React.createClass({
render: function() {
return <ChildComponent name="Mr. Smith"/>;
}
});
var ChildComponent = React.createClass({
render: function() {
return <div>{this.props.name}</div>;
}
});

19. Properties are immutable.

20. var ChildComponent = React.createClass({
...
doSomething: function() {
this.props.name = "Nope."
}
});

21. ver, state is mutable and can be used for prop

22. var ParentComponent = React.createClass({
handleSomething: function() {
this.setState({ active: true });
},
render: function() {
return <ChildComponent active={this.state.active} />;
}
});
var ChildComponent = React.createClass({
render: function() {
return <input type="checkbox" checked={this.props.active} />
}
});

23. Data flows one direction and your
application responds to changes in the
data.
Child components are not responsible for
maintaining any state. Their state passed
through the data properties from the
parent.

24. // Lets pretend `cart` is a model object of the cart.
var ShoppingCartComponent = React.createClass({
render: function() {
return <ShoppingCartListComponent cart={this.state.cart}
products={this.state.cart.products}/>
}
});

25. var ShoppingCartListComponent = React.createClass({
render: function() {
return this.props.products.map(function(product) {
return <ShoppingCartListProductComponent cart={this.props.cart}
product={product} />
}).bind(this);
}
});

26. var ShoppingCartListProductComponent = React.createClass({
render: function() {
return <input type="text" onChange={this.changeQuantity}>;
},
changeQuantity: function(event) {
this.props.cart.updateQuantityForProduct(
this.props.product,
event.target.value
);
}
});

27. With this style its data down and events up.
checking state and re-rendering but rather noti

28. But wouldn’t all of this re-rendering be
expensive? The DOM is so slow!

29. It would be in a traditional application
architecture. Templates must be re-
rendered as strings and reinserted in to the
DOM after it removed the previous content.
React solves this with its most well known
feature: The Virtual DOM.

30. Touching the DOM is evil.

31. sistent, it’s hard to test, it’s brittle and it’s extrem

32. React keeps an in memory representation
of the DOM structure of the components.
At render time React determines the least
amount of modifications required to update
the data to the current state.

34. Reacts complete control over its own DOM
allows it to do extremely optimized things.

35. The result is blazingly fast render times.

36. You can, however, access the DOM if you
need to.
var ShoppingCartComponent = React.createClass({
componentDidMount: function() {
var $el = $(this.getDOMNode());
this.setState({ width: $el.width() });
}
});

37. Now back to the Javascript

38. var HelloMessage = React.createClass({
render: function() {
return <div onClick={this.handleClick}>
Hello {this.props.name}
</div>;
},
handleClick: function(event) {
alert('Hello!');
}
});
React.render(<HelloMessage name="John" />,
document.body);

39. It’s just Javascript

40. var HelloMessage = React.createClass({displayName: "HelloMessage",
render: function() {
return React.createElement("div", {onClick: this.handleClick},
"Hello ", this.props.name
);
},
handleClick: function(event) {
alert('Hello!');
}
});
React.render(React.createElement(HelloMessage, {name: "John"}),
document.body);

41. echnology stack like a Handlebars when you c

42. You can compose multiple components in a
single render call.
var ShoppingCartComponent = React.createClass({
render: function() {
return <div>
<ShoppingCartTotal total={self.props.cart.total} />
<ShoppingCartList products={self.props.cart.products} />
<ShoppingCartDiscount discount={self.props.cart.discount} />
</div>;
}
});

43. One of the better features of React is the
relatively small surface area of the API.

44. This means it’s completely pluggable in to
whatever your current architecture is.

45. MyBackboneApp.Views.ProductList = Backbone.View.extend({
...
render: function() {
var component = React.render(
React.createElement(ShoppingCartComponent),
this.$('.cart-container').get(0)
)
this.cart.on('change', function(cart) {
component.setState({ cart: cart });
});
return this;
}
...
});

46. There are solutions for dealing with things
out side of the scope of the view and DOM.
After the release of React an architecture
pattern called Flux has emerged. It’s way
too big for this talk and I recommend you
check it out yourself.

47. Thanks!