Skip to content

Instantly share code, notes, and snippets.

@pixeline
Last active April 27, 2022 15:14
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pixeline/3b5e2a718a3ff61dd51a7477571b36c4 to your computer and use it in GitHub Desktop.
Save pixeline/3b5e2a718a3ff61dd51a7477571b36c4 to your computer and use it in GitHub Desktop.

JS Frameworks : ReactJS

Il y a le backend, il y a le frontend... Et il y a les frameworks Javascript tels que Angular (made in Google), Vue.js (opensource) et React (Made in Facebook).

A priori, ce sont d'abord des outils pour faire du frontend, mais avec la particularité que vous pouvez manipuler des services de données externes (tels que Firebase ou AWS) directement depuis votre code frontend. Des bâtards, quoi.

Quel est leur intérêt ?

Ils sont particulièrement indiqués pour les applications web et les interfaces très réactives, plus que pour les simples sites vitrines (où l'utilisateur va surtout lire).

Le problème que ces frameworks résolvent est le suivant :

Imaginons que 2 personnes consultent au même moment la même page d'un e-Shop. Par exemple, une casquette PetitPoney Vintage, made in Japan, 1988. Il n'y a plus qu'un seul exemplaire en stock.

Si l'un des deux achète cet exemplaire, il n'y en a plus pour l'autre. Idéalement, il faudrait donc que l'interface du second utilisateur soit mis à jour pour indiquer que le stock a changé ("produit indisponible") au moment où l'utilisateur 1 clique sur "acheter". Et ce, alors que le second utilisateur n'a pas forcément rechargé sa page.

Autrement dit, le problème à résoudre consiste à faire en sorte que le frontend reflète à tout moment l'état du backend, que l'interface reflète fidèlement l'état de l'application dans son ensemble (ici, l'état du stock).

Maintaining application state and keeping it consistent with our UI is a major challenge. Solving this is partly why libraries like React really took off. – Kirupa

Objectifs d'apprentissage

Au terme de ce parcours, l'apprenant•e sera capable de développer et déployer une application web réalisée avec React.

Apprendre en faisant

  1. React Armory
  2. tutoriels au format Texte : kirupa.com
  3. tutoriels au format Vidéo : YouTube/Kirupa
  4. Maitriser WebPack, un nouvel outil de développement qu'il est bien : tutorial
  5. Create a React app using WebPack

S'exercer

Choisis au moins un projet parmi ces tutoriels :

Aller plus loin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment