An overview presentation about React, Flux and Redux.

1. React, Flux and a little bit of
Redux
By Ny Fanilo Andrianjafy

2. React
My previous experiences
I found out about it in 2014.
The concept made a lot of sense to
me.
Then I laid eyes on some code.
2

3. var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />,
mountNode);
3

4. And I hated it.
4

5. React
My previous experiences
I began a project with web
components and it was not ready
at that time.
The founder of player.me
convinced me to check it again
and look past the weird syntax.
5

6. React is a JavaScript library to build
UIs.
Only the UI
Virtual DOM
One-Way binding
Characteristics
Uses JSX
You build components
Should be Reusable
Can be Stateful
Have a Lifecycle
Containers / Subcomponents
What is React ?
6

7. React
Components
The lifecycle
componentWillMount: Before the initial rendering.
componentDidMount: After the initial rendering.
componentWillReceiveProps: When receiving new
props.
componentWillUpdate: When about to update avec
receiving new props.
componentDidUpdate: Invoked after the component
updates.
componentWillUnmount: Before unmounting from
the DOM.
7

8. Let’s take 5 minutes for a ES2015 crash
course
8

9. // ES5
var quadratic = function(a, b, c) {
return function(x) {
return (a * x * x) + (b * x) + c;
};
};
// ES2015
let quadratic = (a, b, c) => (x) => (a * x * x) + (b * x) + c;
9

10. // ES5
var myObject = { a: 1, b: 2, c: 3 };
var a = myObject.a;
var foo = myObject.b;
// ES2015
let myObject = { a: 1, b: 2, c: 3 };
let { a, b: foo } = myObject;
10

11. // ES5
var myArray = [1, 2, 3, 4, 5, 6];
var x = myArray[0];
var y = myArray[4];
// ES2015
let myArray = [1, 2, 3, 4, 5, 6];
let [x,,,,y] = myArray;
11

12. // ES5
var world = 'World';
var myValue = 'Hello ' + world + ' ! This is a string template.';
// ES2015
let world = 'World';
let myValue = `Hello ${world} ! This is a string template.`;
12

13. // ES5
var a = 123;
var b = 456;
var c = {
a: a,
b: b,
foo: 'bar'
};
// ES2015
let a = 123;
let b = 456
let c = {
a,
b,
foo: 'bar'
};
13

14. (state = [], action) => {
return state.map(action);
}
14

15. JSX
15

16. Markup that looks like HTML that
gets transformed to JavaScript
functions.
You do not have to use it when
writing React applications.
They are shorthands to call
React.createElement().
Built against XSS attacks
It is not a HTML templating language
Do not put them in the same bucket as
Handlebars or Mustache. It is not
simply token replacing.
Declarative syntax to express Virtual
DOM.
Virtual DOM is diffed with the real
DOM and re-rendered efficiently.
Not limited to HTML.
JSX
16

17. <!-- HTML and JavaScript belong together. -->
<!-- Right now, we put JavaScript in our HTML files. -->
<form data-bind="submit: addItem">
New item:
<input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
<p>Your items:</p>
<select multiple="multiple" data-bind="options: items"> </select>
</form>
17

18. // JSX reverses the context and puts HTML in your JavaScript.
var Form = React.createClass({
[...]
render: function() {
var options = this.renderOptions();
return (
<div>
New Item: <input type="text" onChange={this.handleChange} ref="itemToAdd"/>
<button type="submit" disabled={!this.state.itemToAdd} onClick={this.addItem}>Add</button><br />
Your Items:<br />
<select multiple="multiple">
{options}
</select>
</div>
);
}
});
18

19. var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />,
mountNode);
19

20. "use strict";
var HelloMessage = React.createClass({
displayName: "HelloMessage",
render: function render() {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);
}
});
ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);
20

21. The Good:
Since the markup is compiled to
functions, malformatted JSX will
fail at compilation time.
JavaScript is more powerful than
HTML, so you use the full power
of JavaScript to build your UI.
UI is testable.
Rendering is faster because of the
Virtual DOM.
The Bad:
Harsh first impression.
JSX
21

22. Flux
22

23. Flux
23

24. Flux is an architecture for client-side applications.
Do not consider it as a framework, even though there is a framework called flux.
The data flow is unidirectional.
Four major parts:
Stores
Actions
Dispatcher
Views
Flux
24

25. Flux: Stores
Holds the logic and state of the
application.
25

26. Flux: Stores
Action creators create payloads that explains
what happened.
26

27. Flux: Dispatcher
Acts as the central hub of the data flow. Stores
register callback to the dispatcher and it invokes
them when it receives actions
27

28. Flux: Dispatcher
Views listen to the store and display their
data.
28

29. Redux
29

30. State container for JavaScript applications
Not limited to React
You can use it with any View library
Took cues from elm
Not totally Flux but not very far from it.
Redux
30

31. let initialState = { items: [] };
(state = initialState, action) => {
return Object.assign({}, state, {
items: state.items.concat([action.note])
});
}
31

32. (oldState, action) => newState
No Mutation.
32

33. One store to rule them all.
33

34. Actions are very simple objects or
functions when doing async operations
34

35. Conclusion
React is evolutionary
Virtual DOM is fast.
Think in terms of functions.
Presentation only.
Flux makes the application state more predictable and easier to reason about
Redux brings a nice functional programming flavor.
Where to go next:
React Native
35