Petit tour d’horizon de React.JS

Ceci est mon premier article, alors je vous demande un peu d’indulgence, et je reste une (très) jeune développeuse débutante…

Petit tour d’horizon de React.JS

Pour commencer, React a été développé par FACEBOOK à des fins internes afin de sortir des problématiques d’un code un peu poussiéreux et obscur, que pas grand monde ne s’aventurait à toucher. Après quelques temps, les gars (et les FILLES hein !!) se sont dit : “ Mais nous venons de créer un truc ‘AMAZING’ ” et ont bien voulu le partager avec le commun des mortels : NOUS. ATTENTION le premier qui me dit que React est un FRAMEWORK MVC, il va m’entendre !!! C’est plutôt une librairie JavaScript qui peut être considérée comme le V (View) dans le modèle MVC. React ne fait pas tout mais le fait très bien. Pour ne citer que lui, Instagram repose sur React et pour ma part je trouve que c’est plutôt une belle réussite ! React est souvent utilisé pour le développement d’applications dites ‘single page’ (SPA), et dont les vues changent constamment (par exemple Instagram, et non je n’ai pas d’actions chez Instagram).

Un peu d’explications :

React crée son propre DOM virtuel où vos composants prennent vie. Bon ils ne font pas encore le café ! En bref, il le gère pour vous. Cette approche vous donne une grande flexibilité et des gains de performance incroyables. React regarde quels changements doivent être apportés dans le DOM et le met à jour en conséquence sans tout recharger à chaque fois. De cette façon, il rend les mises à jour très efficaces. React donne la possibilité de créer vos propres composants qui seront réutilisables plus tard et/ou peuvent être combinés. C’est un gain de productivité énorme car définir et manipuler ses composants devient ultra simple. React se démarque aussi par le fait que vous pouvez l’exécuter coté serveur (en utilisant Node par exemple) à des fins de performance, pour le référencement, le partage de code et la flexibilité globale. React utilise une syntaxe spéciale appelée JSX, proche de XML, et qui vous permet de mélanger en quelque sorte du HTML et du JavaScript. STOP, ne hurlez pas comme ça !! Ce n’est pas une obligation mais il est fortement conseillé d’essayer la nouvelle syntaxe car l'écriture de vos composants devient un jeu d'enfant, le code reste très lisible et propre (cela n’engage que moi bien sur). Avec l’habitude, cela deviendra ‘naturel’.

Et le MVC ?

Pour finir, si vous voulez une application relativement complexe, il vous faudra tout de même ajouter le M et C du modèle MVC, par exemple avec la recette suivante :

• Une dose de modèles et de collections via Backbone JS
• Une dose de Routes, via Backbone JS ou React Router
• Une dose de React.JS.
• Une dose de Node.JS, si vous voulez que le DOM soit rendu coté serveur.

En conclusion longue vie à JS !

Exemple de code

(extrait du site http://facebook.github.io/react/ ) Allez hop pour bien démarrer : Simple non ! Et encore plus simple, une TODO : Alors franchement, c’est propre non ? Résultat :   Alors, si toi aussi, tu veux te lancer dans cette jolie aventure, des petits tutoriels sont disponibles tels que ceux-ci : https://scotch.io/tutorials/learning-react-getting-started-and-concepts https://egghead.io/lessons/react-hello-world-first-component