Tâche

Créez un composant nommé Counter qui simule une application de compteur simple. Le composant doit afficher une valeur de compteur et inclure un bouton pour incrémenter cette valeur. La valeur initiale du compteur doit être personnalisable en la passant comme une prop lors de l'utilisation du composant Counter.

Étapes

1. Créez le composant Counter :
   • Définissez un composant fonctionnel nommé Counter dans le fichier Counter.js;
   • Utilisez le hook useState pour gérer l'état du compteur au sein du composant.
2. Affichez la valeur du compteur :
   • Affichez la valeur actuelle du compteur à l'écran.
3. Implémentez un bouton :
   • Utilisez le composant TouchableOpacity de React Native pour créer un bouton;
   • Étiquetez le bouton avec le texte "Increment".
4. Gérez l'incrémentation :
   • Implémentez une fonction, par exemple, incrementCounter, qui incrémente la valeur du compteur de 1 chaque fois que le bouton est pressé;
   • Attachez cette fonction à l'événement onPress du bouton.
5. Valeur initiale personnalisable :
   • Permettez au composant Counter de recevoir une valeur initiale du compteur comme une prop nommée initialValue;
   • Utilisez cette prop pour définir l'état initial du compteur.

Nous devrions voir le résultat suivant après avoir mis en œuvre ces changements.

Dépôt avec les fichiers et dossiers initiaux.

Initier le Projet

Commencez le projet en dupliquant les fichiers et données initiaux via la commande terminal spécifiée.

Accédez au dossier nouvellement généré contenant les fichiers du projet en utilisant la commande :

Ensuite, installez les packages nécessaires avec :

Pour lancer l'application et prévisualiser son interface initiale, exécutez la commande suivante dans le terminal :

Indice

1. Pour gérer l'état, utilisez le hook useState dans le composant Counter;
2. Utilisez les composants Text et TouchableOpacity pour afficher du texte et créer un bouton tactile, respectivement;
3. Passez la valeur initiale du compteur en tant que prop au composant Counter lorsque vous l'utilisez dans un autre fichier.

Si vous rencontrez des obstacles lors de la réalisation de la tâche, nous vous recommandons de consulter l'enregistrement fourni, qui offre une présentation détaillée de chaque aspect. Nous vous souhaitons bonne chance !

En Pratique