Skip to content

guhur/cours-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

57 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Introduction à React

Ce cours est constitué de 10 projets différents pour prendre en main React à partir d'un minimum de connaissances en JavaScript. Chaque projet est hébergé sous un répertoire git différent. Ce répertoire centralise les notes de cours.

Format des TP

Pour être noté·e, l'étudiant·e doit :

  • copier le dossier du TP avec son compte GitHub ;
  • modifier le projet pour valider chaque consigne du TP ;
  • au sein d'un projet, le README.md peut contenir des questions, auxquels vous devez répondre directement en complétant ce fichier.
  • éventuellement, si le projet contient des tests automatisés, il faut s'assurer que ces tests passent ;
  • mettre son code en production avec Netlify et ajouter le badge de statut dans le README du projet,
  • remplir le Google Sheet avec le lien vers son répertoire git.

Vous pouvez me contacter par courriel si vous avez des problèmes avec vos rendus.

Notation

Quelques conseils pour avoir une mauvaise note :

  • ne pas soigner l'apparence de ses réponses dans le README.md (quelques notions de Markdown) ;
  • laisser des blocs de code en commentaires dans son rendu ;
  • faire des fonction de plus de 20 lignes ;
  • ne pas utiliser de formatter dans son IDE (Visual Studio Code, Vim) ;
  • ne pas utiliser les formules de politesses dans les courriels ;

Partie 1 : les bases de React

Cours 1 : rappel en JavaScript

Ce cours reprend les bases de la programmation en JavaScript (variables, conditions, boucles, fonctions et classes) et en particulier avec la syntaxe ES6.

Cours - TP

Cours 2 : écrire son premier composant

Après créer un projet React, vous allez créer un composant en JSX et ajouter un test automatisé.

Cours - TP

Cours 3 : réutiliser des composants avec les props

Les Props paramètrent la création d'un composant.

Cours - TP

Cours 4 : rendre un composant réactif avec les states

Les states correspondent à l'état interne d'un composant. Modifier le state recharge l'apparence de ce composant.

Cours - TP

Partie 2 : notions avancées en React

Cours 5 : ajouter plusieurs pages à son application

Cours - TP

Cours 6 : partager des informations entre plusieurs composants avec les contextes

Cours - TP

Cours 7 : interagir avec un backend

Cours - TP

Cours 8 : la génération statique de pages avec Next JS

Cours - TP