Ceci est un index des vidéos publiées sur les playlists JavaScript/React pour la Wild de Toulouse.
Attention, dans cette playlist, beaucoup de DOM natif car on faisait le projet 2 avec Node.js pour le back, et DOM natif pour le front.
- Coloration syntaxique du HTML dans les template strings ES6 Concerne le dev d'applications en "DOM Natif" dans l'éditeur Atom.
- LiveCoding formulaires
- Todo App Etape 0 Maquette HTML statique
- Todo App Etape 1 Ajout backend Express
- Todo App Etape 1bis Tagger les commits
- Todo App Etape 2 Ajout app frontend
- Todo App Etape 3 Navigation avec page js
- Todo App Etape 4 Fonction render
- Todo App Etape 5 Contenu todo list variable
- Todo App Etape 6 Récupérer tâches du serveur
- Todo App Etape 7 Création de la base de données
- Todo App Etape 8 Test connexion BDD avec Node js
- Todo App Etape 9 Requête BDD pour obtenir les tâches
- Todo App Etape 10 Requête BDD pour UNE tâche
- Todo App Etape 11 Création d'une tâche
- Todo App Etape 12 Réorganisation fichiers backend
- Todo App Etape 13a Essai notifications
- Todo App Etape 13b Intégration notifications
- Todo App Etape 14 Authentification table users
- Todo App Etape 15 Séparation routes serveur
- LiveCoding authentification avec Express Authentification par session (méthode alternative au JWT)
- LiveCoding utilisateur authentifié côté frontend Utilisation côté front
- Blog React Etape 1 Setup ESLint
- Blog React Etape 2 Premier composant
- Blog React Etape 3 Propriétés d'un composant
- Blog React Etape 4 Liste d'articles
- Blog React Etape 5 State
- Blog React Etape 6 MàJ état du composant parent
- Blog React Etape 7 Tests 1 Composants simples
- Blog React Etape 8 Tests 2 Etat du PostEditor
- Blog React Etape 9 PropTypes
- Blog React Etape 10 Routing 1
- Blog React Etape 11 Route avec path variable
- Blog React Etape 12 Intégration template HTML
- API randomuser me et React
- LiveCoding React
- LiveCoding ShoppingCart #1 State
- LiveCoding Shopping Cart #2 Composition
- LiveCoding ShoppingCart #3 Redux #2 écriture d'un reducer
- React Router Layout
- LiveCoding NodeMailer
- LiveCo révisions 1 setup back et front
- LiveCo révisions 7 update a movie
- React Time Tracker App 1 - Setup et premier composant
- React Time Tracker App 2 - Map sur liste de tâches
- React Time Tracker App 3 - Création de tâche
- React Time Tracker App 4 - Ajout tâche au state
- React Time Tracker App 5 - Persistance tâches dans localStorage
- React Time Tracker App 6 - Bascule état fait ou à faire
- React Time Tracker App 7 - Effacer une tâche
- React Time Tracker App 8 - Démarrer et afficher un timer
- React Time Tracker App 9 - Formater le temps restant
- React Time Tracker App 10 - Restructuration state pour timer
- React Time Tracker App 11 - Arrêt timer
- React Time Tracker App 12 - Persistance des tranches horaires
- React Time Tracker App 13 - Notification arrêt du timer
- React Time Tracker App 14 - Modale pour commentaire
Attention sur cette session, pas mal de vidéos ont un son médiocre :
- pour certaines, les cours ont été faits en visio
- pour les autres, le son de la touche "retour" de mon clavier ruine tout si vous écoutez au casque :/
- [JS] Cours #1 - Variables et structures de contrôle (11/09)
- [JS] Cours #2 - Les opérateurs (13/09)
- [JS] Cours #3 - Les tableaux (13/09)
- [JS] Cours #4 - Les fonctions (14/09)
- [JS] Cours #5 - Fonctions anonymes et littéraux (17/09)
- Array map et fonctions fléchées
- ES6 - Fonctions fléchées
- ES6 - Affectation par décomposition
- ES6 - Décomposition de paramètres
- ESLint
- LiveCoding Code asynchrone - des callbacks aux promises
- Cours React #1 - Contexte (DOM), Composant, JSX
- LiveCoding 02/10/18: intégration template blog HTML dans React
- Cours React #2 - Le state
- Cours React #3 JSON, API, Cycle de vie
- Cours React #4 - React Router
Vidéos sur un sujet de dojo donné sur cette session
- Dojo State #1 - Bouton actif/inactif
- Dojo State #2 - Deux boutons actifs/inactifs
- Dojo State #3 - Champs de formulaire
Les deux premières vidéos servent à poser le contexte du développement back-end.
- Web côté serveur #1 - Introduction
- Web côté server #2 - Web dynamique
- Cours LiveCoding Express
- Routage sur Express et React
- LiveCoding API REST Express / MySQL
JWT sans Passport (plus simple)
- React Address Book #0 - Configuration ESLint
- React Address Book #1 - Composant et props
- React Address Book #2 - Répétition du composant Contact
- React Address Book #3 - State et sidebar
- React Address Book #4 - State et sélection d'un contact
- React Address Book #5 - Champ contrôlé par le state
- React Address Book #6 - Ajout d'un contact
- React Address Book #7 - Requête API randomuser
- React Address Book #8 - Requête API & componentDidMount
- React Address Book #9 - Filtrage contacts par genre
- React Address Book #10 - Sauvegarde des contacts
- React Address Book #11 - Thème Bootstrap
- React Address Book #12 - Changer de thème
Bien qu'on ait pas vu Firebase, un élève s'était lancé sur un projet perso qui l'utilisait, j'avais donc fait quelques vidéos introductives.
- Firebase et React #1 - Mise en place et authentification
- Firebase et React #2 - Ecriture dans la base de données
- Firebase et React #3 - Lecture depuis la BDD
- Firebase et React #4 - Retrouver l'utilisateur authentifié
- LiveCoding localStorage #1
- LiveCoding localStorage #2 vidéo complémentaire
- localStorage et API Spotify #3 - Structuration de l'app
Correction du sujet de checkpoint 2 (j'ai normalement ajouté les droits en lecture pour la team JS 02/2019 de Toulouse)
- Pokereact #1 - Affichage liste simple
- Pokereact #2 - Composant Pokemon et props
- Pokereact #3 - Récupération liste pokémons via API
- Pokereact #4 - Récupération détails pokémon via API
- Pokereact #5 - Mise en page avec ReactStrap
- Pokereact #6 - Affichage des moves
- Pokereact #7 - Pagination : mise en place de la structure
- Pokereact #8 - Pagination : gestion du state, fetch des pages
- Pokereact #9 - Pagination (fin) : page active et boutons prev/next
- Pokereact #10 - Routing
- Pokereact #11 - localStorage : sauvegarde liste
- Pokereact #12 - localStorage : sauvegarde détails pokémons
- Pokereact #13 - localStorage : sauvegarde index page courante
- Pokereact #14 - Optimisation et affichage loader
- Albums App 01 - Setup repo unique back et front
- Albums App 02 - Création schéma BDD
- Albums App 03 - Composant AlbumItem
- Albums App 04 - Composant AlbumList
- Albums App 05 - Création backend Node et Express
- Albums App 06 - Connexion front et back
- Albums App 07 - Obtention albums depuis BDD MySQL
- Albums App 08 - Route pour l'insertion d'un album en base
- Albums App 09 - Formulaire creation album et POST vers backend
- Redux Bookmarks #1 - App sans Redux
- Redux Bookmarks #1 bis - Complément: id des bookmarks
- Redux Bookmarks #2 - Mise en place Redux complete
- Redux Bookmarks #2bis - Simplifier App
- Redux Bookmarks #3 - Persistance du state dans localStorage
- Redux Bookmarks #4 - Effacer un bookmark
- Redux Bookmarks #5 - Modifier un bookmark
- Redux Bookmarks #6 Ramifier le state combineReducers
Correction du sujet d'entraînement qui a servi de vrai sujet pour la session 02/2019 !
- Checkpoint 3 training - #1 Mise en place
- Checkpoint 3 training #2 - App Express et creation playlist
- Checkpoint 3 training #3 - Récupérer une playlist par son id
- Checkpoint 3 training #4 - Ajouter une track à une playlist
- Checkpoint 3 training #5 - live coding jeudi 13 partie 1
- Checkpoint 3 training #6 - liveco partie 2 routeur imbriqué
- Checkpoint 3 training #7 - Recherche playlist par artiste
- Checkpoint 3 training #8 - "super bonus" user et playlists favorites
- LiveCoding Redux Blog #1 - Gestion de formulaire
- LiveCoding Redux Blog #2 - Liaison backend
- LiveCoding Redux Blog #3 - Modification article
- Cours&LiveCoding HTML CSS Bootstrap 1 (27/02 matin)
- Cours&LiveCoding HTML CSS Bootstrap 2 (27/02 AM)
- LiveCoding CSS Bootstrap (28/02)
- LiveCoding Bootstrap, containers, etc