Cours JavaScript/ intro aux frameworks JS ESTIA 2019-2020

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 !

• Exemple 1: comprendre le mécanisme de rendu de React
• Exemple 2: évenements et immutable DOM
• Exemple 3: premier composant
• Exemple 4 : on passe des "propriétés" au composant
  
• Exemple 5 : le composant en classe ES6
• Exemple 6: état d'un composant, on refait marcher le bouton
• Exemple 7: rendu conditionnel 
• Exemple 8: rendu de listes dynamiques  Là, si vous avez essayé de taper le code en même temps que moi, vous devez vous dire que c'est la merde à debugger, que les messages d'erreur ne sont pas clairs etc...
• Exemples 9 et 10 : styles CSS conditionnels et classes CSS conditionelles 
• Exemple 11: two way binding
  
• Exemple 12: deux composants (dont un "stateless") 
• Exemple 13: passer des infos d'un composant fils à son composant père 

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 :

1. Créez un <div> et affichez dedans un composant Root avec React (l'App des exemples)
    
2. 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.
    
3. Ajoutez un bouton 'Nouveau Hobby' et un champ input pour saisir le nom du hobbie à rajouter. La liste doit se mettre à jour.
    
4. Rendez les hobbies clickables pour qu'on puisse les supprimer
    
5. Un message <p>Hobby supprimé !</p> devra apparaitre lorsqu'un hobby est supprimé
    
6. 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.
    
7. 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. 
    
8. Chaque <li>, chaque hobby, sera maintenant dans un composant <Hobby/> 

ICI CORRRECTION FAITE EN CLASSE : https://codepen.io/w3devcampus/pen/xxGOPXO?editors=0010

ICI UNE CORRECTION AVANCEE (qui utilise la "destructuration" et les arrow functions en masse): https://codepen.io/w3devcampus/pen/xxKeJZW

Exercices avec un environnement "CLI"

Si on va voir la page de facebook sur "how to start with React", il y a un chapitre qui concerne le mode "CLI": https://reactjs.org/docs/add-react-to-a-new-app.html

1. Vous devez avoir nodeJS correctement installé (node, npm, etc, tout ceci doit fonctionner...)
    
2. Installez l'extension Google Chrome "React Developer Tools" (https://chrome.google.com/webstore/d...jfkapdkoienihi), elle existe aussi pour Firefox.
    
3. Installez une bonne fenêtre terminal pour Windows -si vous êtes sous windows comme http://cmder.net/ ou autre (github bash, etc.) si je vous vois avec une fenêtre DOS basique vous allez m'entendre ! Vous pouvez à la rigueur utiliser le terminal de Visual Studio Code.
    
4. Ouvrir la ligne de commande et exécuter la commande "npm install -g create-react-app",
   • Pour vérifier que ça fonctionne, créez un autre répertoire nommé "react_cli" et cd dedans,
   • Executez "create-react-app hello-world" (ça prend du temps, quelques minutes)...
   • Allez dans le répertoire créé (cd hello-world), et faites "npm install" (là aussi, quelques minutes)
   • Exécutez le programme en tapant "npm start", ça doit ouvrir automatiquement le browser sur le port 3000 et afficher une page avec le logo React qui tourne.
   • Editez le code du fichier src/App.js, changez le texte et sauvez -> la page Web de l'application doit se rafraichir automatiquement.
      
5. Maintenant on va étudier le code, regardez les fichiers html, js, les configs etc.
    
6. Essayez de modifier la partie "render" de App.js... hmmm ok. Bon, on va faire un simple composant <Username name="toto"/> qu'on va mettre dans un sous répertoire "components" dans les sources, il va simplement afficher un nom passé en attribut/props dans un paragraphe en couleur. Vous ajouterez dans <App/> Plusieurs instances de ce composant.

Exercice 1: refaire dans le projet les hobbies en mode CLI !

Exercice 2: on va modifier cet exemple pour utiliser un composant <Hobby> qui va afficher le Hobby. En d'autres termes, le rendu d'un hobby (un <li>...</li>) ne se fera pas dans <ListeHobbies> mais dans <Hobby>

Exercice 3: On va modifier cet exemple pour utiliser des données récupérées sur un WebService de l'OpenData. Par exemple on va afficher des infos sur le groupe de rock Metallica (données ici https://wasabi.i3s.unice.fr/search/artist/Metallica)

• Voir avec le prof comment récupérer des données avec fetch.
• Creer un composant <GroupeRock> qui va récupérer sur l'URL de la description de Metallica des infos sur le groupe et les afficher (Nom, photo, description du goupe...)
• Creer un composant <MembresDuGroupe> qui affichera les membres du goupe.
• Cree un composant <ListeAlbums> qui affichera les albums...
• Etc.
   
• Ici correction avec hobbies (inclut fetch)  (désarchiver, cd dans le repertoire, npm install, npm start)