Anatomie d'un projet Expo
Explorer les fichiers du projet et créer le premier écran d'accueil du Quiz Cyber.
Objectifs de la séance
- repérer le rôle de chaque fichier du projet (
app.json,package.json,tsconfig.json,src/app/...) ; - comprendre qu'un écran est une fonction qui renvoie du JSX ;
- afficher du texte avec
<View>et<Text>, et le mettre en forme avecStyleSheet; - personnaliser le titre de l'écran et le nom de l'application.
Petite vérification
Avant de commencer, vérifiez si vous savez...
- afficher la version de Node.js installée, en ligne de commandes, et vérifier qu'elle est compatible avec Expo SDK 58
- lancer le projet
quiz-cyber-expoet l'ouvrir dans le navigateur, puis lire la phrase affichée au centre de l'écran - citer la commande qui a supprimé les écrans d'exemple du modèle de projet
📌 Réponse attendue
TP pour réfléchir et résoudre des problèmes
L'écran actuel affiche une phrase en anglais. Votre mission : le transformer en écran d'accueil
du Quiz Cyber, avec un titre et une phrase de présentation. Gardez le serveur lancé
(npx expo start, touche w) : chaque enregistrement met l'écran à jour immédiatement.
Étape 1 — Repérer les fichiers du projet
Ouvrez le dossier quiz-cyber-expo dans VS Code (Fichier > Ouvrir le dossier) et observez
l'arborescence. Le dossier le plus important est src/app/ : chaque fichier de ce dossier est un
écran de l'application.
src/app/index.tsx: l'écran d'accueil (l'adresse/de l'application) ;src/app/_layout.tsx: la mise en page commune à tous les écrans (la barre de titre).
Le dossier src/app/ ne doit contenir que des écrans (et leurs _layout.tsx). Le reste du code
(composants, fonctions, données) sera rangé dans d'autres dossiers de src/ : c'est ce qui rend
un projet facile à reprendre par un autre développeur.
Étape 2 — Écrire le titre de l'écran d'accueil
Ouvrez src/app/index.tsx. Remplacez son contenu par le code ci-dessous, en complétant la ligne
qui affiche le titre Quiz Cyber avec le style styles.titre :
Le modèle appelait la fonction Index. En la renommant Accueil, son rôle devient évident pour
quiconque lit le code. Le nom du fichier (index.tsx), lui, ne change pas : c'est lui qui
détermine l'adresse de l'écran.
Étape 3 — Mettre le titre en forme avec StyleSheet
Sous la fonction Accueil, ajoutez l'objet styles. Complétez la ligne qui met le titre en gras :
Écrire les styles dans un seul StyleSheet.create({...}) en bas du fichier, plutôt que directement
dans chaque balise, garde le JSX lisible et permet de réutiliser un même style plusieurs fois.
Étape 4 — Changer le titre de la barre en haut de l'écran
La barre en haut de l'écran affiche « index » : c'est le nom du fichier. Ouvrez
src/app/_layout.tsx et donnez un titre à tous les écrans de la pile (Stack) :
Dans screenOptions={{ title: "Quiz Cyber" }}, la première paire d'accolades signifie « ici, du
JavaScript », la seconde crée un objet. Cette écriture reviendra très souvent, notamment pour les styles.
Étape 5 — Renommer l'application
Ouvrez app.json : c'est la configuration de l'application (nom, icône, écran de démarrage...).
Remplacez la valeur de "name" par "Quiz Cyber" : c'est le nom affiché sous l'icône de
l'application sur le téléphone. Ne modifiez pas "slug", qui sert d'identifiant technique.
Le nom (name) peut contenir des espaces et des accents : il est fait pour les humains.
L'identifiant (slug) reste en minuscules, sans espace : il est utilisé par les outils d'Expo.
Résultat attendu dans le navigateur :
📌 Une solution
Notions théoriques
Les fichiers du projet
| Fichier ou dossier | Rôle |
|---|---|
src/app/ | les écrans : chaque fichier devient une adresse (index.tsx = /) |
src/app/_layout.tsx | la mise en page commune aux écrans (ici une pile d'écrans) |
assets/ | les images : icône, écran de démarrage (splash screen)... |
app.json | la configuration de l'application : nom, icône, couleurs, extensions |
package.json | la liste des dépendances et les scripts (npm run ...) |
package-lock.json | les versions exactes installées (à ne jamais modifier à la main) |
tsconfig.json | la configuration de TypeScript (et l'alias @/ vers src/) |
node_modules/ | le code des bibliothèques installées (jamais modifié, jamais versionné) |
.gitignore | la liste des fichiers que Git doit ignorer |
Dans tsconfig.json, la ligne "@/*": ["./src/*"] permet d'écrire
import ... from "@/components/Bouton" au lieu de import ... from "../../components/Bouton",
où que l'on soit dans le projet. Vous l'utiliserez dès le prochain tutoriel.
Un écran est une fonction qui renvoie du JSX
export default function Accueil() {
return (
<View>
<Text>Bonjour</Text>
</View>
);
}
- c'est une fonction JavaScript dont le nom commence par une majuscule : un composant ;
- elle renvoie du JSX : une syntaxe qui ressemble à du HTML, écrite dans du JavaScript ;
export defaultrend la fonction utilisable par Expo Router, qui l'affiche comme écran.
Les fichiers qui contiennent du JSX ont l'extension .tsx (TypeScript + JSX).
View et Text : les deux composants de base
<View>est un conteneur (comme une<div>) : il regroupe et dispose d'autres composants ;<Text>affiche du texte.
En React Native, un texte écrit directement dans une <View> provoque une erreur
(« Text strings must be rendered within a <Text> component »). Contrairement au HTML, on ne peut
pas écrire de texte « nu » : il faut toujours l'entourer d'un <Text>.
StyleSheet : la mise en forme
Il n'y a pas de fichier CSS en React Native. Les styles sont des objets JavaScript :
- les propriétés s'écrivent en camelCase :
font-sizedevientfontSize; - les tailles sont des nombres sans unité (
fontSize: 32), exprimés en points indépendants de l'écran ; StyleSheet.create({...})regroupe les styles et vérifie leurs noms ;- un composant reçoit son style par l'attribut
style={styles.titre}.
| CSS | React Native |
|---|---|
font-size: 32px; | fontSize: 32 |
font-weight: bold; | fontWeight: "bold" |
background-color: #fff; | backgroundColor: "#fff" |
text-align: center; | textAlign: "center" |
La mise en page (centrer, aligner, répartir) utilise Flexbox, que vous étudierez en détail au tutoriel 3.
Retenez pour l'instant que flex: 1 fait occuper tout l'espace disponible à la View, et que
alignItems: "center" et justifyContent: "center" centrent son contenu.
La pile d'écrans (Stack)
Le fichier _layout.tsx renvoie un composant <Stack> (une pile) : chaque nouvel écran ouvert
se pose au-dessus du précédent, et le bouton « retour » le retire de la pile, comme une pile
d'assiettes. screenOptions règle les options communes à tous les écrans de la pile, par exemple
leur titre.
Test de mémorisation/compréhension
Exercices complémentaires
Exercice A : une couleur pour le titre
Ajoutez au style titre la propriété color avec la valeur "#1F5FBF" (bleu). Vérifiez le
résultat dans le navigateur.
Exercice B : une phrase en italique
Créez un style sousTitre qui met la phrase « Testez vos connaissances en cybersécurité ! » en
italique (fontStyle: "italic") et en taille 18, puis appliquez-le au deuxième <Text>.
Ce qu'il faut retenir
| Notion | Résumé |
|---|---|
src/app/ | Chaque fichier de ce dossier est un écran ; index.tsx est l'écran d'accueil. |
_layout.tsx | Définit la mise en page commune (ici une pile d'écrans Stack). |
app.json | Configuration de l'application : nom affiché, icône, extensions. |
| Composant | Fonction dont le nom commence par une majuscule et qui renvoie du JSX. |
<View> / <Text> | Conteneur et texte ; tout texte doit être dans un <Text>. |
StyleSheet | Styles écrits en objets JavaScript, propriétés en camelCase, nombres sans unité. |
Aperçu de la prochaine séance
Votre écran d'accueil existe, mais il n'est enregistré que sur votre ordinateur : une panne de disque, et tout est perdu. Dans la prochaine séance, vous allez versionner votre projet avec Git et le publier sur GitHub, comme le font tous les développeurs professionnels.