8 étapes pour devenir développeur React

Qu'est-ce qu'un développeur web ?

Un développeur est un bricoleur qui exploite la technologie pour résoudre des problèmes et gagner du temps. Le temps est notre ressource la plus précieuse, et tu peux vendre ta compétence.

Cette activité exploite ton ingéniosité, car il y a plusieurs moyens de résoudre et appréhender le même problème. Tu vas réfléchir à des solutions, tu vas muscler ton cerveau car tu voudras toujours faire mieux. Tu voudras proposer la meilleure solution possible. Elle peut être meilleure en terme de simplicité, en terme d'argent économisé, en terme de temps gagné et en terme d'efficacité.

Comment devenir développeur web ?

Il faut bien que tu comprennes que monter en compétence prend du temps et surtout beaucoup de pratique. Si tu veux voir des résultats, tu vas devoir te mettre au travail. Pour être excellent, il faut charbonner, il n'y a pas de secret.

Mais il ne faut surtout pas se mettre la pression ou se fixer des objectifs trop compliqués.

Faire du développement est avant tout un plaisir, et tu n'as pas envie de te dégoûter du métier. C'est un marathon, tu n'as pas besoin de sprinter et te dépêcher. Tu vas te fatiguer pour rien. Tu as le temps.

Puis-je apprendre le développement et en faire mon métier ?

Si tu te pose cette question, la réponse est oui.

Je fais du développement depuis plus de 5 ans et je vais te raconter mon parcours pour devenir développeur web, et les étapes qui m'ont permis d'être totalement autonome.

Allons-y avec la première étape que je recommande à toute personne qui souhaite se lancer.

1. Maîtriser le terminal

La premier conseil que donne à qui veut se lancer, c'est de comprendre et utiliser son terminal. Pourquoi donc ? Que tu sois sur téléphone, tablette ou ordinateur, ton appareil est constitué des mêmes pièces :

une carte graphique,
un processeur,
de l'espace de stockage,
de la mémoire,
un écran,
système d'exploitation

Pour utiliser l'appareil, tu interagis avec une interface graphique. Le terminal, c'est l'interface non-graphique qui te permet d'interagir avec ton appareil. Tout ce que tu peux faire avec l'interface graphique peut être fait via le terminal : Fermer un onglet, vider ta corbeille, déplacer des fichiers …

Et quand tu vas développer tes premiers programmes, tu seras amené à beaucoup utiliser le terminal. Pour rentrer des commandes, installer les mises à jours, etc.

Quand tu auras développé ton premier site, tu voudras le mettre en ligne et le partager à tes amis et à ta famille. Comprendre comment les sites sont mis en ligne et accessibles au public fera de toi un meilleur développeur.

Je te conseille d’installer Ubuntu ou Linux, qui est un système d’exploitation gratuit. Ils sont utilisés sur la plupart des serveurs qui hébergent les plus grands sites comme Netflix et YouTube.

Comment utiliser le terminal ?

Je te donne plusieurs ressources pour apprendre à utiliser ton terminal en installant Ubuntu. Certaines sont gratuites, et d'autres sont payantes.

Tu peux l’installer sur Windows avec VirtualBox qui va simuler un environnement Ubuntu sur ta machine. C’est parfait si tu as 20 à 30 Go de stockage pour Ubuntu.
Tu peux aussi t’acheter un deuxième disque dur et installer Ubuntu dessus. Ça te permettra d’alterner entre Windows et Ubuntu et de garder ton environnement Windows clean.
Tu peux aussi installer Ubuntu directement sur Windows sans passer par VirtualBox avec WSL2. Pour ce faire il te faut Windows 10 minimum et le support Hyper-V Virtualization.

2. Apprendre la syntaxe HTML et le CSS

Maintenant que tu utilises un environnement Linux propice au travail, je te conseille de développer tes premiers sites directement dessus. Et c’est pour plusieurs raisons. Il faut à tout prix éviter les distractions pour apprendre de manière efficace. Ton cerveau est limité en énergie et si tu utilises beaucoup les réseaux sociaux, tu vas l’épuiser et tu n’auras plus envie de travailler.

Mon conseil : Met ton téléphone en silencieux dans une autre pièce, isole-toi si tu peux à la maison et demande à tes proches de ne pas te déranger. Et met toi au travail.

Sur l’environnement Linux, tu n’auras pas accès à toutes tes applications, tes jeux vidéos ou barre de favoris sur Google Chrome. Tu limiteras tes chances d’être déconcentré.

