Bonjour les amis, c’est Samih de l’Académie WS, aujourd’hui on parle d’une librairie javascript qui fait extrêmement parler d’elle j’ai nommé l’incontournable React JS !

Mais qu’est-ce que React JS?

React est une librairie javascript qui permet de développer des interfaces dynamiques et interactives en Javascript.Ce que l’on sait c’est que React a été créé par Facebook en 2011 et fut officiellement lancé sur le marché en 2013.

Est-ce réellement utilisé?

React est tout simplement la librairie Javascript la plus utilisée actuellement sur le marché.Et par plus utilisé j’entends, par exemple utilisé par Facebook, Netflix, Paypal, Reddit, ou encore Air Bnb ! Rien que ça !

Vous l’aurez bien compris, si vous recherchez un travail en tant que développeur front-end, vous avez plutôt interêt a savoir créer des applications web avec React !

Mais Pourquoi React a-t-il réellement été créé?

Vous le savez probablement, mais quand une page HTML est chargée dans le navigateur, le navigateur charge votre code HTML et créé une architecture qui ressemble à un sorte d’arbre que l’on appelle le Document Object Model (ou DOM). Cette architecture nous permet d’utiliser Javascript et de modifier le contenu de la page en fonction des actions de l’utilisateur.

On peut par exemple faire disparaitre un élément quand un bouton est cliqué, on parle alors de Vanilla Javascript ce qui signifie en quelque sorte ‘du code javascript pure sans utiliser aucun outil tierce.

La problématique

Le problème c’est que plus notre application va grandir, et plus travailler avec le DOM va devenir de plus en plus complexe, et surtout difficile à maintenir ! C’est la qu’entre en jeu React.

Pourquoi?

Et bien tout simplement parcequ’avec React, plus besoin de sélectionner les éléments de votre page pour mettre à jour le DOM. A la place, on peut créer une page web en définissant ce que l’on appelle des composants web réutilisables et paramétrables. React va ensuite se charger de créer et recharger (c’est à dire mettre à jour) les éléments du DOM.

To make a long story short

En d’autres termes, React permet de décortiquer une page en créant des composants qui vont nous aider à obtenir un code mieux organiser, mais surtout, réutilisable ! Elle est pas belle la vie?

Mais prenons plutôt un exemple :

Imaginons que nous souhaitons créer une site web comme celui de l’Académie WS .En haut de l’écran nous avons une navigation, dans cette navigation nous avons des boutons, puis nous retrouvons une barre de recherche, et encore en dessous des cards qui présentent différentes thématiques.

Et bien avec React, nous pouvons créer chaque section en composants séparés. On peut créer chacun de ces composants de manière individuel et les combiner pour créer cette même page !

Une application web React est donc un arbre de composants avec pour composant principal un composant nommé APP définit comme ‘root’ qui permet d’assembler chaque composant en une et même page web.

Pré-requis

La question que vous attendez tous, faut-il avoir des connaissances pour démarrer en React?Et bien oui, on ne va pas se mentir vous allez devoir avoir des connaissances de bases en :

• HTML
• CSS
• ET Javascript évidemment

Mais je vous mets une petite liste des must have en Javascript avant de démarrer :

• Variables / constantes
• Fonctions fléchées
• Conditions ternaires
• Littéraux de gabarits
• Spread operator
• Object destructuring
• Les méthodes map() et filter()
• Les fonction de rappel (ou call back fonction)
• Les objets en Javascript
• Quelques notions de programmation fonctionnelle

Allez ça suffit pour la théorie, je vous retrouve sur le site de l’Académie WS pour configurer votre environnement et découvrir en quoi consiste réellement la construction d’une application web avec React, point par point et vous me connaissez, sans BLA-BLA !

En savoir plus

Envie d'en savoir plus sur le sujet? retrouvez l'intégralité de la formation vidéo liée à la thématique 'Développez vos compétences en React JS' sur le site de l'Académie WS !