Séance 1 : prise de contact, premier exercices en JavaScript
Nous avons parcouru ensemble le module 1 du MOOC, et une partie du module 2, et fait plusieurs exercices en live coding:
- Exercice fait à l'aide de fichiers séparés index.html, js/script.js, css/styles.css, et des images dans un répertoire assets. Zip de l'exercice ici : ESTIA.zip
- Exercices sur les tableaux et les boucles for et itérateurs forEach, avec à fin un exemple de requête fetch pour aller cherches des données distantes sur Metallica et afficher les membres du groupe dans la console. Ouvrir les onglets "JavaScript" et "Console" de jsbin, puis cliquer sur bouton "run" et regarder la console : https://jsbin.com/veseroc/edit?html,js,console
- Exercice sur les équations du second degrès, utilisation de champs <input type="number>, d'événements de type input pour récupérer les valeurs de a, b et c dans la formule y = ax^2 + bx + c. Calcul en temps réel (au fur et à mesure qu'on change les valeurs) du déterminant, des racines et dessins graphique de la courbe à l'aide d'une librairie externee : https://jsbin.com/hoherut/edit?js,output
- Exercice fait à la fin de la journée : dessin et animation en JavaScript à l'aide de l'API de l'élément canvas de HTML5. On a dessiné un petit monstre qui se déplace à 60 images/seconde, déplacement avec les flèches du clavier : https://jsbin.com/werasog/edit?html,output
Séance 2 matin : introduction aux classes et objets JavaScript que l'on peut instancier avec des "new"
Exemples en live coding:
Séance 2 après-midi : premiers pas avec React
Supports de cours :
Exercices d'introduction, dans une IDE en ligne
On peut faire du react dans JsBin/JsFiddle/CodePen, mais croyez-moi, juste pour de petits exemples !
Exercice à faire en vous aidant des exercices précédents:
Pour vous donner une idée du résultat attendu,voici l'équivalent en VueJS: http://jsbin.com/guwetoy/1/edit?html,output
Je conseille de partir de cet exemple React: le composant en classe ES6
En vous aidant de l'exemple fait en classe en live coding, voud devrez faire incrémentalement, en testant après chaque étape :
- Créez un <div> et affichez dedans un composant Root avec React (l'App des exemples)
- Affichez un tableau de hobbies dans ce <div> (foot, tennis, jeux video, etc.) sous la forme d'une liste. Chaque hobby sera un <li>. Vous fournirez des hobbies par défaut.
- Ajoutez un bouton 'Nouveau Hobby' et un champ input pour saisir le nom du hobbie à rajouter. La liste doit se mettre à jour.
- Rendez les hobbies clickables pour qu'on puisse les supprimer
- Un message <p>Hobby supprimé !</p> devra apparaitre lorsqu'un hobby est supprimé
- Ajoutez un compteur de hobbies (<p>Hobbies: 4</p>) au-dessus de la liste des hobbies, qui indiquera le nombre de hobbies dans la liste.
- Vous changerez les styles CSS des éléments de la liste pour qu'ils s'affichent en rouge et vert à chaque ligne, en alternance. Vous utiliserez aussi des classes CSS dynamiques pour afficher le compteur en rouge si le nombre de hobbies est supérieur à trois, en vert sinon.
- Chaque <li>, chaque hobby, sera maintenant dans un composant <Hobby/>
ICI UNE CORRECTION: https://codepen.io/w3devcampus/pen/xxKeJZW
Vous n'êtes pas connecté. Connexion 