Comment apprendre React JS en 2024 ?

Comment apprendre React est une priorité pour de nombreux développeurs JavaScript cette année.

Une enquête récente sur l’état de la JS a montré que de nombreux développeurs se contentent de React pour créer des applications web modernes.

Pour apprendre React, vous devez avoir des bases en HTML, CSS et Javascript. Ensuite vous devrez apprendre les fondamentaux de React JS sur le site officiel, YouTube, FreeCodeCamp ou d’autres ressources d’apprentissage. Finalement, pratiquez avec des projets concrets.

Cependant, en raison de sa popularité et de la demande de travail, il y a encore beaucoup de développeurs JavaScript qui veulent apprendre React.

Dans ce guide, je souhaite donner aux débutants un aperçu complet de la façon d’aborder l’apprentissage de React sans se laisser distraire ou submerger par d’autres sujets en cours de route.

Comment commencer avec React

💡 Vous ne savez pas quoi coder en React ? Alors mon article [7 projets ReactJS pour les débutants] est fait pour vous !

Apprendre React ou JavaScript en premier lieu ?

Vous devez comprendre au moins les bases de JavaScript, souvent appelé JavaScript ES5, et avoir des connaissances décentes sur HTML et CSS. React utilise également la syntaxe JavaScript, le plus souvent appelée JavaScript ES6 et au-delà (ES7, ES8, ES9). C’est pourquoi il est logique de se familiariser avec au moins JavaScript ES6 pour apprendre React.

De nombreuses personnes recommandent d’apprendre le développement web et toutes les bases de JavaScript comme préalable à l’apprentissage de React.

Personnellement, Je pense que la plupart des concept JavaScript peuvent être appris en cours de route en apprenant React.

Apprendre React ou jQuery ?

Historiquement, jQuery a comblé le fossé entre le JavaScript “vanilla” et les bibliothèques modernes tels que React, Angular et Vue. Depuis, le vent a bien tourné et le Javascript de base a tout ce qu’il faut pour pouvoir se passer de jQuery !

💡 En 2024, plus besoin d’apprendre jQuery pour développer des applications web.

Apprendre React ou Angular ?

Angular est un framework de développement mobile et web à part entière. React est une bibliothèque uniquement destiné au développement de l’interface utilisateur, qui peut être transformé en une solution à part entière avec l’aide de bibliothèques supplémentaires.

React semble plus simple à première vue, et il faut moins de temps pour commencer à travailler sur un projet React.

Angular est plus complexe et prend un certain temps à maîtriser. Pourtant, c’est un outil puissant qui offre une bonne expérience de développement web.

Les deux sont mis à jour en permanence pour suivre le rythme de la concurrence. Par exemple, alors que React était censé gagner grâce à son DOM virtuel, Angular a égalé le score en mettant en œuvre la détection des changements.

Alors qu’Angular était considérée comme gagnante en raison de son développement par une entreprise faisant autorité telle que Google, l’immense communauté dévouée de React a entièrement compensé la réputation de Google et a rendu React similaire à Angular.

Au final, le choix React vs Angular est une question de préférence personnelle, de compétences et d’habitudes. En tant que débutant en programmation, vous gagneriez probablement à commencer par React.

Apprendre React ou Vue JS ?

Vue.js et React sont tous deux d’excellentes technologies pour créer des UI. Pour choisir le meilleur outil pour votre prochain projet, vous devez prendre en compte un certain nombre de facteurs, notamment votre cas d’utilisation spécifique, vos besoins, l’environnement, la disponibilité des développeurs, le budget et le calendrier de travail.

Vue est léger, facile à apprendre et agréable à écrire. Grâce à sa syntaxe familière et à l’utilisation de composants, l’intégration ou la migration de projets existants vers Vue est plus rapide et plus facile. Pour cette raison, Vue.js, comme React, est idéal pour les start-ups mais peut tout aussi bien être utilisé dans des applications à grande échelle.

En termes de performances, Vue.js est comparable à React. Cependant, les résultats finaux dépendent essentiellement des efforts d’optimisation et de la taille de l’application. La documentation est excellente, expliquant tout dans les moindres détails.

Vue dispose de paquets officiels pour la gestion des états, le routage ou le rendu côté serveur, qui sont accompagnés d’une prise en charge actualisée et assurent la synchronisation dans tout votre système. Avec Vue CLI 3 et Vue UI, la mise en place d’un projet et la préparation de son déploiement sont rapides comme l’éclair. Cela permet de créer des MVP de manière rapide et efficace.

React, en revanche, est un vétéran du domaine de la JS. Avec le soutien d’entreprises, d’une grande communauté et d’un écosystème encore plus vaste, React est idéal pour créer des applications complexes de niveau entreprise. De plus, le marché de l’emploi est en plein essor avec des développeurs React expérimentés, vous ne serez donc pas à court de spécialistes. Grâce à sa maturité et à sa communauté, il est plus ou moins garanti d’obtenir de l’aide et une réponse rapide et détaillée.

