Introduction à React par Nicolas Perriault lors des Human Talks Montpellier du 8 Juillet 2014

1. INTRODUCTION À REACT@N1K0

2. React est une lib frontend JavaScript permettant de construire des
interfaces utilisateurs Web

3. REACT
▸ Open Source (MIT)
▸ développée par Facebook
▸ MVC

4. REACT
▸ librairie orientée rendu
▸ concept de composants réutilisables
▸ grand soin apportée à la gestion d'état
▸ très performant grace au concept de diff de DOM

5. GESTION D'ÉTAT
▸ Les données changeantes au fil du temps sont une plaie
▸ Le DOM n'est qu'une gigantesque state machine
▸ Emprunts à la Programmation Fonctionnelle

6. EXEMPLE
var Counter = React.createClass({
displayName: "Counter",
getInitialState: function() {
return {value: 0}
},
handleClick: function() {
this.setState({value: this.state.value + 1});
},
render: function() {
return (React.DOM.div(null,
React.DOM.span(null, this.state.value),
React.DOM.a({href: "#", onClick: this.handleClick},
"click me!")));
}
});
React.renderComponent(Counter(), document.querySelector("body"));

7. EXEMPLE
Restitution HTML :
<div data-reactid=".0">
<span data-reactid=".0.1">0</span>
<a data-reactid=".0.2" href="#">click me!</a>
</div>

8. DÉCRYPTAGE
Déclaration du composant
var Counter = React.createClass({
displayName: "Counter",

9. DÉCRYPTAGE
Définition de l'état initial
getInitialState: function() {
return {value: 0}
},

10. DÉCRYPTAGE
Définition de l'action au click ; ici, on met à jour l'état en incrémentant
la valeur courante du compteur
handleClick: function() {
this.setState({value: this.state.value + 1});
},
React effectue un rendu intégral d'un composant à chaque mise à jour
des données qui lui sont associées

11. DÉCRYPTAGE
Définition de la structure sémantique du composant
render: function() {
return (React.DOM.div(null,
React.DOM.span(null, this.state.value),
React.DOM.a({href: "#", onClick: this.handleClick},
"click me!")));
}

12. DÉCRYPTAGE
"Montage" du composant sur un nœud DOM réel
React.renderComponent(Counter(),
document.querySelector("body"));

13. Un composant React n'est au final qu'une fonction idempotente
pouvant décrire votre UI à un moment précis dans le temps
de façon extrêment fiable

14. COMME UN
SERVEUR WEB

15. JSX
/** @jsx React.DOM */
var Counter = React.createClass({
getInitialState: function() {
return {value: 0}
},
handleClick: function() {
this.setState({value: this.state.value + 1});
},
render: function() {
return (
<div>
<span>{this.state.value}</span>
<a onClick={this.handleClick}>increment</a>
</div>
);
}
});
React.renderComponent(<Counter/>, document.querySelector("body"));

17. JSX
(oui, ça fait toujours ça la première fois)
▸ JSX n'est qu'un DSL représentant le DOM
▸ nécessite une étape de compilation
▸ son utilisation est complètement optionnelle…
▸ … mais bien pratique à l'usage

18. PROPRIÉTÉS IMMUTABLES
var Counter = React.createClass({
getInitialState: function() {
return {value: parseInt(this.props.value, 10) || 0}
},
handleClick: function() {
this.setState({value: this.state.value + 1});
},
render: function() {
return (
<div>
<span>{this.state.value}</span>
<a onClick={this.handleClick}>increment</a>
</div>
);
}
});

19. PROPRIÉTÉS IMMUTABLES
React.renderComponent(<Counter value="42" />,
document.querySelector("body"));

20. COMPOSABILITÉ
var MultiCounter = React.createClass({
render: function() {
return (
<div>
<Counter value="1" />
<Counter value="2" />
<Counter value="3" />
</div>
);
}
});

21. COMPOSABILITÉ
var MultiMultiCounter = React.createClass({
render: function() {
return (
<div>
<MultiCounter/>
<MultiCounter/>
<MultiCounter/>
<Counter/>
</div>
);
}
});

22. DÉCORATEUR
var Panel = React.createClass({
render: function() {
return (
<div className="panel">
<h1>{this.props.title}</h1>
<div className="panel-body">
{this.props.children}
</div>
</div>;
);
}
});

23. DÉCORATEUR
var MyPanel = React.createClass({
render: function() {
return (
<Panel title="Hello World">
<p>How are you today?</p>
</Panel>
);
}
});

24. VIRTUAL DOM
À chaque mise à jour des données, React :
▸ construit un nouvel arbre virtuel à partir de celles-ci
▸ fait un diff avec la précédente version de l'arbre
▸ stocke un ensemble d'opérations atomiques de modification dans
une queue
▸ et traite ces opérations par lots (batch)

25. C'EST SUPER
RAPIDE

26. Voila. Des questions ?