menu FixWins.com apps Spring MVC Spring Boot Angular Laravel ExpressJS ReactJS PFE list

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:
  1. NAV
  2. ASIDE LEFT
  3. ASIDE RIGHT
  4. POSTS
  5. FOOTER
  6. 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 :diviser une vue en plusieurs petites parties(component) indépendantes

React And Virtual DOM

DOM est la structure HTML de la page stocké en mémoire lorsque le navigateur lit une page
donc DOM est l'objet utilisé par Javascript pour manipuler les balises
  1. ajouter une balises
  2. supprimer une balise
  3. Ajouter un style à une balise
  4. Appliquer un CSS
  5. ...
Le Problème du DOM :n'importe quelle changement dans l'objet DOM d'une page le navigateur doit recharger toute la page afin d'appliquer les changements
Cela prend un temps d'éxécution non nécéssaire donc on a besoin d'un mécanisme qui permet de recharger seulemet la partie changé dans une page et pas toutes la page
C'est le but du Virtual DOM

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 ligne
const 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

  1. 1Installer NodeJS:https://nodejs.org/en/download/
  2. 2Créer un projet REACT
  3. 3Lancer le projet

Créer un projet React

npx create-react-app test_react_project

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

cd test_react_project
npm start