Pour la plupart d’entre vous, lorsque vous commencez à faire des recherches pour devenir développeur Front-end, vous pensez qu'il est suffisant d'apprendre HTML et CSS. Certains savent déjà que vous aurez également besoin d’une base solide en Javascript. Si vous poussez un peu plus loin, vous constaterez qu’il est de plus en plus fréquent de maîtriser un nouvel outil : REACT. Vous êtes peut-être même déjà tombé sur la phrase typique "React n’est rien d'autre que Javascript".
Que ce soit la première fois que vous en entendiez parler ou que vous soyiez déjà tombé dessus au cours d'une de vos recherches, pas d'inquiétude. Dans cet article je vais vous expliquer comment commencer avec React !
Un peu d’histoire
React est une bibliothèque créée par un groupe de développeurs chez Facebook. Ces développeurs se sont rendu compte qu'il était difficile de maintenir et contrôler tout le code nécessaire au bon fonctionnement de l'application, car les connexions entre les données et le rendu visuel grandissaient à un rythme exponentiel à mesure que l’application Facebook elle-même évoluait.
Pour résoudre ce problème, ils ont créé une bibliothèque qui leur permet d’optimiser le rendu visuel de l’application lorsque les données changent et facilite le développement de l’application en divisant chaque partie en petits composants réutilisables. Cette bibliothèque, c'est React.
Facebook a commencé à utiliser React sur une partie de son application. Suite aux bons résultats obtenus, la plate-forme Instagram - également détenue par Facebook - a été entièrement développée sur React. D’autres grandes applications Web se sont vite intéressées à React et l’ont intégré à leur stack technologique : Airbnb, Netflix, Paypal ou Tesla utilisent aujourd'hui React.
D'accord, mais comment est-ce que React fonctionne ?
On pourrait écrire plus d'une vingtaine articles sur la thématique ! Je vais essayer de résumer les grandes lignes ici pour te donner une idée générale.
React est basé sur des composants. Ce sont des petits bouts d’interface, comme une barre de navigation, une image, un formulaire... À leur tour, ces composants sont définis par d’autres composants plus petits tels que des boutons, des titres, des paragraphes, etc.
Le comportement de tous ces composants est défini par leur état interne et par des propriétés déterminées. Toute modification de cet état interne ou de ces propriétés (l’utilisateur passe de connecté à hors connexion, un clic sur un bouton pour changer la langue de la page, etc.) entraîne un nouveau rendu du composant avec les nouvelles propriétés et l’état défini. Tout ce fonctionnement est basé sur ce que l’on appelle le "lifecycle des composants".
Les avantages de cette méthode de travail sont immédiats : par exemple, écrire une seule fois le code pour avoir le rendu de notre bouton. Ensuite, nous définissons si c’est un bouton primaire, secondaire, un formulaire de contact ou un formulaire d’enregistrement à travers les propriétés et l’état. Nous obtenons donc un code réutilisable et évolutif, et ça se traduit par le fait d'avoir à écrire beaucoup moins de code. Que des avantages !
Un autre point fort du fonctionnement de React est la manière dont se fait la mise à jour des composants avec le DOM (Document Object Model). React travaille avec un DOM virtuel. React crée une mémoire cachée de la structure de données, celle-ci calcule les différences qui en résultent, puis met à jour le DOM affiché par le navigateur de manière efficace. Ce fonctionnement de React garantit une augmentation très significative des performances en comparaison avec la manipulation de DOM classique. Si tu es motivé, tu peux commencer à en lire plus sur le DOM virtuel dans la documentation officielle.
Ça a l’air intéressant, mais de quoi ai-je besoin pour commencer avec React ?
Si tu demandes à n’importe quel développeur web ce dont tu as besoin pour commencer à travailler avec React, sa réponse sera probablement quelque chose comme : « Rien ! React c'est juste Javascript ! » C’est l’un des grands avantages de React : c'est avant tout une bibliothèque Javascript. Son code n’est donc qu’une extension des fonctionnalités que nous connaissons déjà avec Javascript.
Comparons maintenant React à d’autres alternatives telles qu'Angular, Vue ou Ember. Pour travailler avec ces frameworks, nous devons acquérir une connaissance de l’outil et de la syntaxe qu’ils utilisent. Avec React, l'avantage c'est que cette syntaxe est seulement du Javascript.
Comme je l’ai déjà dit, React est basé sur des composants qui ne sont rien d’autre que des classes Javascript programmées par l’équipe de développeurs de React. Ce que nous faisons en tant qu’utilisateurs, c’est utiliser ces classes déjà programmées, avec leurs méthodes et fonctionnalités pour obtenir une application qui répond à nos exigences.
React est idéal pour les développeurs les plus expérimentés. En quelques heures ils peuvent commencer à assembler des applications avec des fonctionnalités complexes, puisque la logique qu’ils utiliseront est, une fois de plus, celle de Javascript.
Mais si tu commences tout juste la programmation, React est aussi une très bonne alternative pour toi. Une fois que tu auras compris comment fonctionne sa structure et le flux d’informations à l’intérieur de ses composants, React deviendra l’environnement idéal pour mettre en pratique tes connaissances Javascript et pour progresser en même temps que tu crées des applications. Puisque, je le répète encore une fois, c’est tout simplement Javascript !
Ne pars pas de zéro, réutilise le travail des autres !
Bien qu’on ait souvent comparé React à des frameworks comme Angular, Vue ou Ember, le code de base de React offre moins de fonctionnalités que ces derniers. Angular, Vue ou Ember ont beaucoup plus d’outils internes pour développer des fonctionnalités comme la gestion de l'architecture des pages, la mise à jour de l’UI (User Interface) lors de la réception de nouvelles données ou l’état général de l’application. Dans React, tu es en charge de faire tout cela.
D’un côté c’est bien, parce que tu vas pouvoir le faire à ta manière. Mais d’un autre côté, c'est quand même un peu effrayant de devoir écrire toutes ces fonctionnalités à partir de rien... Mais c'est loin d'être le cas !
Pour commencer, toutes ces fonctionnalités sont encapsulées dans des composants qui, comme je l’ai dit, sont à la base du code de React. Si tu te souviens bien, l’avantage d’utiliser des composants c'est que nous pouvons les réutiliser à différents endroits de notre application, n’est-ce pas ?
Alors, c'est plutôt une bonne nouvelle ! Nous pouvons également les réutiliser dans différents projets sous forme de paquets via le gestionnaire de paquets de Node : NPM (Node Package Manager). Nous pouvons installer un paquet pour gérer l'architecture de notre projet, et un autre paquet qui fera en sorte que nos composants tels que les boutons, les formulaires, les liens, aient un style propre (comme Bootstrap).
Juste Javascript... mais qu’en est-il d'HTML et CSS ?
Je sais que j’ai déjà répété plusieurs fois la phrase que React, au final, n’est que Javascript. Mais où est le code html et css dans tout ça ?
En fin de compte, React cherche à mettre en place la logique UI (User Interface), c’est-à-dire d'expliquer selon quelle logique nous programmons. La logique est inscrite dans chaque composant. C’est aussi dans ces composants que nous allons écrire notre code html.
En effet avec React nous allons mélanger le code Javascript, chargé de définir le comportement de nos composants, avec le code html, chargé de définir leur structure. C'est fait avec JSX (Javascript XML). JSX va transformer les tags du code html en éléments que React comprend et sait manipuler.
Puisque le css doit permettre de donner vie au code html (couleurs, police, espacement, positionnement...), nous allons pouvoir continuer à écrire du code css de la même manière que jusqu’à présent, bien qu’il existe déjà quelques paquets de npm qui nous permettent également d’écrire le code css dans Javascript (comme Styled Components ou Material UI).
Tu m’as convaincu. Comment est-ce que je peux réaliser ma première application avec React ?
C’est dans la documentation de React que tu trouveras le plus de ressources sur le sujet et d'une manière parfaitement organisée. Je recommande particulièrement la partie tutoriel d’introduction. La documentation de React contient de nombreux guides pas à pas avec des exemples qui montrent à la fois les concepts les plus basiques et ceux plus avancés ou très spécifiques.
Si tu suis cette documentation, tu verras qu’il y a deux façons de commencer à utiliser React. Un des moyens est de l’importer dans ton fichier html avec un tag de script. Avec cela, nous obtenons un accès direct et rapide pour commencer à utiliser React. C'est une bonne option pour travailler sur une petite application.
L’autre option est de créer un environnement de travail avec un outil pour contrôler et gérer tous les paquets que nous installons et utilisons via npm. L’un des outils les plus populaires aujourd’hui est Webpack avec un transpiler de code comme Babel. Faut-il alors aussi apprendre Webpack et Babel ?
Heureusement que non ! Il est toujours recommandé d’apprendre et de connaître ces outils, c’est sûr, mais il n’est pas nécessaire de les connaître pour commencer à travailler avec React. Et ça, c'est grâce à un outil développé par l’équipe Facebook elle-même appelé create-react-app. Il s’agit d’un paquet à installer qui va créer tout l’environnement nécessaire pour pouvoir travailler avec React et utiliser toutes ses fonctionnalités sans avoir à te soucier d’autre chose que de programmer le code nécessaire à ton application !
Attends, il y en a encore plus !
Tu penses que c’est tout ce que React a à offrir ? Que des applications web ? Eh bien, il y a plus ! Toutes les fonctionnalités et méthodologies de travail utilisées par React ont été étendues à React Native et React 360.
Le premier, React Native, est un framework qui permet de développer des applications natives pour Android et iOS. Le second, React 360 permet de développer des applications de réalité augmentée et de réalité virtuelle. Donc, une fois que tu commences à maîtriser et à programmer plus facilement les applications Web de React, il te sera assez facile de passer à des applications mobiles ou même à des applications de réalité virtuelle !
Un autre point fort de React est qu’il s’agit d’un projet Open Source : son code est ouvert à tout développeur pour l’inspecter et être en mesure de collaborer directement à toute amélioration possible. Tu peux voir le code sur son GitHub.
Donc, si en lisant ceci, tu as envie d’essayer et de commencer à écrire tes premières lignes de code avec React, n’hésite pas, lance-toi et commence à l’essayer dès maintenant ! Et n’oublie pas qu'à la Wild Code School, nos programmes de formation sont centrées sur React. En quelques mois, tu pourras devenir un vrai expert et tu seras en mesure de montrer tout ce que tu as appris à travers différents projets !
Découvre notre syllabus Développeur web pour en savoir plus sur le programme de formation, les prochaines sessions, les moyens de financement, et bien d'autres...
Tu peux regarder tous nos programmes de formation pour apprendre React sur notre site internet.
