Skip to content
Snippets Groups Projects
Select Git revision
  • 89f344a176f5f04f264cee127e87eb80b6caf18a
  • main default protected
  • v5.2
  • v5.1
  • v7.1
  • v7
  • v6.2
  • v6.1
  • v6
  • v5.9
  • v5.8
  • v5.7
  • v5.6
  • v5.5
  • v5
  • v5.3
  • v4.6
  • v4.6-problem
  • v4.5
  • v4
  • v3.2
  • v3.1
22 results

intro-react

Forked from javascript / intro-react
24 commits behind the upstream repository.
user avatar
Jean-Christophe authored
89f344a1
History

Introduction à React

Ce dépôt contient le code utilisé en exemple dans le cours https://www.fil.univ-lille.fr/~routier/enseignement/licence/js-s4/html/react.html et https://www.fil.univ-lille.fr/~routier/enseignement/licence/js-s4/html/react-2.html.

Plusieurs versions progressives du dépôt pour accompagner le cours.

Mise en place

  • récupérer le dépôt
  • installer les paquets Node.js :
$  npm install
  • démarrer le serveur de développement de Webpack
$  npm run dev-server

Les versions

Il faut charger une version avec

$ git checkout **tag**

tag peut prendre comme valeur :

  • v0 : premier exemple basique avec React
    voir /src/scripts/main.js et le point d'insertion #insertReactHere dans /src/index.html
  • v0.5 : second exemple avec création d'un emboitement d'éléments
  • v1 : premier exemple avec la syntaxe JSX
  • v2 : premiers composants sans état voir /src/components/first.jsx, /src/components/second.jsx et son utilisation dans /src/mains.js
  • v3 : utilisation des propriétés
    voir /src/components/person.jsx, /src/components/personListing.jsx et son utilisation dans /src/mains.js
  • v3.1 : utilisation de la syntaxe de pattern matching sur les objets pour destructurer l'objet props dans le paramètre du constructeur du composant.
  • v3.2 : la propriété children
  • v4 : définition des composants à l'aide de classes
    voir /src/components/person_class.jsx, /src/components/personListing_class.jsx et son utilisation dans /src/mains.js
  • v4.5 : définitions locales et valeurs par défaut
    voir /src/components/person.jsx et son utilisation dans /src/mains.js
  • v4.6-problem : génération d'une liste de composants, à l'aide de map()
    voir /src/components/personListing.jsx
    /!\ mais cette version pose problème car il manque la gestion de la propriété key : voir dans la console
  • v4.6 : génération d'une liste de composants avec gestion de la propriété key
  • v5 : premier composant à état
    voir /src/components/person.jsx
  • v5.1 : gestion d'événements
    voir /src/components/star.jsx et onClick
  • v5.2 : modification et état courant : mise en évidence du problème
    voir /src/components/star.jsx
  • v5.3 : modification et état courant : utilisation d'une fonction en argument de setOn pour modifier l'état à partir de la valeur précédente
    voir /src/components/star.component.jsx et /src/components/person.component.jsx

Faire git checkout main pour revenir à la version finale.