Comment créer un projet React Native Expo

Bienvenue dans ce guide détaillé sur la création d'un projet React Native à l'aide d'Expo.

Si vous êtes un développeur cherchant à explorer les possibilités offertes par React Native tout en bénéficiant de la simplicité d'Expo, vous êtes au bon endroit.

Je vais vous guider à travers chaque étape, en mettant en lumière les points cruciaux et en partageant des conseils pratiques issus de mon expérience.

Qu'est-ce qu'Expo?

Avant de plonger dans le vif du sujet, clarifions ce qu'est Expo. Expo est un ensemble d'outils et de services construits autour de React Native, conçus pour simplifier le processus de développement mobile.

En utilisant Expo, vous pouvez éviter la complexité des configurations natives, ce qui vous permet de vous concentrer sur le code et la logique de votre application.

Prérequis

Avant de commencer, assurez-vous que vous avez les éléments suivants installés sur votre machine :

1. Node.js : Expo nécessite Node.js. Vous pouvez le télécharger depuis nodejs.org.
2. npm ou yarn : Ce sont des gestionnaires de paquets pour Node.js. npm est généralement installé avec Node.js, mais vous pouvez aussi utiliser yarn si vous le préférez.
3. Expo CLI : Outil en ligne de commande pour interagir avec Expo.

Étape 1 : Installer Expo CLI

La première étape pour créer un projet React Native avec Expo est d'installer Expo CLI. Ouvrez votre terminal et exécutez la commande suivante :

npm install -g expo-cli

Cela installera Expo CLI globalement sur votre machine, vous permettant de l'utiliser partout dans votre terminal.

Étape 2 : Créer un nouveau projet

Une fois Expo CLI installé, vous pouvez créer un nouveau projet en utilisant la commande suivante :

expo init NomDeVotreProjet

Vous serez invité à choisir un modèle pour votre projet. Pour débuter, je vous recommande de choisir le modèle "blank" (vide), qui est léger et vous permet de partir de zéro :

? Choose a template: ›
  ----- Managed workflow -----
  blank                 a minimal app as clean as an empty canvas
  blank (TypeScript)    a minimal app as clean as an empty canvas with TypeScript
  tabs (TypeScript)     a set of tabs using react-navigation and TypeScript
  ----- Bare workflow -----
  minimal                a minimal app as clean as an empty canvas

Étape 3 : Naviguer dans le projet

Après avoir créé votre projet, rendez-vous dans le répertoire de votre projet :

cd NomDeVotreProjet

Étape 4 : Lancer le serveur de développement

Pour voir votre application en action, lancez le serveur de développement avec la commande suivante :

expo start

Cela ouvrira Expo Developer Tools dans votre navigateur par défaut et vous donnera un QR code que vous pouvez scanner avec l'application Expo Go sur votre appareil mobile pour voir votre application en direct.

Étape 5 : Éditer votre application

À ce stade, vous pouvez commencer à éditer votre application. Par défaut, Expo crée un fichier App.js dans le répertoire racine de votre projet. Ouvrez ce fichier dans votre éditeur de texte préféré et commencez à coder !

Voici un exemple simple de ce à quoi pourrait ressembler votre App.js :

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Bonjour, React Native avec Expo !</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
  },
});

Étape 6 : Tester votre application

Après avoir modifié votre code, sauvegardez les fichiers et observez les changements en temps réel sur l'application Expo Go sur votre appareil. Expo utilise un mécanisme de rechargement à chaud, ce qui signifie que vos modifications seront automatiquement reflétées sans avoir besoin de redémarrer l'application.

Étape 7 : Construire pour la production

Lorsque vous êtes prêt à publier votre application, vous pouvez utiliser Expo pour créer des versions de production.

Vous pouvez soit utiliser les services de construction d'Expo, soit éjecter votre projet pour avoir un contrôle plus approfondi. Pour des constructions simples, utilisez :

expo build:android
expo build:ios

Ces commandes construiront vos applications pour Android et iOS respectivement.

Conclusion

Créer un projet React Native avec Expo est une manière efficace et accessible de développer des applications mobiles modernes.

Grâce à Expo, vous pouvez rapidement mettre en place un environnement de développement sans vous soucier des configurations complexes.

J'espère que ce guide vous a été utile et que vous êtes maintenant prêt à plonger dans le développement de votre application.

N'hésitez pas à explorer davantage les fonctionnalités d'Expo et à consulter la documentation officielle pour des informations plus détaillées. Bonne programmation !