TP : Initiation à React.js
Mise en place
Rendez-vous sur : https://codesandbox.io/s/tp-react-lp-2019-69jn0
Une fois sur la page, commencez par vous connecter avec votre compte Github. Cette étape est optionnelle, mais vous assurera de ne pas perdre votre travail.
Une fois connecté, vous pouvez modifiez les fichiers. Lorsque vous sauvegarderez (CTRL+S), un message apparaîtra en bas à gauche, vous indiquant que la sandbox a été forkée. Notez que l'URL de la page a changé. C'est cette URL que je vous demanderai de me fournir pour rendre ce TP.
Exercice 1
Modifiez le fichier CustomButton.js afin d'y déclarer un composant React. Celui-ci devra :
Afficher un bouton (élément HTML de base :
<button>
)Le bouton devra avoir le style
pure-material-button
définit dans le fichier styles.cssUn clic sur le bouton devra déclencher la fonction définit par la propriété
action
Le texte du bouton sera définit par la propriété
text
Vous pouvez valider l'exercice en constatant l'affichage de votre bouton.
Exercice 2
Créez le fichier TextInput.js afin d'y déclarer un composant React. Celui-ci devra :
Afficher un input de type
text
(élément HTML de base :<input type="text">
)Le composant devra avoir le style
input
définit dans le fichier styles.css
Intégrez ce nouveau composant dans le composant App, après le bouton.
Exercice 3
Vous souhaitez utiliser un composant existant externe à votre projet. Ajoutez la librairie @material-ui/core
en cliquant sur le bouton "Add Dependency".
Une fois la librairie installée, importez la classe Button de Material UI dans votre fichier App.js après le TextInput. Vous trouverez un exemple d'utilisation ici : https://material-ui.com/components/buttons/
Au clic sur ce nouveau bouton, un message doit être affiché dans la console (console.log
).
Exercice 4
Dupliquez le fichier CustomButton.js (DisablableButton.js) puis importez-le trois fois à la suite. On veut maintenant ces boutons se désactivent lorsque l'on clique dessus. Seul le texte sera modifiable et sera passé depuis App.js.
Il faut pour cela :
Ajouter un élément à son state local (ex:
disabled
)Utiliser cet élément pour définir la valeur de la propriété disabled du
<button>
HTMLDéfinir une méthode
handleClick
qui va changer la valeur du state localFaire que la fonction soit appelée au clic sur le bouton
Exercice 5
Créez le fichier NewPeople.js afin d'y déclarer un composant React. Celui-ci devra :
Permettre la saisie d'un nom et d'un prénom dans deux champs différents. Utilisez la classe
TextField
de Material UI. Vous trouverez des exemples d'utilisation ici : https://material-ui.com/components/text-fields/Affichez la concaténation du prénom et du nom dans un paragraphe HTML (
<p>
) lors de la saisie. Tant qu'un champ n'est pas rempli, la valeur par défaut sera une chaîne de caractères vide.
Intégrez ce nouveau composant dans le composant App.
Exercice 6
Créez le fichier NewPeople2.js afin d'y déclarer un composant React. Celui-ci devra :
Permettre la saisie d'un nom et d'un prénom dans deux champs différents. Créez un composant, qui sera fonctionnellement similaire à
TextField
de Material UI (vous pouvez vous baser sur<input>
).Affichez la concaténation du prénom et du nom dans un paragraphe HTML (
<p>
) lors de la saisie. Tant qu'un champ n'est pas rempli, la valeur par défaut sera une chaîne de caractères vide.
Intégrez ce nouveau composant dans le composant App.
Exercice 7 (bonus)
Vous pouvez vous documenter sur les refs pour réaliser cet exercice.
Ajoutez un CustomButton qui aura pour action de réactiver tous les DisablableButtons ajoutés dans l'exercice 5.
Correction
Last updated