Scribd
Importer
14 vues3 pages

Exercices pratiques sur React et React Native

Le document présente plusieurs exercices d'applications en React et React Native, incluant la création de composants utilisant des props, l'état, les méthodes de cycle de vie, et les hooks. Les applications abordent des concepts tels que l'affichage conditionnel, la gestion d'état avec useState et useEffect, ainsi que la création de listes et de mises en page. Chaque application est conçue pour renforcer la compréhension des fonctionnalités de React et React Native à travers des exemples pratiques.

Transféré par

Dountche Issa Kone
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
14 vues3 pages

Exercices pratiques sur React et React Native

Le document présente plusieurs exercices d'applications en React et React Native, incluant la création de composants utilisant des props, l'état, les méthodes de cycle de vie, et les hooks. Les applications abordent des concepts tels que l'affichage conditionnel, la gestion d'état avec useState et useEffect, ainsi que la création de listes et de mises en page. Chaque application est conçue pour renforcer la compréhension des fonctionnalités de React et React Native à travers des exemples pratiques.

Transféré par

Dountche Issa Kone
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Exercices d’applications

React :
Application 1 : Utilisation des props et affichage conditionnel
Créer un composant de fonction nommé Etudiant1 qui affiche le nom et la moyenne de
l’étudiant si la moyenne est supérieure à 10 sinon en plus de son nom et sa moyenne,
affiche la date de la deuxième session.
- La date de la session 2 est la date du jour plus un mois.
- Le composant prendra 3 attributs : nom, noteEC (coefficient 1), notePR
(coefficient 2)

Application 2 : Utilisation de l’état d’un composant de classe


Créer un composant de classe nommé Etudiant2 avec les attributs nom et moyenne
dans l’objet state. Le composant affiche le nom et la moyenne de l’étudiant si la
moyenne est supérieure à 10 sinon en plus de son nom et sa moyenne, affiche la date
de la deuxième session.
- La moyenne est la valeur arrondie d’un nombre aléatoire multiplié par 20.
- Ajouter un bouton permettant de régénérer la moyenne lorsque l’évènement
onClick est déclenché.
- La date de la session 2 est la date du jour plus un mois.

Application 3 : Suivre l’état d’un composant de fonction avec useState


Reprendre l’application 2 en utilisant un composant de fonction nommé Etudiant3 et le
hook d’état useState.

Application 4 : Utilisation des méthodes de cycle de vie d’un composant de


classe.
Créer un composant de classe nommé Clock qui affiche la date et l’heure lors du
montage(componentDidMount) du composant. Utiliser la fonction setInterval pour
mettre à jour la date et l’heure chaque seconde puis stocker la minuterie (résultat de
setInterval) dans une variable. Enfin, effacer cette minuterie avec la fonction
clearInterval lors du démontage(componentWillUnmount) du composant.
Application 5 : Utilisation du Hook d’effet (useEffect) dans un composant de
fonction.
Reprendre l’application 4 en utilisant un composant de fonction nommé Clock2 et le
hook d’effet useEffect.

React Native :
Application 6 : Composants de base et style
Créer et afficher une liste d’article à l’aide des composants FlatList, View, Image et Text.
Créer dans un premier temps, une constante contenant une liste de 5 objets dont les
attributs sont :
- Name : le libellé de l’article (en noir)
- Price : le prix de l’article (en gris)
- Like : le nombre de fois cet article a été aimé (en rouge)
Ensuite, créer une fonction prenant en paramètre un article et retourne le rendu de
l’article en affichant une image de votre choix pour l’article et les attributs de celui-ci.
NB : Le composant devra se nommer Application6

Application 7 : Mise en page d’un composant


Créer un composant de (fonction ou classe) nommé Application7 affichant ce mini
damier :
Application 8 : La navigation en React Native

Vous aimerez peut-être aussi