Appréhendez la logique de React

Plongez dans le monde de React

Bonjour et bienvenue dans le cœur du cours de React ! Plongeons-nous dès maintenant dans l'univers de cette bibliothèque Javascript.

Découvrez le monde des frameworks front-end

Les frameworks front-end sont partout dans l'écosystème technologique moderne. Toutes les grandes entreprises de la Tech les utilisent au quotidien : Meta (Facebook), Airbnb, Netflix, Spotify, Discord, pour n'en citer que quelques-unes. Ce sont également de nombreuses startups, dès leur création, qui se lancent sur React, Vue, et d'autres ; ou encore les grandes entreprises qui font évoluer leur codebase pour se tourner vers elles.

Le but est d'éviter de réinventer la roue pour n'importe quel besoin classique d'une application : gestion de l'interface utilisateur, des événements, des formulaires, de l'évolution dans le temps des données manipulées par l'interface, etc.

En plus, initialiser une base de code avec un framework simplifie non seulement votre prise de marques, mais aussi l'intégration d'une nouvelle personne sur la codebase.

Découvrez React, l’un des frameworks JavaScript les plus populaires

Lorsqu'on parle de frameworks JavaScript, les noms de React, Vue.js et Angular ne sont jamais bien loin. Et il en existe d'autres (Svelte, SolidJS, etc.). Chacun a ses spécificités, ses avantages et ses inconvénients.

Celui qui nous intéresse dans le cadre de ce cours est le plus populaire d'entre eux : React.

React est un projet open-source, distribué sous la licence MIT et développé principalement par Meta. Leurs produits web et mobile tels que Facebook, Instagram, WhatsApp, reposent en grande partie sur cette technologie.

L'ambition de React est de créer des interfaces utilisateurs avec un outil rapide et modulaire. L'idée principale derrière React est que vous construisiez votre application à partir de composants.

Un composant = HTML + CSS + JS.

En effet, sur sa documentation, React se présente comme "une bibliothèque JavaScript pour créer des interfaces utilisateurs". Pourtant, depuis tout à l'heure je vous parle de framework. En fait, la frontière entre framework et bibliothèque reste assez fine, surtout dans le cas de React ; et il n'est pas simple de séparer parfaitement l'un de l'autre.

Prenez conscience des atouts de React

Voici quelques-uns des atouts de React :

1. sa communauté

2. sa documentaiton

3. ses opportunités professionnelles

La communauté React

Particulièrement active, elle vous facilite la vie. Lorsque vous rencontrez un problème, vous pouvez être sûr qu'une autre personne s'est déjà confrontée au même que le vôtre :

• Pour commencer, vous avez accès aux questions qui sont posées sur Stack Overflow (en anglais).

• En outre, l’équipe de React répond aux issues (problèmes) sur le repository GitHub de React (en anglais).

• Enfin, il existe de nombreuses newsletters, blogs, chaînes YouTube, créés par des utilisateurs - leur dynamisme vous donne toujours envie de tester de nouveaux outils. 

La documentation React

Les opportunités professionnelles avec React

Comme il s'agit de l’un des frameworks les plus populaires, les opportunités professionnelles sont particulièrement nombreuses. En faisant une comparaison sur des sites comme Glassdoor, React est une des technologie frontend avec le plus grand nombre d’offres d’emploi.

Créez votre premier composant React

Maintenant que vous comprenez l'intérêt de React, passons à la pratique ! Nous allons créer votre premier composant.

Utilisez StackBlitz pour commencer rapidement

Cet outil en ligne nous permet de nous concentrer sur l'essentiel : apprendre React. Pas besoin d'installer quoi que ce soit sur votre ordinateur, vous pouvez commencer immédiatement !

Comprenez la structure de base

Dans votre nouveau projet StackBlitz, vous verrez plusieurs fichiers ; concentrons-nous sur les essentiels :

• main.jsx

• App.jsx

main.jsxest le point d'entrée de votre application :

import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(<App />)

Sur la première ligne, on voit l’import depuis un package  react-dom/client.

React lui-même ne manipule pas directement le DOM du navigateur. À la place, React génère un DOM virtuel, distinct du DOM des navigateurs. Au moment venu, il réconcilie ce DOM virtuel avec le DOM du navigateur, en prenant soin de minimiser le nombre d'opérations nécessaires. C’est ce qui nous permet d’avoir de super performances, et d’utiliser React dans de nombreux contextes, et pas seulement au sein du navigateur même, typiquement les applications mobiles natives, etc.

App.jsxest votre composant principal

function App() {
  return <div>Bienvenue dans le cours Débutez avec React</div>;
}
export default App;

Créez votre premier composant

Écrivons maintenant notre premier composant (tous les composants React sont des fonctions).

Commençons avec cette première fonction  MyComponent  que nous créerons dans le fichiermain.jsx:

function MyComponent() {

   return (<div>Hello OpenClassrooms 👋</div>)

}

En copiant ce code dans la partie JS, rien ne se passe. Pas de panique ! C'est normal : il vous reste encore à attacher votre composant React à votre HTML.

Attachez React à votre HTML

On va dès maintenant utiliser createRoot pour s'attacher à notre HTML.

Dans le snippet ci-dessous, l’id  rootpermet de préciser où notre app React va vivre dans le HTML de notre projet. 

Ensuite, on va ordonner à ReactDOM de générer (render) notre composant React qui s’appelle MyComponent :

createRoot(document.getElementById('root')).render(<MyComponent />);

Et voilà, notre composant s'affiche ! Félicitations à vous ! Vous venez d'afficher votre premier composant React !

À vous de jouer !

Je vous avais parlé au chapitre précédent d'un exercice fil rouge qui nous accompagnerait tout au long de ce cours. Vous vous en souvenez ? Nous allons créer ensemble un site pour un magasin de plantes, La maison jungle ! 

Il est temps de mettre en pratique ce que vous venez de voir.
Votre mission, si vous l'acceptez, est la suivante :

1. Créer le premier composant Header qui contient le nom de notre magasin : La maison jungle. Le composant Header correspond à une baliseh1.

2. L’intégrer à la racine du projet.

Vous pouvez faire les exercices directement dans les liens, ou bien créer votre propre compte Stackblitz, et copier-coller le contenu au fur et à mesure.

En résumé

• Un framework JS est un ensemble de classes, fonctions et utilitaires qui facilitent la création d’applications pour les navigateurs ou mobiles.

• React, qui est une bibliothèque aussi bien qu’un framework, permet de créer des interfaces utilisateurs. 

• React permet de créer du code modulaire, à base de composants réutilisables.

• Les avantages de React sont sa communauté, sa documentation et ses opportunités professionnelles.

Dans le prochain chapitre, nous aborderons les composants React un peu plus en détail. Vous découvrirez la syntaxe propre à React : le JSX . Nous analyserons sa logique inhérente et nous verrons même comment ajouter du style.

Alors, vous aussi vous voulez créer des composants de pros ? Rendez-vous au prochain chapitre !