Pourquoi apprendre React ?

React est un projet open-source créé et maintenu par Facebook. Cette bibliothèque front-end est une des plus populaires au côté de Vue.JS et Angular. Apprendre React vous permettra de créer des sites webs mais aussi des applications mobile et des projets en Réalité Virtuelle (VR).

💡 Vous voulez en apprendre plus sur le développement front-end ? Alors vous allez aimer mon article pour tout savoir sur le développement front-end

La documentation React

Se référer à la documentation d’une bibliothèque en tant que débutant en développement web peut être intimidant. Mais je crois fermement que c’est la meilleure façon d’apprendre quelque chose de nouveau.

Savoir lire des pages de documentation fait parti des compétences utiles à la carrière de développeur. Et vous êtes chanceux, celle de React est bien écrite et dispose d’une version en français avec un tutoriel !

Les meilleures ressources en ligne

En dehors de la documentation et tutoriel officiels et en francais de reactjs, il existe de nombreuses cours très qualitatifs sur internet. Vous trouverez des tutos au format texte et video mais aussi des livres et des cours interactifs.

Parmi ceux-ci, il existe, par exemple :

• Le tutoriel OpenClassrooms
• Des livres pour apprendre React
• Des chaînes YouTube comme celle de Grafikart
• Des chaînes Twitch
• Des cours interactifs comme FreeCodeCamp
• Des tutoriels avancés sur Udemy

Pour plus de ressources, découvrez mon classement des meilleurs cours pour apprendre à coder gratuitement.

Les concepts importants en React

Avant d’aller plus loin, soyez sûr de bien avoir compris les concepts clés en React. Ceux-ci sont :

• la syntaxe JSX en React
• Les Components en React
• Les Props en React
• Le State en React

Réaliser des projets

Après avoir suivi le tutoriel pour débutants de la documentation React et appris les bases de React en partant de zéro, continuez à apprendre en construisant vous-même un projet avant d’apprendre toute autre technologie. Il n’est pas toujours facile de trouver des idées de projet, mais il y a beaucoup d’inspiration.

Dans un autre article, je vous propose des idées de projets en javascript pour débutants, une bonne idée serait de reprendre ces projets et de les adapter en React en utilisant la puissance de la lib de Facebook.

Coder en React en ligne

Comment démarrer un projet en React ? Si vous voulez faire vos premiers pas et coder directement, sans rien installer, vous pouvez utiliser CodePen. J’ai d’ailleurs crée un boilerplate pour que vous puissiez commencer à coder directement avec React JS sur Codepen.

Installer React

Sinon, pour des plus gros projets, vous pouvez apprendre à installer et configurer React quelque soit de vos système d’exploitation.

1. Installer Node JS

Avant de pouvoir utiliser react, on doit avoir node js sur notre machine. Node js permet d’executer du code en javascript en dehors d’un navigateur. En plus Node vient avec NPM qui nous permet d’installer des packages en Javascript (dont React JS).

Rendez vous donc sur la page de téléchargements de Node JS puis choisissez votre OS.

2. Installer create-react-app

Comme React est une bibliothèque et pas un framework, on a besoin de plusieurs librairies annexes (comme ReactDOM) pour pouvoir commencer un projet en React.

Heureusement, Facebook a créé un package JS pour commencer facilement un projet React, ce projet s’appelle create-react-app.

La solution de Facebook et de l’équipe React pour vous aider à démarrer un projet React léger et sans configuration. 99 % des tutoriels React disponibles s’ajoutent à ce projet de démarrage pour vous permettre de démarrer avec React. Vous pouvez vous concentrer uniquement sur l’apprentissage de React, tandis que tous les outils qui l’entourent sont pris en charge par create-react-app.

Pour l’installer, ouvrez un terminal et tapez :

npm install -g create-react-app

3. Configurer son projet avec create-react-app

Une fois create-react-app installé, il ne vous reste plus qu’à vous rendre dans le dossier dans lequel vous voulez initialiser votre projet (avec la commande cd) puis de taper :

npx create-react-app <NOM_DE_VOTRE_PROJET>

4. Lancer son projet React

Votre projet est maintenant créé, vous pouvez vous rendre dedans et taper npm start pour le lancer, rendez vous ensuite sur localhost:3000 pour voir votre application ! À partir de maintenant, chaque changement que vous apportez au code mettra à jour votre application React sans que vous deviez rafraîchir la page.

💡 Note : Si vous n’avez pas d’éditeur de texte, je vous conseille Visual Studio Code : Un IDE léger et populaire qui est la solution idéale pour les développeurs de React. Visual Studio Code (VS Code) vient avec un éditeur de texte pour apprendre le développement React et un terminal (ligne de commande) pour démarrer votre projet React et installer les bibliothèques dont vous avez besoin.

