Débuter avec React

Débuter avec React : découvrez l'origine de React et ce qui rend cette bibliothèque Javascript si populaire.
Nous verrons ensuite comment installer React et développer votre première application.

React

React a été créé en 2011 par Jordan Walke, ingénieur au sein de Facebook.
C'est une bibliothèque Javascript open-source permettant de créer des interfaces utilisateurs dont le but principal est de faciliter la création d'applications web monopage (single-page ou SPA en anglais) en créant un DOM virtuel.
React est très populaire, c'est la librairie Javascript la plus utilisée au monde (Netflix, Facebook, Instagram ...).

Page React : un ensemble de composants

Avec React , une page est un ensemble de composants.
Dans une création de site, vous avez toujours des éléments du DOM qui se répètent (boutons, bannières, formulaires, cards, menus ...).
Ces éléments qui représentent l'interface utilisateur (UI) sont transformés en composant dans React.
Lorsqu'un composant est amené à changer, c'est uniquement ce composant qui va être rechargé et non l'ensemble de la page.

Les composants sont réutilisables. On code une fois ce qui amène donc à un gain de productivité et de temps pour les développeurs.
On peut ensuite modifier notre composant suivant nos besoins à partir du code base.

Je retiens : React utilise un DOM virtuel et a un code modulaire basé sur des composants.

L'environnement de développement REACT

Avant de démarrer, préparons l'environnement avec les outils nécessaires à notre application.
Nous utiliserons ici Visual Studio Code mais vous pouvez utiliser l'IDE que vous souhaitez. Sass est également optionnel.

→ Node.js pour la partie développement de l'application.
Node.js est un environnement backend d'exécution Javascript non-bloquant. Il interprète du Javascript sans passer par le navigateur et permet de gérer des requêtes simultanées.

→ npm : npm est le gestionnaire de paquets par défaut pour l'environnement d'exécution JavaScript Node.js.

Nous installerons Sass pour avoir une architecture mieux structurée au niveau de notre CSS.

Installation de React

Créez un dossier sur votre pc que vous nommez  tuto-cds par exemple et ouvrez le dans votre éditeur de code.
J'utiliserais ici Visual Studio Code.
Ouvrez votre console (ctrl + ù) et vérifiez que node.js et npm sont bien installés en tapant ces deux lignes :

node -v
npm -v

Si node.js n'est pas installé, rendez-vous sur :
https://nodejs.org/fr/download

Ensuite, dans votre console, tapez la commande create-react-app suivi du nom de votre application.
Ce script va vous permettre d'obtenir l'ossature de votre projet.

npx create-react-app bases-react

→ npx: npx est l'exécuteur de package utilisé par npm.

Après 2mn, votre application est installée.

Dans votre console, tapez ensuite le code ci-dessous afin de vous placer dans le dossier de votre application :

cd bases-react

et tapez ensuite

npm start

En créant notre application avec create-react-app, l'environnement est mis en place pour le développement et la production.

Babel et Webpack

La librairie va utiliser Babel et Webpack.
Webpack est un "module bundler". Cet outil de build va lire tous les fichiers contenus dans src et les optimiser pour les navigateurs.
Il va regrouper tous les fichiers HTML, CSS et Javascript dans des bundles.

Babel permet de profiter des dernières fonctionnalités de JavaScript et du JSX tout en assurant une compatibilité avec les navigateurs plus anciens et les environnements qui ne prennent pas en charge ces fonctionnalités directement.

Architecture d'une application React

Fichiers principaux de base 

index.html : Ce fichier HTML (unique dans l'application) qui sert de point d'entrée pour votre application React, contient une div avec un ID (par exemple, root) où l'application React sera rendue.

index.js : Ce fichier Javascript est le point d'entrée de votre application React.
Il utilise ReactDOM.render() pour rendre le composant racine de l'application dans le DOM.

App.js : contient généralement le composant racine de votre application et c'est ici que vous pouvez définir la structure générale de votre application et inclure d'autres composants.

package.json : liste les dépendances et les scripts.

Les dossiers

node_modules: comprend toutes les bibliothèques.
public: Ce dossier contient les fichiers statiques qui ne nécessitent pas de traitement spécial par Webpack ou Babel, tels que l'index.html.
src: C'est le dossier principal qui contient la majorité du code source de votre application (en développement).

Ce qui est contenu dans public n'est pas lu par Webpack.

Les fichiers contenus dans public seront lus dans build, le dossier de production.