introduction à react
DESCRIPTION
Introduction à React par Nicolas Perriault lors des Human Talks Montpellier du 8 Juillet 2014TRANSCRIPT
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 performant grace au concept de diff de DOM
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
EXEMPLEvar 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"));
EXEMPLERestitution HTML :
<div data-reactid=".0"> <span data-reactid=".0.1">0</span> <a data-reactid=".0.2" href="#">click me!</a></div>
DÉCRYPTAGEDéclaration du composant
var Counter = React.createClass({ displayName: "Counter",
DÉCRYPTAGEDéfinition de l'état initial
getInitialState: function() { return {value: 0} },
DÉCRYPTAGEDé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
DÉCRYPTAGEDé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!"))); }
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 idempotentepouvant décrire votre UI à un moment précis dans le temps
de façon extrêment fiable
COMME UN SERVEUR WEB
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"));
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
PROPRIÉTÉS IMMUTABLESvar 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> ); }});
PROPRIÉTÉS IMMUTABLESReact.renderComponent(<Counter value="42" />, document.querySelector("body"));
COMPOSABILITÉvar MultiCounter = React.createClass({ render: function() { return ( <div> <Counter value="1" /> <Counter value="2" /> <Counter value="3" /> </div> ); }});
COMPOSABILITÉvar MultiMultiCounter = React.createClass({ render: function() { return ( <div> <MultiCounter/> <MultiCounter/> <MultiCounter/> <Counter/> </div> ); }});
DÉCORATEURvar Panel = React.createClass({ render: function() { return ( <div className="panel"> <h1>{this.props.title}</h1> <div className="panel-body"> {this.props.children} </div> </div>; ); }});
DÉCORATEURvar MyPanel = React.createClass({ render: function() { return ( <Panel title="Hello World"> <p>How are you today?</p> </Panel> ); }});
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)
C'EST SUPER RAPIDE
Voila. Des questions ?