Aller au contenu principal

JSX, View, Text et StyleSheet

Afficher la première question du quiz avec ses quatre réponses, en insérant des données dans le JSX et en les mettant en forme.

Objectifs de la séance​

  • insérer des valeurs JavaScript dans le JSX avec les accolades { } ;
  • afficher l'énoncé et les quatre réponses d'une question (accès par [0], [1]...) ;
  • mettre en forme une carte avec borderRadius, padding, borderWidth et la palette COULEURS ;
  • travailler sur une nouvelle branche feature/composants.

Petite vérification​

Avant de commencer, vérifiez si vous savez...

  1. exécuter git branch dans le terminal et lire le nom de la branche sur laquelle vous êtes
  2. ouvrir src/constants/couleurs.ts et donner la valeur de la couleur primaire
  3. exécuter git log --oneline et lire le début du message du commit le plus récent
📌 Réponse attendue

TP pour réfléchir et résoudre des problèmes​

L'écran d'accueil affiche un nombre de questions et l'énoncé de la première. Votre mission : afficher une vraie question de quiz : un titre, une carte blanche avec l'énoncé, puis les quatre réponses. Gardez le serveur lancé (npx expo start, touche w) pour voir le résultat à chaque enregistrement.

Étape 1 — Créer la branche du tutoriel​

Tout ce tutoriel se déroule sur une branche feature/composants, fusionnée dans main à la fin :


Bonne pratique - Une branche par tutoriel de travail

Les séances de ce tutoriel forment un ensemble cohérent (les composants de l'interface). Les regrouper sur une seule branche permet de les relire et de les fusionner ensemble dans une seule Pull Request.

Étape 2 — Importer la palette et la question​

Remplacez le début de src/app/index.tsx : importez la palette de couleurs, la banque de questions, puis sélectionnez la première question.


Bonne pratique - Imports rangés et alias

Les imports de bibliothèques d'abord, puis une ligne vide, puis ceux de votre projet (avec l'alias @/). Ce rangement rend l'en-tête d'un fichier lisible d'un coup d'œil.

Étape 3 — Afficher l'énoncé dans une carte​

Construisez le contenu de l'écran : le titre, puis une View « carte » qui contient l'énoncé. Complétez la ligne qui affiche l'énoncé de la question avec le style styles.enonce :


Bonne pratique - Du texte toujours dans un Text

Le texte venant d'une variable doit lui aussi être placé dans un composant <Text>. Les accolades insèrent la valeur, mais c'est <Text> qui sait l'afficher.

Étape 4 — Afficher les quatre réponses​

Sous la carte, affichez les quatre réponses de la question. Pour l'instant, on y accède une par une avec leur indice (reponses[0], reponses[1]...). Complétez la troisième :


Bonne pratique - Repérer la répétition

Ces quatre lignes quasi identiques sont un signe : le code va pouvoir être simplifié. Vous le ferez dans deux séances avec map(). Cette étape sert à comprendre ce que le code fait avant de le rendre plus court.

Étape 5 — Mettre en forme avec StyleSheet​

Sous la fonction Accueil, définissez les styles. Le fond de l'écran, les couleurs et l'arrondi viennent de la palette. Complétez le style de la carte avec ses coins arrondis :

Enregistrez : la page doit afficher un titre bleu, une carte blanche contenant l'énoncé et quatre cadres blancs bordés pour les réponses, sur un fond gris très clair.


Bonne pratique - Toutes les couleurs viennent de COULEURS

Aucune couleur n'est écrite « en dur » ("#fff") dans l'écran : tout passe par COULEURS. Si la charte graphique change, une seule modification dans couleurs.ts met à jour toute l'application.

Étape 6 — Enregistrer votre travail sur la branche​


Bonne pratique - Le premier push de la branche avec -u

L'option -u n'est nécessaire qu'au premier envoi de la branche. Aux séances suivantes, un simple git push suffira.

📌 Une solution

Notions théoriques​

Qu'est-ce que le JSX ?​

Le JSX est une syntaxe qui permet d'écrire des composants d'interface (<View>, <Text>) directement dans le code JavaScript. Une fonction composant renvoie du JSX, et React Native l'affiche à l'écran.

