React : Introduction et Installation

React est une bibliothèque JavaScript permettant de créer des interfaces graphiques en divisant une page en plusieurs sous-parties indépendantes (composants).

Exemple:

1. NAV
   
2. ASIDE LEFT
3. ASIDE RIGHT
4. POSTS
5. FOOTER
6. CHAT

Pour bien structurer, maintenir et gérer la page d'accueil de Facebook, il est judicieux de diviser cette page en plusieurs composants indépendants. C'est l'objectif de React.

React et le Virtual DOM

DOM est la structure HTML de la page stockée en mémoire lorsque le navigateur lit une page.
Ainsi, le DOM est l'objet utilisé par JavaScript pour manipuler les balises.

1. Ajouter une balise
2. Supprimer une balise
3. Ajouter un style à une balise
4. Appliquer un CSS
   
5. ...

Virtual DOM

Une fois qu'une page HTML est chargée dans le navigateur, un objet DOM est créé.
Lorsque qu'un élément de la page est modifié, un Virtual DOM est créé.
Un processus se déclenche et cherche la différence entre le Real DOM et le Virtual DOM,
puis applique les modifications sur le seul élément du Real DOM qui a subi une modification dans le Virtual DOM.

JSX

JavaScript XML : permet d'écrire des codes JavaScript et des codes HTML sur la même ligne.
const element = <h1>Hello</h1>;
Le code JSX sera compilé par un compilateur JavaScript (Babel) pour convertir ce code en un code JavaScript que le navigateur peut exécuter.

Création d'un projet React

Veuillez suivre les étapes suivantes :

1. 1 Installer Node.js : https://nodejs.org/en/download/
2. 2 Créer un projet React
3. 3 Lancer le projet

Créer un projet React

La structrue d'un projet React

test_react_project
    ├── node_modules
    ├── public
    │    ├── favicon.ico
    │    ├── index.html
    │    ├── logo192.png
    │    ├── logo512.png
    │    ├── manifest.json
    │    └── robots.txt
    ├── src============>Ici on va créer les component
    │    ├── App.css
    │    ├── App.js
    │    ├── App.test.js
    │    ├── index.css
    │    ├── index.js
    │    ├── logo.svg
    │    ├── reportWebVitals.js
    │    └── setupTest.js
    ├── .gitignore
    ├── package.json
    ├── README.md
    └── yarn.lock

Lancer le projet React