Skip to content
Learni
Voir tous les tutoriels
Développement Mobile

Comment créer votre première app React Native en 2026

12 minBEGINNER
JavaScriptReact NativeExpoMobile
Read in English

Introduction

React Native est un framework puissant pour développer des applications mobiles natives iOS et Android à partir d'un seul codebase JavaScript. En 2026, avec Expo comme outil principal, le processus est simplifié pour les débutants : pas besoin de Xcode ou Android Studio pour démarrer. Ce tutoriel vous guide pas à pas pour créer une app interactive avec un compteur, un bouton et une liste de tâches.

Pourquoi React Native ? Il offre des performances natives, un hot-reload instantané et une communauté massive. Imaginez construire une app comme Instagram en JavaScript ! Vous apprendrez les bases : composants, état, styles et liste. À la fin, vous aurez une app fonctionnelle prête à être déployée sur Expo Go. Temps estimé : 30 minutes. Idéal pour les développeurs web passant au mobile.

Prérequis

  • Node.js 20+ installé (vérifiez avec node -v)
  • Un émulateur Android/iOS ou l'app Expo Go sur votre smartphone
  • Connaissances de base en JavaScript et React (hooks comme useState)
  • Un compte gratuit sur expo.dev

Installer Expo CLI

terminal
npm install -g @expo/cli
expo --version

Cette commande installe globalement Expo CLI, l'outil officiel pour gérer les projets React Native sans configuration native complexe. Vérifiez l'installation avec expo --version. Évitez les erreurs en utilisant npm plutôt que yarn pour la compatibilité 2026.

Créer et lancer le projet initial

Maintenant, générez un nouveau projet Expo. Expo gère le bundling, les dépendances et le développement cross-platform. Téléchargez Expo Go sur votre phone pour tester en live.

Initialiser le projet

terminal
npx create-expo-app MonAppPremiere --template blank
cd MonAppPremiere
npx expo start

Crée un projet vide nommé 'MonAppPremiere' et le lance avec expo start. Scannez le QR code avec Expo Go pour voir 'Hello World' sur votre device. Le serveur de dev tourne sur Metro bundler ; Ctrl+C pour arrêter.

App.js basique avec texte et styles

App.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Ma Première App React Native !</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

Ce code remplace le contenu par défaut : un conteneur centré avec un titre stylé. StyleSheet.create optimise les styles comme des CSS-in-JS. flex:1 remplit l'écran entier ; testez le hot-reload en sauvegardant.

Ajouter de l'interactivité avec useState

Passons à l'état local avec useState. C'est comme let en JS, mais réactif : les changements déclenchent un re-render. Nous créons un compteur cliquable, parfait pour comprendre les hooks en mobile.

Compteur interactif

App.js
import { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default function App() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Compteur : {count}</Text>
      <TouchableOpacity style={styles.button} onPress={increment}>
        <Text style={styles.buttonText}>+1</Text>
      </TouchableOpacity>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 8,
  },
  buttonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

Ajoute un état count et un bouton TouchableOpacity qui incrémente via onPress. Les styles s'inspirent de Material Design pour un look natif. Piège : n'oubliez pas d'importer useState et TouchableOpacity.

Liste de tâches avec FlatList

App.js
import { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, TouchableOpacity, FlatList, TextInput } from 'react-native';

export default function App() {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState('');

  const addTask = () => {
    if (input.trim()) {
      setTasks([...tasks, { id: Date.now().toString(), text: input }]);
      setInput('');
    }
  };

  const renderItem = ({ item }) => (
    <View style={styles.taskItem}>
      <Text style={styles.taskText}>{item.text}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Liste de Tâches</Text>
      <TextInput
        style={styles.input}
        value={input}
        onChangeText={setInput}
        placeholder="Ajoutez une tâche"
      />
      <TouchableOpacity style={styles.button} onPress={addTask}>
        <Text style={styles.buttonText}>Ajouter</Text>
      </TouchableOpacity>
      <FlatList
        data={tasks}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        style={styles.list}
      />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 12,
    fontSize: 16,
    borderRadius: 8,
    marginBottom: 10,
  },
  button: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 8,
    marginBottom: 20,
  },
  buttonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  list: {
    flex: 1,
  },
  taskItem: {
    backgroundColor: '#f0f0f0',
    padding: 15,
    marginVertical: 5,
    borderRadius: 8,
  },
  taskText: {
    fontSize: 16,
  },
});

Intègre FlatList pour une liste performante (virtuelle, comme RecyclerView Android). TextInput capture l'input ; keyExtractor est obligatoire pour les perfs. Ajoute des tâches dynamiquement sans re-render total. Piège : toujours trim() l'input pour éviter les tâches vides.

Tester sur device réel

Votre app est maintenant complète ! Avec expo start, scannez le QR sur Expo Go. Pour build : eas build après eas login.

Build pour production

terminal
npx expo install expo-dev-client eas-cli
expo login
eas build --platform all

Installe EAS CLI pour les builds cloud. eas build génère des APK/IPA sans setup local. Publiez avec eas submit pour les stores. Économise des heures vs config native.

Bonnes pratiques

  • Utilisez toujours StyleSheet : performances 10x meilleures que les objets inline.
  • Hooks au top : useState et useEffect pour l'état ; évitez les classes.
  • FlatList pour les listes : native et optimisée, pas map dans ScrollView.
  • Testez sur device réel : émulateurs masquent les perfs réelles.
  • TypeScript dès le début : npx create-expo-app --template blank-typescript.

Erreurs courantes à éviter

  • Oublier flex:1 sur le conteneur racine : l'app ne remplit pas l'écran.
  • Pas de keyExtractor sur FlatList : crash ou lags en prod.
  • Inputs non gérés : onChangeText sans value rend le champ non-contrôlé.
  • Styles inline excessifs : ralentit le rendu ; centralisez dans StyleSheet.

Pour aller plus loin

Maîtrisez la navigation avec @react-navigation. Explorez les animations via react-native-reanimated. Pour un projet pro, intégrez Firebase ou Supabase.

Découvrez nos formations Learni sur React Native : du beginner à expert en 4 semaines.