Maintenant que t'es prêt, tu vas apprendre la syntaxe HTML et le CSS. C’est vraiment la base du développement web. Il faut que tu comprennes comment fonctionnent les sites web. Cette syntaxe est comprise par tous les navigateurs et tu n’as besoin d’installer quoi que ce soit pour l’utiliser. Tu peux ouvrir un bloc note et commencer à coder. Ensuite tu ouvriras le fichier que tu as créé dans ton navigateur, et tu verras le résultat de ton travail.

Je te conseille les ressources sur W3School et surtout, fixe-toi tes objectifs pour apprendre et comprendre comment tes sites préférés sont faits. Recopie le design de certains sites, challenge toi sans regarder la solution. Il n’y a pas meilleure manière d’apprendre que de galérer et bloquer sur un objectif avant de trouver la solution à ton problème.

Sois curieux, n’hésite pas à utiliser ton navigateur pour inspecter le code de tes sites préférés pour mieux comprendre comment ils sont faits.

3. Javascript et le serveur

Après t’être entraîné en reproduisant tes sites préférés, tu dois avoir une meilleure compréhension de comment un site est construit. Mais il te reste surement une question. Comment est-ce que les sites sont alimentés en données ? Est-ce que le code source est modifié à chaque fois que Netflix rajoute une série ou que ton blogueur écrit un nouvel article ?

La réponse est non, effectivement car ça serait pas du tout pratique !

L’HTML et le CSS te permettent d’afficher, de structurer et d’appliquer le design à ton site. Mais il existe un langage de programmation idéal pour lui donner un peu de peps.

Tu vas découvrir ce qu’est la programmation avec Javascript, que tu vas utiliser pour ajouter du contenu dynamique à ton site.

Et c’est là que ça devient compliqué et je vais surement te perdre.

Tu vas devoir dissocier ton site web et le contenu de ton site web. Quand tu vas sur Facebook ou sur le site de ton choix, toutes les données comme les like, les images et tous les commentaires sont stockés dans une base de donnée sur un serveur distant.

Ils n’ont pas été ajoutés dans le code source de Facebook. Et pourtant, au moment où tu charges la page, tu retrouves bien toutes les informations que tu as renseigné. Si on inspecte le code HTML, on y retrouve les blocs pour chacun de tes posts.

C’est la partie du développement qui est pour moi la plus intéressante. C’est celle sur laquelle je passe le plus de temps à développer. Tu vas apprendre des nouveaux mots comme backend, frontend, API… Tu vas apprendre à créer des fonctions, qui sont des morceaux de codes réutilisables, tu vas déclarer des variables et des constantes qui sont des valeurs sous formes de données auxquelles tu auras assigné un nom.

La plupart des sites sur internet comme Amazon ou Spotify accèdent à leur donnée depuis une base de donnée (ou DB) et un serveur qui contient les autres fichiers comme les images et les musiques. C’est grâce à Javascript que tu vas pouvoir récupérer toutes ces données et rajouter le code source sur la page internet au moment du chargement du site par un utilisateur.

4. Logique frontend : Récupérer et charger les données depuis un serveur

Après avoir mis en place ton premier serveur Javascript, tu vas vouloir apprendre à communiquer avec ce serveur depuis ta page web. Tu vas utiliser les formulaires et les requêtes HTTP. Toute communication entre plusieurs serveurs et un site web passent par des requêtes HTTP. Tu vas découvrir les nouveaux verbes GET, POST, PUT, DELETE, l’API fetch et les récupérations des données de formulaires.

5. Mettre en place une base de donnée

Mais ce n’est pas tout ! Tu vas maintenant apprendre à utiliser une base de données en SQL. Tu vas lire et écrire des schémas de données et des requêtes au langage SQL. Le principe de cette partie n’est pas de tout apprendre mais de comprendre comment tes données sont stockées. Par la suite, tu utiliseras un ORM qui te facilitera la tâche. En Javascript, j’utilise Prisma qui simplifie grandement la gestion d'une base de donnée.

6. Apprendre React -- ou n'importe quel framework

