Cours JavaScript, React et Firebase

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 repo git différent. Ce repo centralise les notes de cours.

Notation

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

• [] fork-er le repo correspondant à un projet,
• [] modifier son contenu jusqu'à respecter chaque contrainte du cahier des charges,
• [] s'assurer que les tests passent,
• [] mettre son code en production avec Netlify (ou un service équivalent) et ajouter le badge netlify dans le README du projet,
• [] faire un pull-request de son fork vers le projet de base.

Un TP est noté sur 15/20. Pour obtenir 18/20, l'étudiant·e doit partir de zéro dans son code. Pour obtenir 20/20, l'étudiant·e doit proposer un projet différent qui valide le même contenu ; dans ce cas, l'étudiant·e est appelé·e à faire d'abord un pull-request sur ce repo avec son nouveau cahier des charges.

Chaque cours correspond à environ 2h de travail. L'ensemble du cours correspond donc à environ 30h.

Partie 1 : les bases de React

Cours 1 : rappel en JavaScript

Les objectifs de ce cours sont de revoir les bases de la programmation (variables, conditions, boucles, fonctions et classes) et de se familiariser avec la syntatxe ES6.

Cours 2 : écrire son premier composant

Cours - TP bouton

Cours 3 : réutiliser des composants avec les props

Cours - TP afficher une liste d'utilisateurs

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

Cours - TP gérer un formulaire - TP réveil

Partie 2 : React et son éco-système

Cours 5 : ajoutons un peu de design avec Semantic UI

Cours sur Semantic UI - TP une liste d'utilisateurs avec Semantic UI

Cours 6 : ajoutons un peu de design avec Material UI

Cours sur Material UI - TP une liste d'utilisateurs avec Material UI

Cours 7 : exemple d'application - le pendu

TP du pendu

Cours 8 : interargir avec un backend

Cours sur fetch - TP charger une liste d'utilisateurs

Cours 9 : ajouter plusieurs pages à son application

Cours sur le routeur - TP routeur

Cours 10 : les composants d'ordre supérieur

Cours sur les HOC - TP authentification

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

Cours sur le contexte - TP sélecteur de thème

Partie 3 : utiliser Firebase avec React

Cours 12 : créer des utilisateurs avec Firebase

Cours sur Firebase - Cours sur les utilisateurs dans Firebase - TP cookies d'authentification

Cours 13 : sauvegarder des informations avec Firestore

Cours sur Firestore - TP utilisateurs avancés

Cours 14 : gérer les permissions dans Firebase

Cours sur les permissions dans Firestore - TP jeu multi-joueur

Cours 15 : maîtriser les compteurs avec Firebase

Cours sur les compteurs dans Firestore - TP jeu multi-joueur avec des points