Créer une application SPA (Single Page Application) avec React est facile et intuitif. A travers l'exemple d'un Blog, cette vidéo montre :
1. Comment créer une application SPA simple contenant trois pages (Home, A propos et Blog)
2. Comment créer et structurer les composants de la page
3. Installer le package react-router-dom
4. Utiliser les composants BrowserRouter, Route et Link de react-router-dom pour créer le système de navigation de la SPA.
5. Tester avec la barre de Navigation et dans la barre d'adresse
6. Utiliser l'API Fetch et useEffect() pour récupérer des données JSON du serveur.
7. Utiliser useState() pour rafraîchir l'état d'un composant
8. Utiliser des liens paramétrés et récupérer les valeurs des paramètres
...
https://www.youtube.com/watch?v=0zL8n3baCFQ
Javascript a très vite évolué, mais nous avons du mal à oublier le mot clé var. Actuellement tous les browsers ont implémenté let et const, il n'y a plus de raison de continuer à utiliser var pour déclarer des variables.
Cette vidéo donne un aperçu sur les défauts de var et les mérites de let et const.
...
https://www.youtube.com/watch?v=FBuCVhha1Mw
Cette vidéo présente les différents modes de positionnement en CSS :
1 - Le positionnement absolute,
2 - Le positionnement fixed,
3 - Le positionnement relative,
4 - Le positionnement sticky
L'utilisation des quatre repères pour se positionner par rapport au document, au viewport ou à l'élément lui même. Le cours est illustré par plusieurs exemples et démonstrations.
Lien des slides : https://layouts.css.daaif.net/#16
Télécharger les slides en local : https://github.com/daaif/css-layout-slides
...
https://www.youtube.com/watch?v=1weE210utvE
Pour ceux qui veulent commencer le développement web. Ce cours est une introduction au langage HTML.
- Les formulaires.
EHTP - GI1 - 2016
Pour étudier la mise en forme des pages web (CSS) : https://www.youtube.com/watch?v=m3ZVkzUsR-s
...
https://www.youtube.com/watch?v=kTkprau3Ng8
Cette série de vidéos introduit les concepts liés aux composants Web. Le but étant de montrer ce qu'apporte chacune des quatre spécifications :
- Les Templates
- Les Custom Elements
- Le Shadow DOM
- Les Imports
L'étude sera faite à travers un exemple simple.
Pour plus d'informations allez sur http://daaif.net
...
https://www.youtube.com/watch?v=361Dqunfkqo
ES6 est déjà en grande partie supporté par la plupart des navigateurs. Quels sont les apports importants de ce standard dans le développement web.
Typescript est un préalable à Angular 2.
Apprendre ES6 avant Typescript permet de faire la part des choses entre JS et Typescript.
...
https://www.youtube.com/watch?v=mZKEt4DRshI
Vues générale sur les sessions en PHP à travers un exemple simple d'authentification.
Pour plus de vidéos : http://daaif.net
...
https://www.youtube.com/watch?v=lIEWvgNxngU
Javascript est mono-thread, ce qui signifie que tout le code s'exécute dans la même pile. Faire de grandes boucles peut bloquer la pile et donc le navigateur. Dans une telle situation, tous les événements du DOM, le rafraîchissement des styles de la page seront interrompus.
Cette vidéo montre les constituants qui permettent à Javascript de fonctionner, et par là même d'apprendre à éviter de bloquer l'Event Loop.
Ces concepts sont des préalables à l'étude des Promesses en Javascript.
...
https://www.youtube.com/watch?v=qyOnfMXKYxE