En tant que développeur, on n’est jamais satisfait de son travail. On trouvera toujours quelque chose à faire en plus ou à améliorer. On aime bien se compliquer la vie. Et souvent, si tu reviens sur du code que que tu as produit il y a 6 mois, tu vas gerber. Tu auras honte du code que tu as produit. Tu voudras refactoriser ton code, l’améliorer, le renforcer et le rendre plus lisible. Tu peux aussi rajouter des commentaires pour aider ton futur-toi à comprendre ce que tu as voulu faire.

C’est tout à fait normal dans le cycle de vie de notre base de code. A chaque apprentissage, tu vas et tu dois mettre en pratique ce que tu as appris.

Il est temps maintenant que tu prennes connaissance des framework et des librairies qui facilitent le développement de site web. Tu as peut-être déjà entendu parler de VueJS ou de React qui sont les plus connus. Il y a aussi Svelte, Qwik et SolidJS. Et j’en oublie plein d’autres.

On va pas se le cacher, la librairie qui intéresse le plus les entreprises à l’heure actuelle, c’est React. C’est celle qui embauche le plus d’après les milliers d’offres d’emploi.

React nous permet d’écrire une syntaxe qui ressemble à de l’** HTML ** et à du Javascript dans le même fichier. Cette technologie te permet de développer des morceaux d’interface personnalisable et répétable. En HTML, il n’y a aucun moyen d’écrire la logique qu’une seule fois.

Par exemple pour afficher un blog avec trois articles, tu vas devoir copier coller la syntaxe complète de l’article trois fois.

React répond à ce problème et bien plus encore car il nous permet de créer des interfaces totalement dynamiques avec sa gestion d’état qu’on appelle le state.

7. React est mieux avec un framework

React ne répond malheureusement pas à tous nos besoins. Pour faire un site complet, nous avons besoin de gérer le routing, qui est la navigation entre plusieurs pages du même site. Quand tu navigues sur un site et que tu changes de page, l’adresse URL du site va changer aussi. En fonction de cette adresse, le site sait quelle page t’afficher. C’est ce qu’on appelle le routing.

Il y a plein d’autres éléments que React ne permet pas de traiter, et c’est pour ça que nous allons utiliser un framework en supplément de React. Il y en a plusieurs sur le marché comme NextJS et Remix. J’utilise Remix depuis maintenant deux ans et je le trouve beaucoup plus lisible et simple d’utilisation que NextJS.

Au sein de notre base de code, nous allons pouvoir afficher la vue de notre site, c’est à dire l’interface visuelle. Mais nous allons aussi développer la logique de notre serveur et nos API. Cette logique se situe par défaut dans le même fichier, et je trouve que c’est beaucoup plus clair.

Quand j’ai appris le développement, je faisais mes premiers sites en React et je développais un serveur dans un nouveau projet avec un code source totalement différent. Cela signifie qu’il faut alterner entre deux dossiers, deux syntaxes différentes et parfois même un langage différent.

Avec Remix, si je veux créer un blog, je vais coder toute ma logique dans le même fichier. Je vais d’abord charger mes articles en créant une nouvelle API. Puis je vais les afficher dans mon composant React, qui va s’occuper du rendu visuel. C’est ce que les visiteurs de mon blog verront.

8. Versioning et déploiement

Après avoir développé ton site internet, tu seras tellement fier que tu voudras le montrer à tes amis ou à ta famille. Tu ne vas pas conserver le code source sur ton ordinateur définitivement. Tu vas le mettre en ligne quelque part pour qu’il soit accessible sur internet et visible au public. Rassure-toi, personne ne va voir ton code source.

Tu vas l’héberger sur Github à chaque mise à jour. Si tu travailles pour une entreprise en tant que développeur, ils vont t’assigner différentes tâches. Tu vas donc télécharger le code source du site sur ton ordinateur, et tu vas le modifier pour répondre au besoin de ta boîte. Une fois que tu as terminé ta tâche, tu vas mettre à jour le code source sur une plateforme d’hébergement de code comme Github ou Gitlab. A partir de là, toi ou tes collègues pourront mettre à jour le site public avec les changements que tu as apporté. Et ça sera pareil pour ton site.

C’est notamment pour ça que tu as besoin de t’y connaître en utilisation de terminal et de Linux. Tu vas héberger ton site sur un serveur distant qui utilisera surement ce système d’exploitation.

Conclusion

C’étaient les 8 conseils que je donnerai à un ami qui veut se lancer en tant que développeur web. J’espère que ça t’a plu et que ça ta donné envie de te lancer. Si tu t’es déjà lancé bravo à toi, je te souhaite beaucoup de succès.