Conclusion - Séance 1

Vous avez terminé les fondamentaux de React Native. Vous êtes maintenant capable de créer des applications mobiles multi-écrans avec Expo.

Ce que vous maîtrisez

Information

Vous avez acquis les compétences pour créer des applications mobiles avec React Native et Expo. Chaque concept de cette séance sera réutilisé dans les séances suivantes.

Paysage mobile

Trois approches : natif (Swift/Kotlin), hybride (WebView), cross-platform (React Native/Flutter)
React Native : composants natifs, pas de WebView, une seule base de code
Expo : outils pour simplifier le développement (Expo Go, SDK, Router)

Composants primitifs

View : conteneur de base (remplace <div>)
Text : affichage de texte (remplace <p>, <h1>, etc.)
Image : affichage d'images (dimensions obligatoires pour les images distantes)
ScrollView : zone défilable (pas de scroll automatique en React Native)
SafeAreaView : gestion de l'encoche et de la barre d'état

StyleSheet et Flexbox

StyleSheet.create() : styles en JavaScript, pas de fichiers CSS
Pas de cascade : chaque composant reçoit ses propres styles
Flexbox vertical : flexDirection: 'column' par défaut (pas row)
Density-independent pixels : pas d'unités px, rem, %

Navigation

Expo Router : routing basé sur les fichiers (comme Next.js)
Stack : pile d'écrans, swipe pour revenir
Tabs : barre d'onglets en bas de l'écran
Link et useRouter : navigation déclarative et programmatique

Web vs Mobile : les différences clés

Concept	React web (R4A10)	React Native (R4A11)
Outil de création	`npm create vite@latest`	`npx create-expo-app@latest`
Conteneur	`<div>`	`<View>`
Texte	`<p>`, `<h1>`, `<span>`	`<Text>` (unique)
Styles	CSS, className, cascade	StyleSheet.create(), pas de cascade
Flexbox par défaut	`row` (horizontal)	`column` (vertical)
Scroll	Automatique (navigateur)	`<ScrollView>` explicite
Événement clic	`onClick`	`onPress`
Navigation	React Router (URLs)	Expo Router (fichiers, Stack, Tabs)
Rechargement auto	HMR (navigateur)	Fast Refresh (téléphone)
Ce qui reste identique	Composants, props, hooks (useState, useEffect), JSX, .map(), conditions

La Séance 2 : État, Formulaires et Persistance

Maintenant que vous maîtrisez les fondamentaux de React Native, la Séance 2 ajoutera l'interactivité :

useState sur mobile : gérer l'état des composants (vous connaissez déjà de R4A10)
TextInput : saisie de texte (équivalent de <input> en HTML)
Formulaires : créer des formulaires contrôlés
Cycle de vie : useEffect pour les effets de bord
AsyncStorage : persister des données localement (équivalent de localStorage)
Mode hors ligne : faire fonctionner l'application sans connexion

Bonne nouvelle

En R4A10, vous avez déjà appris useState, useEffect et les formulaires contrôlés. En Séance 2 de R4A11, vous allez appliquer ces mêmes concepts au mobile. La transition sera naturelle.

Validation des compétences

Avant de passer à la Séance 2, vérifiez que vous maîtrisez ces concepts :

Je sais créer un projet Expo et le lancer avec Expo Go

npx create-expo-app, npx expo start, scanner le QR code

Je connais les composants primitifs

View, Text, Image, ScrollView, SafeAreaView et leurs différences avec le HTML

Je sais appliquer des styles avec StyleSheet.create()

Pas de CSS, pas de cascade, Flexbox en colonne par défaut

Je sais mettre en place la navigation

Expo Router, Stack, Tabs, Link, useRouter, routes dynamiques

Je sais construire une application multi-écrans

Combiner onglets, listes, écrans détail avec passage de paramètres

Besoin de réviser ?

Si vous n'êtes pas à l'aise avec l'un de ces concepts :

Relisez la page correspondante
Refaites le TP guidé (application Mon Carnet)
Faites les exercices de cette séance
Posez des questions en cours

Ne passez pas à la Séance 2 sans maîtriser ces bases : useState et les formulaires mobiles s'appuient sur ces fondamentaux.

Conseils pour la suite

Pour progresser

1. Expérimentez dans votre projet Expo

Modifiez les styles, ajoutez des écrans, testez les layouts
Le Fast Refresh vous donne un retour instantané

2. Faites le lien avec R4A10

Quand vous apprenez un concept mobile, pensez à l'équivalent web
Les concepts React (composants, props, hooks) sont identiques

3. Consultez la documentation Expo

docs.expo.dev est la référence
Cherchez les composants par nom quand vous avez un doute

4. Utilisez l'IA avec le vocabulaire React Native

Parlez de "View" et "Text", pas de "div" et "p"
Mentionnez "StyleSheet" et "Expo Router"
Validez toujours que le code généré utilise les composants React Native

Comprendre, pas mémoriser

Vous n'avez pas besoin de connaître par coeur tous les composants et toutes les propriétés de style. L'important est de :

Savoir que ça existe : View, Text, Image, StyleSheet, Expo Router
Comprendre les principes : pas de CSS, Flexbox vertical, routing par fichiers
Savoir chercher : documentation Expo, exemples, autocomplétion
Valider le code : reconnaître les erreurs courantes (texte hors Text, image sans dimensions)

Ressources

React Native Documentation

Documentation officielle de React Native

Documentation

Expo Documentation

Documentation officielle d'Expo

Documentation

Expo Router

Guide complet sur le routing avec Expo

Documentation

React Native Core Components

Référence des composants primitifs (View, Text, Image, etc.)

Documentation

Bravo !

Vous avez terminé les fondamentaux de React Native

Vous savez maintenant créer des applications mobiles multi-écrans avec Expo, en réutilisant vos connaissances React du web.

Faire le quiz de validation