Devenez Réactifs

par OBELERY le 6 mars 2018

Le Cepegra vous propose une toute nouvelle formation d’initiation à React, technologie JavaScript made in Facebook qui a le vent en poupe et qui pourrait bien révolutionner votre manière de coder, que vous soyez Webdesigner, Front-end ou même développeur.

Cette dernière décennie, les codeurs du web avaient pris pour habitude d’utiliser la librairie jQuery pour manipuler et interagir facilement avec le DOM. Mais en 2018, cette technologie devient doucement obsolète car le JavaScript dit « Vanilla » propose maintenant des fonctionnalités similaires et fonctionnant dans la majorité des navigateurs. Autre constat  : les interfaces modernes nécessitent de nombreuses interactions qui, si elles sont codées de manière traditionnelle avec jQuery, génèrent un code souvent difficilement maintenable et particulièrement long. Pour répondre à ces nouveaux besoins, Google sortira Angular, et d’autres frameworks verront aussi le jour, comme Ember, Knockout…

En 2013, le géant Facebook propose React, se voulant moins contraignant et plus évolutif. Si React est directement utilisé sur la plateforme Facebook, on le retrouve aussi sur Instagram, WhatsApp, Netflix, Airbnb, Amazon Video, eBay, Dropbox, Spotify et bien d’autres…

Pourquoi apprendre React ?

React propose une courbe d’apprentissage facile et rapide. Quelques bases en JavaScript suffisent pour appréhender rapidement les différents concepts proposés par le framework de Facebook. Plus que de nouvelles instructions, React instaure une méthodologie de codage lisible et maintenable. Terminé l’effet « code spaghetti », le code s’articule en composants ayant chacun une fonctionnalité spécifique. Cette approche permet une forte réutilisabilité de codes déjà produits sur d’autres projets.

Si React se base sur les syntaxes JavaScript les plus modernes (ES6 et plus via Babel.js), il propose également un « langage » de description propre appelé JSX permettant d’écrire du JavaScript sous forme de balise type markup apparenté au HTML. Ces balises représentent une instance d’un composant. Segmentée de la sorte, une application React devient alors facilement manipulable et compréhensible.

Travailler avec React est beaucoup plus productif

Le framework prend en charge la gestion des événements et des états (mémoire de votre application), et vous laisse ainsi vous concentrer sur les fonctionnalités principales de votre programme. Coder un formulaire interactif, opération traditionnellement pénible et longue nécessitant une gestion complexe des événements, devient un jeu d’enfant ; décrivez votre formulaire, précisez les champs liés et les opérations désirées et React s’occupe du reste…

Au niveau technique, travailler avec React vous permettra d’obtenir des applications plus rapides et fluides

Contrairement à ce que l’on avait l’habitude de faire avec jQuery, React ne manipule pas directement la structure HTML (le DOM) : toute opération est d’abord effectuée en mémoire sur base d’une structure virtuelle ; React évalue ensuite si une modification sur le DOM réel est nécessaire et, si probant, applique la modification de manière ciblée. On évite ainsi le parsing intempestif, source de lenteurs et complications.

Si React est principalement utilisé en front-end, il n’est pas absolument cantonné à ce dernier

Côté serveur, il peut être très performant comme l’a démontré Netflix lors de son passage en backend à React avec une augmentation de près de 50 % des performances.

La modularité de React lui permet ainsi de proposer d’autres finalités que la génération d’HTML. Il est ainsi possible avec React Native de réaliser une application mobile native sur base d’un code React quasi identique à celui d’un site web en changeant simplement la « sortie ».

D’autres finalités existent : création d’applications desktop (React Native Desktop) ou même React VR pour la réalisation d’application/sites en réalité virtuelle.

Vous aimeriez en savoir plus ? Le Cepegra vous propose de venir découvrir les principes fondamentaux de React, de la mise en place d’un workflow moderne en passant par le JSX, les notions d’états, de composants, de routeurs, etc.

Prochainement programmée au second semestre, vous pouvez déjà consulter le programme de cette formation sur :
formation-cepegra.be/formation/react-initiation/