Introduction à React

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

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

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

DÉCRYPTAGE
Déclaration du composant
displayName: "Counter",

DÉCRYPTAGE
Définition de l'état initial
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
},
React effectue un rendu intégral d'un composant à chaque mise à jour
des données qui lui sont associées

DÉCRYPTAGE
Définition de la structure sémantique du composant
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 idempotente
pouvant décrire votre UI à un moment précis dans le temps
de façon extrêment fiable

JSX
/** @jsx React.DOM */
return {value: 0}
},
},
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 IMMUTABLES
return {value: parseInt(this.props.value, 10) || 0}
},
},
return (
<div>
<span>{this.state.value}</span>
<a onClick={this.handleClick}>increment</a>
</div>
);
}
});

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

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

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

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

DÉCORATEUR
var MyPanel = React.createClass({
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)

Introduction à React

Contenu connexe

Tendances (20)

En vedette (20)

Similaire à Introduction à React (20)

Dernier (19)

Introduction à React