On vous a parlé de cette technologie et vous voulez vous y frotter ? Vous ne savez pas comment commencer avec toutes les technologies qui gravitent autour : React, Flux, Redux, Webpack, JSX, Babel, etc. ? Bref, vous êtes perdus. Mais, vous êtes au bon endroit ! Nous allons voir dans ce premier article les principes de ReactJs ainsi que la partie routing.
ReactJs
ReactJS est une librairie JavaScript, créée par Facebook, utilisée uniquement pour le côté “vue” dans le paradigme MVC. Il est donc différent des autres frameworks JavaScript comme AngularJS ou EmberJS, qui sont des frameworks complets de ce point de vue. Ici, les exemples proposés sont entièrement en JavaScript (NodeJS en backend), mais rien ne vous empêche d’utiliser React comme librairie de vue dans un projet Java !
Intérêt de React face aux autres frameworks
La compétition est rude dans les frameworks JavaScript, notamment entre Angular (1 et 2), Ember et ReactJS. C’est peu de le dire ! Chaque framework a ses spécificités et le choix d’un d’entre eux est très compliqué.
L’intérêt de React réside tout d’abord dans son approche composant, complètement différente des autres, et qui, au lieu de laisser notre JavaScript modifier le DOM, écrit du HTML dans ses composants JavaScript en interne. On obtient alors un code plus compréhensible. Bien sûr, tout cela est très subjectif et il faut voir avec sa sensibilité personnelle et les contraintes que l’on a ! React s’intègre parfaitement avec les nouveautés de ECMAScript 6, dont la création de classe ou les “arrow methods”.
Un autre point positif est l’existence de React Native, permettant de créer des applications mobiles à la manière de Cordova/Ionic pour Angular. De plus, React a été créé en se concentrant sur les performances, utilisant un DOM virtuel pour rafraîchir uniquement les composants qui ont été modifiés et non toute la page (il reste cependant plus lent que du JavaScript pur).
Concernant les webcomponents (avec le framework Polymer par exemple), ceux-ci ont un but différent de React. En effet, React va principalement chercher à synchroniser les données et le DOM. Alors que les webcomponents vont être principalement créés pour encapsuler des composants. Les deux approches sont finalement complémentaires et on peut donc utiliser Polymer avec React.
Le fonctionnement de ReactJS
ReactJS fonctionne en créant des “components”, correspondant à un composant dans votre page HTML. Voici un exemple de création de composant :
Ici quelque chose peut vous surprendre : on écrit du XML (HTML) dans du JavaScript ! Il s’agit du langage JSX (Ah le voilà !), pour “JavaScript Xml”. Cela nous permet de gérer le rendu de notre composant, dans la méthode “render” en y injectant directement le HTML que nous voulons voir apparaître. On peut bien entendu se passer de cette notation, qui peut déstabiliser, en utilisant du JavaScript pur :
“Bon ! J’ai affiché du HTML via du JavaScript C’est bien, mais ça je peux le faire sans framework…”
L’intérêt de ReactJS est que ses composants correspondent à un élément de la page, avec son état propre et ses actions associées. Le tout géré directement à l’intérieur du composant lui-même ! Ils ont leur propre état, leurs propres données et sont indépendants les uns des autres. Autant dire que créer une bibliothèque en React correspond simplement à créer un composant auquel on peut donner une configuration !
Différentes méthodes et champs sont disponibles pour créer un composant :
- props : ce sont les propriétés qui sont données en paramètre du composant. Il s’agira souvent d’une configuration.
- state : contient l’état interne du composant. Celui-ci peut être la liste des éléments à afficher, une valeur ou une configuration.
- getInitialState : méthode permettant d’initialiser le “state” interne du composant. La méthode retourne un objet qui sera ensuite mappé sur this.state.
- setState : méthode permettant simplement de mettre à jour le “state”. Elle est principalement appelée de l’extérieur pour mettre à jour les données.
- componantDidMount : appelée lors de la création du composant, elle permet d’initialiser des méthodes et données.
- componantWillUnmount : Appelé lors de la destruction du composant. Peut être utilisé pour transmettre des données lors de cette phase.
- render : se charge de l’affichage du composant (comme vu auparavant).
Il existe encore d’autres méthodes, mais ce sont ici les principales. On peut alors créer des composants plus compliqués, comme une ToDoList qui garde la liste des todos dans son état interne :
Exemple d’une ToDoList / Exemple d’une toDoList avec un filtre
Dans cet exemple, on a un composant TodoListApp, qui contient les actions et la liste des éléments de notre ToDoList. On lui passe un “name”, que l’on retrouve ensuite dans son objet interne “props”. On utilise “getInitialState” pour initialiser l’objet interne “state” avec une liste d’objets prédéfinis. Enfin, l’action lié au clic sur le bouton ajoute à notre liste un nouvel objet. Ici, il s’agit d’un exemple présentant le fonctionnement d’un composant. On aurait pu créer 3 composants différents (en plus du composant racine) : un pour la liste, un pour le filtre et un pour la ligne d’ajout.
Le routing avec ReactJS
On peut bien entendu utiliser ReactJS pour construire des applications bien plus complexes. Cela nécessite une gestion de différentes pages d’application et donc l’introduction d’une notion de routing. ReactJS possède une librairie de routing assez performante via la librairie React Router. Cette librairie fournit un composant permettant de définir les routes de notre application et les composants qui y seront affichés. Bien entendu, il embarque la notion d’historique HTML5. Ce qui permet de pouvoir utiliser le retour arrière dans notre application.
Afin d’introduire des routes dans notre application, nous n’allons plus utiliser la méthode React.render avec notre composant, mais avec un composant “Router”, qui décrira les routes de notre application, avec le composant associé, ainsi que les paramètres de routing (comme par exemple le type d’historique à utiliser).
Afin de naviguer entre nos routes, il suffit d’utiliser un composant “Link”, avec son attribut “to”. Cela fera un lien vers la route définie. Cela rend simple l’utilisation d’un composant pour une route, mais on peut aussi mettre en place des routes imbriquées, permettant de créer de véritables applications !
On peut bien entendu passer des paramètres à nos routes, pour personnaliser les données affichées. Cela se définit simplement par l’ajout dans notre chemin “/:nomDeVariable”. Cette variable sera récupérée dans les props du composant cible, sous “this.props.params.nomDeVariable”. Il est alors aisé de l’utiliser, en faisant par exemple un appel AJAX pour récupérer les données de notre objet.
Enfin, pour obtenir une application complexe, avec des composants imbriqués, il suffit dans notre configuration des Route incluses dans une autre Route. Ainsi, si nous avons une configuration ainsi :
On obtient les routes “/”, “/view1” et “/view2”, avec comme composant principal App, qui contiendra soit le composant View1, soit View2, selon la route sur laquelle on est. Pour inclure le composant imbriqué, il suffit d’ajouter à l’endroit voulu dans la méthode render de App :
Voici un exemple d’application utilisant les différentes techniques qui ont été présentés au niveau du routing :
Application React simple avec routing
Conclusion
Voilà, maintenant vous savez comment créer, gérer un composant et développer une application avec ReactJS. Le mieux pour vous exercer est d’essayer de créer des composants simples, puis de plus en plus complexes afin de créer une page entière ! La prochaine étape est de lier la vue avec un serveur nodeJS et faire du rendu côté serveur, ce que nous verrons dans un prochain article !
