Introduction à React

664 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
664
Sur SlideShare
0
Issues des intégrations
0
Intégrations
15
Actions
Partages
0
Téléchargements
21
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 ?

×