introduction à react

26
INTRODUCTION À REACT @N1K0

Upload: thibault-martinez

Post on 24-May-2015

178 views

Category:

Engineering


2 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Introduction à React

INTRODUCTION À REACT@N1K0

Page 2: Introduction à React

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

Page 3: Introduction à React

REACT▸ Open Source (MIT)

▸ développée par Facebook▸ MVC

Page 4: Introduction à React

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

Page 5: Introduction à React

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

Page 6: Introduction à React

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"));

Page 7: Introduction à React

EXEMPLERestitution HTML :

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

Page 8: Introduction à React

DÉCRYPTAGEDéclaration du composant

var Counter = React.createClass({ displayName: "Counter",

Page 9: Introduction à React

DÉCRYPTAGEDéfinition de l'état initial

getInitialState: function() { return {value: 0} },

Page 10: Introduction à React

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

Page 11: Introduction à React

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!"))); }

Page 12: Introduction à React

DÉCRYPTAGE"Montage" du composant sur un nœud DOM réel

React.renderComponent(Counter(), document.querySelector("body"));

Page 13: Introduction à React

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

Page 14: Introduction à React

COMME UN SERVEUR WEB

Page 15: Introduction à React

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"));

Page 16: Introduction à React
Page 17: Introduction à React

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

Page 18: Introduction à React

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> ); }});

Page 19: Introduction à React

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

Page 20: Introduction à React

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

Page 21: Introduction à React

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

Page 22: Introduction à React

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>; ); }});

Page 23: Introduction à React

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

Page 24: Introduction à React

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)

Page 25: Introduction à React

C'EST SUPER RAPIDE

Page 26: Introduction à React

Voila. Des questions ?