Front-end · 8 mondes · 32 étapes

React Native

De vraies applis iOS et Android avec React.

Progression

0 %

0/32 étapes terminées

Mode 5

Apprendre en construisant

Cinq projets concrets, du plus simple au plus ambitieux. Chaque étape est vérifiée automatiquement, et chaque projet te dit précisément ce qu'il t'apprend.

« Suggère des projets pratiques pour appliquer la compétence dans des situations réelles. Explique ce que chaque projet m'apprend et comment il renforce ma compréhension du sujet. »

Projet 1

Débutant · 45 min

01

0/5 étapes

Carte de visite

Ta carte de développeur·se, avec photo, métier et boutons de contact.

ViewTextImageStyleSheetFlexbox

Structurer un écran

Tu décomposes une maquette en boîtes imbriquées : c'est la base de tout écran.

Styliser proprement

Tu ranges tes styles avec StyleSheet et tu joues avec les couleurs, les arrondis et les espacements.

Aligner avec Flexbox

Colonne pour la carte, rangée pour les boutons : tu utilises les deux axes.

5 étapes vérifiées · +60 XP

Construire →

Projet 2

Débutant · 1 h

02

0/5 étapes

Compteur d'hydratation

Compte tes verres d'eau de la journée, avec un objectif et un message de victoire.

useStatePressableRendu conditionnelStyles dynamiques

Faire réagir l'écran

Chaque appui modifie un état et l'interface suit immédiatement.

Protéger ses données

Tu empêches les valeurs impossibles (moins de zéro verre) : c'est de la logique métier.

Afficher selon une condition

Un message et une couleur différents quand l'objectif est atteint.

5 étapes vérifiées · +70 XP

Construire →

Projet 3

Intermédiaire · 1 h 30

03

0/5 étapes

Liste de courses

Ajoute, coche et supprime des articles, avec un compteur et un message quand la liste est vide.

TextInputFlatListImmutabilitéValidation

Formulaires contrôlés

Le champ est piloté par l'état : tu peux le valider et le vider après l'ajout.

Listes dynamiques

Ajouter avec la décomposition, supprimer avec filter, modifier avec map : les trois gestes de base.

États vides

Une liste vide mérite un message clair : c'est un détail qui fait une vraie app.

5 étapes vérifiées · +90 XP

Construire →

Projet 4

Intermédiaire · 1 h 30

04

0/5 étapes

Quiz des capitales

Un mini-jeu de questions avec score, enchaînement des questions et écran de fin.

CompositionPropsState machinemap

Piloter un parcours

Un index de question et un score suffisent à décrire tout l'état du jeu.

Composer des composants

Un composant Choix réutilisé pour chaque réponse, configuré par des props.

Gérer la fin

Un rendu conditionnel remplace la question par un écran de résultats.

5 étapes vérifiées · +90 XP

Construire →

Projet 5

Avancé · 2 h

05

0/5 étapes

Météo express

Une appli météo qui charge ses données, gère les erreurs et change de ville.

useEffectasync/awaitGestion d'erreursDépendances

Les trois états réseau

Chargement, succès, erreur : ton écran les prévoit tous.

Les dépendances d'effet

Changer de ville relance le chargement automatiquement, grâce au tableau de dépendances.

Réessayer

Un bon écran d'erreur propose toujours une action : c'est une question d'expérience utilisateur.

5 étapes vérifiées · +120 XP

Construire →