React JS avancé

Après avoir appris les bases de React, les props, states et la syntaxe JSX de React pour renvoyer du HTML valide en JavaScript, vous pouvez aller plus loin avec les concepts plus avancés de React. Parmi ces concepts, il y a :

• Les Hooks en React
• Les Higher Order Components en React
• Render Prop Components en React
• Utiliser correctement le Context en React

En connaissant ces techniques React avancées, vous devriez être à l’aise pour vous lancer dans le développement d’applications React plus complexes.

Les librairies complémentaires à React

Après avoir appris uniquement React et vous être senti à l’aise avec ses détails de mise en œuvre de base et avancés, il existe de nombreux parcours d’apprentissage que vous pouvez suivre pour améliorer vos compétences React. L’écosystème de React n’est pas une affaire d’opinion, mais d’innovation et d’envergure. Quelques recommandations :

React Router

React vient sans moyen de navigation. Je vous l’ai répété plusieurs fois dans cet article mais React n’est pas un framework mais une libraire. De ce fait, la bibliothèque react ne vient pas avec un système de navigation. Plusieurs package ont vu le jour et pour commencer facilement, je vous conseille React Router.

AWS Amplify

Pour apprendre facilement AWS (les Amazon Web Services), AWS Amplify vous permet de lancer facilement des back-ends pour vous concentrer sur le front, ici React.

Firebase

Firebase se marie également très bien à React ! L’outil Cloud de Google vous permettra de vous concentrer sur votre application front-end en utilisant des technologies back-end puissantes.

TypeScript

Si vous choisissez d’utiliser Typescript, non seulement le code JavaScript vanilla sera tapé avec TypeScript, mais aussi vos composants React et tout ce qui les accompagne. Je vous déconseille de commencer à apprendre React en utilisant Typescript car ça rajoutera juste de la complexité à votre apprentissage.

Redux

Redux est une bibliothèque de gestion d’état populaire pour JavaScript. Là encore, apprenez d’abord React et sa gestion d’état intégrée avant d’accéder à une bibliothèque de gestion d’état externe sophistiquée, destinée à être utilisée dans des applications complexes et à grande échelle. React est déjà fourni avec de nombreux outils pour gérer l’état dans votre application. La grande majorité des applications React n’ont même pas besoin de Redux ou d’une autre bibliothèque de gestion d’état. Apprenez à gérer l’état dans React avant de lancer une autre bibliothèque sur le problème. Redux rend React plus compliqué pour les débutants.

Gatsby

Gatsby.js est devenu assez populaire ces derniers temps. C’est la solution idéale pour créer des sites web statiques tels que des sites web personnels, des blogs et des pages d’accueil. Cependant, Gatsby est livré avec ses propres apprentissages tels que GraphQL, son grand système de plugin, et les problèmes qui viennent avec les applications React rendues côté serveur. Ne confondez donc pas Gatsby.js avec un apprentissage plus facile de React. Il facilite l’écriture de sites web statiques avec React, mais pas l’apprentissage de React lui-même.

D’ailleurs ce Blog tourne sur Gatsy et je vous explique tout dans mon article Comment construire des sites optimisés avec Gatsby JS ?

Apprendre React Native

Je ne pourrais finir cet article sans parler de react-native. Une traduction en français possible de philosophie de react est “écrire une fois, faire tourner partout”. En d’autres termes, vous écrivez votre code en React pour votre application web et le but est de pouvoir réutiliser une bonne partie de ce code pour vos autres projets. Dans ces autres projets figurent le développement d’applications mobile et meme la réalité Virtuelle !

C’est là que react-native et viro entre en jeu. Avec le premier, vous pourrez coder des applications cross-platforms (iOS, Android, Windows Phone, Desktop et web) et avec la seconde vous pourrez créer des univers en VR compatible avec les masques VR comme Oculus Rift.

Les meilleurs livres pour apprendre React

Si vous préférez apprendre dans les livres, je vous en ai sélectionné 3 en français. Investir dans un support comme un livre peut être une excellente idée pour faciliter votre apprentissage de React.

React.js: Réalisez une application web avec React

Concevez des applications mobiles avec React Native

React - Développez le Front End de vos applications web et mobiles avec JavaScript

Apprenez React en 2024

Et voilà, c’est tout de mon côté. Vous savez maintenant pourquoi et comment apprendre React JS efficacement et gratuitement.

Restez curieux, pratiquez tous jour en vous mettant les mains dans le cambouis, faites-le publiquement et voyez votre apprentissage comme un marathon et pas comme un sprint. Mettez-vous au défi d’améliorer vos compétences en tant que programmeur et devenez un développeur React cette année 2023 !