Quelques règles à retenir :

  • un composant doit renvoyer un seul élément racine (ici une <View> qui contient tout le reste) ;
  • toute balise ouverte doit être fermée (<Text>...</Text>, ou <Image /> sans contenu) ;
  • les attributs s'écrivent comme en HTML, mais leur valeur JavaScript se met entre accolades ;
  • un commentaire dans le JSX s'écrit {/* commentaire */}.

Insérer une valeur avec les accolades​

Dans le JSX, les accolades { } ouvrent une fenêtre sur le JavaScript :

<Text>{question.enonce}</Text>                  {/* un champ d'objet */}
<Text>{question.reponses[2].texte}</Text>       {/* un élément de tableau */}
<Text>Niveau {question.niveau}</Text>           {/* texte + valeur */}
<Text style={styles.titre}>Quiz Cyber</Text>    {/* valeur d'un attribut */}

On peut y placer n'importe quelle expression (un calcul, un appel de fonction, une comparaison...) mais pas une instruction comme if ou for.

StyleSheet : les propriétés de base​

PropriétéEffet
paddingmarge intérieure (entre le bord et le contenu)
margin / marginBottommarge extérieure (entre l'élément et ses voisins)
borderWidth, borderColorépaisseur et couleur de la bordure
borderRadiusarrondi des coins
backgroundColorcouleur de fond
fontSize, fontWeight, colortaille, graisse ("bold", "600") et couleur du texte

Les nombres s'écrivent sans unité (padding: 16). Les couleurs et les valeurs de texte s'écrivent entre guillemets, sauf quand elles viennent d'une variable (COULEURS.primaire).

Pas de cascade

Contrairement au CSS, un style n'est pas hérité : mettre color sur une <View> ne change pas la couleur des <Text> qu'elle contient. Chaque <Text> reçoit son propre style, d'où les styles enonce et reponse.

Pourquoi COULEURS ?​

Écrire COULEURS.primaire plutôt que "#1F5FBF" à chaque endroit évite les incohérences (deux bleus légèrement différents) et permet de changer l'apparence de toute l'application en modifiant une seule ligne.

Un texte hors d'un Text

Écrire <View>{question.enonce}</View> provoque une erreur : en React Native, tout texte (même venant d'une variable) doit se trouver à l'intérieur d'un composant <Text>.

Test de mémorisation/compréhension​


Comment insère-t-on la valeur de question.enonce dans le JSX ?


Que se passe-t-il si l'on écrit <View>Bonjour</View> en React Native ?


Que signifie la propriété padding: 16 sur une View ?


Quelle écriture permet d'obtenir la couleur primaire de la palette ?


Pourquoi la couleur donnée à une View n'est-elle pas appliquée au Text qu'elle contient ?


Que renvoie question.reponses[0] dans la première question de la banque ?


Exercices complémentaires​

Exercice A : afficher le niveau​

Sous le titre Quiz Cyber, ajoutez un <Text> qui affiche « Niveau » suivi du niveau de la question (question.niveau), avec la couleur COULEURS.texteSecondaire.

Exercice B : tester la fragilité de l'accès par indice​

Supprimez temporairement la quatrième réponse de la première question dans questionsLocales.ts. Que se passe-t-il à l'écran ? Lisez le message d'erreur et expliquez pourquoi l'accès par indice est fragile. Remettez la réponse.

Ce qu'il faut retenir​

NotionRésumé
JSXSyntaxe qui décrit l'interface dans le code JavaScript ; un seul élément racine.
{ }Insèrent une expression JavaScript dans le JSX : {question.enonce}.
TextTout texte doit être dans un composant <Text>.
StyleSheet.createRegroupe les styles ; propriétés en camelCase, nombres sans unité.
Pas de cascadeUn style n'est pas hérité : chaque <Text> reçoit le sien.
COULEURSPalette unique : aucune couleur écrite en dur dans les écrans.

Aperçu de la prochaine séance​

L'écran fonctionne, mais le code est long et répétitif : la carte et les boutons de réponse mériteraient d'être réutilisables. Dans la prochaine séance, vous allez en faire deux composants, CarteQuestion et BoutonReponse, qui reçoivent leurs informations par des props, et rendre les réponses cliquables.