INTRODUCTION À REACT@N1K0
React est une lib frontend JavaScript permettant de construire des
interfaces utilisateurs Web
REACT
▸ Open Source (MIT)
▸ développée par Facebook
▸ MVC
REACT
▸ librairie orientée rendu
▸ concept de composants réutilisables
▸ grand soin apportée à la gestion d'état
▸ très pe...
GESTION D'ÉTAT
▸ Les données changeantes au fil du temps sont une plaie
▸ Le DOM n'est qu'une gigantesque state machine
▸ ...
EXEMPLE
var Counter = React.createClass({
displayName: "Counter",
getInitialState: function() {
return {value: 0}
},
handl...
EXEMPLE
Restitution HTML :
<div data-reactid=".0">
<span data-reactid=".0.1">0</span>
<a data-reactid=".0.2" href="#">clic...
DÉCRYPTAGE
Déclaration du composant
var Counter = React.createClass({
displayName: "Counter",
DÉCRYPTAGE
Définition de l'état initial
getInitialState: function() {
return {value: 0}
},
DÉCRYPTAGE
Définition de l'action au click ; ici, on met à jour l'état en incrémentant
la valeur courante du compteur
hand...
DÉCRYPTAGE
Définition de la structure sémantique du composant
render: function() {
return (React.DOM.div(null,
React.DOM.s...
DÉCRYPTAGE
"Montage" du composant sur un nœud DOM réel
React.renderComponent(Counter(),
document.querySelector("body"));
Un composant React n'est au final qu'une fonction idempotente
pouvant décrire votre UI à un moment précis dans le temps
de...
COMME UN
SERVEUR WEB
JSX
/** @jsx React.DOM */
var Counter = React.createClass({
getInitialState: function() {
return {value: 0}
},
handleClick...
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 compila...
PROPRIÉTÉS IMMUTABLES
var Counter = React.createClass({
getInitialState: function() {
return {value: parseInt(this.props.v...
PROPRIÉTÉS IMMUTABLES
React.renderComponent(<Counter value="42" />,
document.querySelector("body"));
COMPOSABILITÉ
var MultiCounter = React.createClass({
render: function() {
return (
<div>
<Counter value="1" />
<Counter va...
COMPOSABILITÉ
var MultiMultiCounter = React.createClass({
render: function() {
return (
<div>
<MultiCounter/>
<MultiCounte...
DÉCORATEUR
var Panel = React.createClass({
render: function() {
return (
<div className="panel">
<h1>{this.props.title}</h...
DÉCORATEUR
var MyPanel = React.createClass({
render: function() {
return (
<Panel title="Hello World">
<p>How are you toda...
VIRTUAL DOM
À chaque mise à jour des données, React :
▸ construit un nouvel arbre virtuel à partir de celles-ci
▸ fait un ...
C'EST SUPER
RAPIDE
Voila. Des questions ?
Introduction à React
Prochain SlideShare
Chargement dans…5
×

Introduction à React

711 vues

Publié le

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

Publié dans : Ingénierie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
711
Sur SlideShare
0
Issues des intégrations
0
Intégrations
15
Actions
Partages
0
Téléchargements
22
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Introduction à React

  1. 1. INTRODUCTION À REACT@N1K0
  2. 2. React est une lib frontend JavaScript permettant de construire des interfaces utilisateurs Web
  3. 3. REACT ▸ Open Source (MIT) ▸ développée par Facebook ▸ MVC
  4. 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. 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. 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. 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. 8. DÉCRYPTAGE Déclaration du composant var Counter = React.createClass({ displayName: "Counter",
  9. 9. DÉCRYPTAGE Définition de l'état initial getInitialState: function() { return {value: 0} },
  10. 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. 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. 12. DÉCRYPTAGE "Montage" du composant sur un nœud DOM réel React.renderComponent(Counter(), document.querySelector("body"));
  13. 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. 14. COMME UN SERVEUR WEB
  15. 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"));
  16. 16. 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
  17. 17. 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> ); } });
  18. 18. PROPRIÉTÉS IMMUTABLES React.renderComponent(<Counter value="42" />, document.querySelector("body"));
  19. 19. COMPOSABILITÉ var MultiCounter = React.createClass({ render: function() { return ( <div> <Counter value="1" /> <Counter value="2" /> <Counter value="3" /> </div> ); } });
  20. 20. COMPOSABILITÉ var MultiMultiCounter = React.createClass({ render: function() { return ( <div> <MultiCounter/> <MultiCounter/> <MultiCounter/> <Counter/> </div> ); } });
  21. 21. 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>; ); } });
  22. 22. DÉCORATEUR var MyPanel = React.createClass({ render: function() { return ( <Panel title="Hello World"> <p>How are you today?</p> </Panel> ); } });
  23. 23. 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)
  24. 24. C'EST SUPER RAPIDE
  25. 25. Voila. Des questions ?

×