React:Intoduction ,Installation
React est une farmwork javascript permettant de créer des interfaces graphiques en divisant une page
en plusieurs sous-parties indépendante(component)
Exemple:
La page home de facebook est composée de plusieurs partie (component) indépendantes:-
NAV
- ASIDE LEFT
- ASIDE RIGHT
- POSTS
- FOOTER
- CHAT
Donc pour bien strcuturer ,maintenir et gérer la page home de facebook ,Diviser cette page
en plusieurs component indépendantes est une bonne stratégie ,c'est le but de REACT
React And Virtual DOM
DOM est la structure HTML de la page stocké en mémoire lorsque le navigateur lit une pagedonc DOM est l'objet utilisé par Javascript pour manipuler les balises
- ajouter une balises
- supprimer une balise
- Ajouter un style à une balise
-
Appliquer un CSS
- ...
Virtual DOM
Une fois une page HTML est chargé dans le navigateur :un Objet DOM est crée
Une fois un élément de la page est modifié: un Virtual est Crée
==> Un processu se délenche et cherche la différence entre le Real DOM et le Virtual DOM
puis appliquer les modification sur le seul element du REAL DOM qui a subit une modification dans le Virtual DOM
JSX
Javascript XML: permet d'écrire des codes javascript et des codes html dans la meme ligneconst element = <h1>Hello</h1>;
le code JSX sera compilé par un compilateur Javascript (Babel) pour vertir ce code à un code Javascript pour que le navigateur l'exécute
Creation d'un proejt React
Veillez suivre les étapes suivantes
- 1Installer NodeJS:https://nodejs.org/en/download/
- 2Créer un projet REACT
- 3Lancer 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