Débuter avec ReactJS

Pour être clair dès le debut de cet article, je ne vais pas écrire un énième tuto sur l’utilisation de ReactJS.
J’ai eu récemment le besoin de me former sur cette librairie JS et j’aimerai en profiter pour partager les différentes ressources que j’ai pu utiliser et faire un retour d’expérience sur ma première utilisation de ReactJS sur un projet.

Dans un premier temps lorsque j’ai commencé mes recherches, je me suis rendu compte que les outils permettant de développer en Front évoluaient très très rapidement.

Habitué a développer sur des frameworks tels que Symfony, Laravel et des CMS comme Magento et WordPress, disons que niveau front, je m’arrêtais a des templates html, twig, blade et le bon vieux jQuery…

1ère étape, re-découvrir le JavaScript

J’ai donc découvert l’évolution de l’univers JS depuis 2015. Et j’ai commencé mes recherches par les nouveaux standards de langages. ES6, ES7, j’avoue qu’au début j’était un peu perdu.

Pouvoir écrire des classes, faire des imports, différentes portées des blocs, l’asynchrone avec les promises etc, c’est top !

C’est top mais…

En fonction des exemples, tutos et POC qu’on trouve sur le net, il y a une multitude de syntaxes et de bonnes pratiques utilisées et conseillées par la communauté.

Afin de mettre un peu d’ordre dans toutes ces nouvelles façons de coder en JavaScript, j’ai fait le choix de tester les différentes syntaxes (import, require, for in.., for of.., function(), () = {}, etc.). Le fait de tout tester permet donc de comprendre et de ne plus être perdu dans les différents exemples qu’on peu trouver, qui adoptent régulièrement des syntaxes différentes.

A noter, que si vous souhaitez utiliser toutes ces « nouveautés » dans vos projets, il faut penser a utiliser un outil tel que Babel qui permet de « réécrire et standardiser » le code JS nextgen en code JS reconnu par la majorité des navigateurs. Personnellement j’ai eu rapidement des soucis de compatibilité sur des navigateurs autres que Chrome lors de mes tests sans Babel.

Après avoir fini cette découverte des nouvelles possibilités de JavaScript, je me suis rendu compte que l’utilisation de jQuery dans mes futurs projets n’était pas forcement évidente et qu’un essai en pur JS pourrait être prometteur.

Quelques ressources pour re-découvrir le JavaScript :

• ES5, ES6, ES2016, ES.Next: What’s going on with JavaScript versioning?
  
• ES6 to ES5
• Native ECMAScript modules: dynamic import()
• ES6-for-humans

2ème étape, tester ReactJS

Passons le débat sur les différentes librairies disponibles aujourd’hui, le projet sur lequel je devais travailler se devait d’être développé sous ReactJS. Pour pouvoir avancer dans l’apprentissage de cette librairie, j’ai dans un premier temps développé la bonne vieille todolist.

Pour cela je suis parti du project starter « react create app » et fortement inspiré d’articles tutos comme celui-ci puis j’ai recherché des bonnes pratiques et des modules permettant d’améliorer le code de mon application.

Maintenant de la donnée !

Après l’étape basique de la todolist, il fallait s’attaquer a l’utilisation d’une source de données. Pour cela l’utilisation d’une API me semblait évidente.

Afin de pouvoir tester les appels API, j’ai donc décidé de faire une application simple qui permettait de récupérer un flux de données depuis l’API permettant de récupérer de bonnes vielles blagues de Chuck Norris.

3ème étape, aller plus loin!

Au fur et a mesure de mes recherches, j’ai découvert plusieurs modules intéressants comme Flux, Redux, que je vous conseille de regarder avec attention pour vos futurs projets.

Voici une liste de liens utiles pour aller plus loin avec ReactJs:

• Redux: Ce module permet de gérer des états dans l’application a l’aide de « reducers » et d’actions.
• ReactJS & Redux pour des lendemains qui chantent : Tutoriel sur l’utilisation de ReactJS + Redux
• React-color: Ce module est utile si vous avez besoin d’un color picker qui peut être modifié facilement.
• Apprendre React.js: Chaine youtube avec 10 vidéos – de la base a la maîtrise de ReactJs
• Redux et JWT: Ajoutez une authentification type JWT sur votre application ReactJS + Redux
• Advanced patterns: Quelques exemples de patterns ReactJS