Exercices

LocalStorage Weather Api ToDo et LocalStorage

React+ionic

Ionic Create project 4.React Outils utiles 5.Lifecycle Methods 6.JSX

Gestion Ventes

Produit CRUD

6.Form :Ajouter un produit 8.Liste produits 9.Pagination 10.Liste produits +Pagination 11.Liste produits +Datatable 11.Liste produits +load more 12.Supprimer un produit 14.Details d'un produit 15.Recherche et Autocomplete

Reacts:Utils

Gestion des erreurs Variables d'environment Cookies Internationalization proptypes Form validation React Animation Fragment Google Maps

Utilisateur CRUD

18.Inscription upload file 19.Connexion et Les sessions 19.Connexion: JWT Token

Ventes CRUD

17.Vendre un produit 18.Facture Generate PDF 19.Statisques Charts

Redux





React:Intoduction ,Installation

React est une Librarie 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