Un guide pour commencer à utiliser Expo avec le développement autochtone réagisse

Comprendre l'Expo dans l'écosystème autochtone réagissant

Les applications natives React sont construites avec JavaScript mais dépendent des modules natifs pour des fonctionnalités comme la caméra, Bluetooth ou GPS. Traditionnellement, la configuration de ces modules natifs nécessite Android Studio, Xcode, Gradle et CocoaPods – une courbe d'apprentissage raide pour les nouveaux arrivants. Expo abstienne cette complexité. Il fournit un workflow géré où la plupart des capacités natives sont préconfigurées, vous permettant d'écrire du code et de voir les résultats immédiatement. Expo n'est pas un cadre distinct; il s'agit d'une collection d'outils—Expo CLI, Expo Go[ (l'application cliente pour les tests), et Expo SDK (un ensemble de bibliothèques qui enveloppent les API natives).

La distinction clé est entre les flux de travail géré et bare[. Les débutants commencent presque toujours avec le flux de travail géré, où Expo gère la configuration native. À mesure que votre application grandit, vous pouvez -eject-y un flux de travail nu (maintenant appelé -Expo prebuild-) et prendre le contrôle complet du code natif. Ce chemin garantit que vous n'êtes jamais verrouillé, tout en bénéficiant d'un démarrage en douceur.

Pourquoi l'exposition compte pour les débutants (et au-delà)

Avant Expo, de nombreux développeurs passaient des jours à obtenir un environnement natif de React pour compiler. Les points de douleur communs incluaient des erreurs de version entre les SDK Android, reliant les bibliothèques natives manuellement, et débogage des erreurs de construction cryptographique. Expo élimine ces obstacles:

• Support natif de Zero: Pas besoin d'installer Android Studio ou Xcode pour démarrer. Utilisez votre téléphone , Expo Go app pour prévisualiser instantanément.
• SSD : Toutes les bibliothèques Expo sont mises en version ensemble. Vous n'avez pas à vous soucier de la bibliothèque A étant incompatible avec la bibliothèque B.
• Mise à jour en direct (OTA)[ : Poussez JavaScript change directement pour les utilisateurs sans passer par les revues des app store.
• Partage instantané: Générez un code QR pour partager votre application en cours avec vos coéquipiers ou vos clients.
• Strong communauté et documentation: Expo , les documents officiels sont parmi les meilleurs dans l'écosystème autochtone de Réact.

Pour ces raisons, Expo est maintenant le point de départ recommandé par l'équipe React Native elle-même. Les documents officiels React Native guident les débutants à utiliser Expo s'ils sont nouveaux au développement mobile.

Configuration de votre environnement d'exposition

Préalables

• Node.js (version 16 ou ultérieure) – téléchargement depuis nodejs.org.
• Un éditeur de code (le code VS est fortement recommandé).
• Un appareil mobile avec l'application Expo Go installée (iOS ou Android.
• (Facultatif) Un Expo account pour l'édition et le partage – inscrivez-vous à l'adresse expo.dev.

Installation de l'Expo CLI

Expo CLI est l'outil en ligne de commande que vous utilisez pour créer, exécuter et construire des applications.

npm install -g expo-cli

Si vous utilisez Yarn, vous pouvez exécuter à la place. Vérifier l'installation avec . Notez qu'à partir de 2024, Expo se déplace vers comme démarreur par défaut. Bien que fonctionne toujours, nous recommandons d'utiliser la méthode plus récente:

npx create-expo-app MyFirstApp --template blank

Cela crée un projet minimal avec la dernière version de l'Expo SDK et le support intégré pour TypeScript si désiré.

Explorer la structure du projet

Once your project is created, open it in your editor. Key files and directories:

• App.js (ou App.tsx) – le point d'entrée de votre application. Tout ce que vous rendez commence ici.
• package.json – liste les dépendances (réaction, réaction-native, expo, et tous les modules Expo que vous installez).
• app.json – fichier de configuration pour votre projet Expo (nom de l'application, icône, écran de projection, permissions, etc.).
• node modules – contient tous les paquets installés.
• .expo – État local pour Expo, ne pas s'engager au contrôle de la version.

La beauté d'Expo est que vous ne verrez pas android/ ou ios/ dossiers à moins que vous n'exécutiez plus tard. Tout est géré par le SDK Expo.

Lancer votre application pour la première fois

Naviguez dans votre répertoire de projet :

cd MyFirstApp

Démarrer le serveur de développement :

npx expo start

Un code QR apparaît dans le terminal (ou une page Web s'ouvre avec le code QR). Important: Sur iOS, utilisez l'application Camera par défaut; sur Android, utilisez l'application Expo Go pour scanner. L'application va charger sur votre appareil, et tout changement que vous enregistrez dans votre éditeur de code reflétera immédiatement (rechargement à chaud). Vous pouvez également utiliser un émulateur Android/iOS sur votre ordinateur si vous avez les configurer.

Dépannage des problèmes communs de démarrage

• Problèmes de connexion: Assurez-vous que votre téléphone et votre ordinateur sont sur le même réseau Wi-Fi. Si cela échoue, utilisez le mode en appuyant sur dans le terminal Expo CLI. Cela fonctionne même sur différents réseaux.
• Expo Go app affiche - Impossible de trouver une application: Cela signifie généralement que le serveur n'a pas complètement démarré. Attendez que les journaux disent -Metro bundler ready.--Scanner ensuite à nouveau.
• Bundler coincé: Supprimer le dossier et essayer de vider le cache.

Construire votre premier écran : un exemple pratique

Let , crée un écran simple avec un bouton qui affiche une alerte. Remplacer le contenu de par:

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

export default function App() {
 const showAlert = () => {
 Alert.alert('Hello!', 'You clicked the button.');
 };

 return (
 <View style={styles.container}>
 <Text style={styles.title}>Welcome to Expo!</Text>
 <Button title="Click Me" onPress={showAlert} />
 </View>
 );
}

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

Enregistrer le fichier. Votre appareil doit afficher instantanément l'écran. En appuyant sur le bouton déclenche l'alerte native. Remarquez que vous n'avez pas écrit de code Java/Kotlin ou Swift – Exposer a géré la transition.

Ajout de la navigation avec le routeur Expo

La plupart des applications ont plusieurs écrans. Expo Router est la bibliothèque de navigation recommandée car elle utilise un routage basé sur des fichiers (similaire à Next.js).

Installer le routeur Expo

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants

Puis ajustez votre pour définir le point d'entrée à . Créez un répertoire dans votre racine de projet. À l'intérieur, créez pour l'écran d'accueil et pour un deuxième écran. Structure du fichier:

app/
 index.js
 about.js
 _layout.js (optional, for shared layout)

Dans :

import { Link } from 'expo-router';
import { View, Text } from 'react-native';

export default function Home() {
 return (
 <View>
 <Text>Home Screen</Text>
 <Link href="/about">Go to About</Link>
 </View>
 );
}

Lorsque l'utilisateur touche le lien, l'application navigue vers sans configuration. Ce modèle s'équilibre à des centaines d'écrans et est beaucoup plus facile que les configurations de navigation React traditionnelles.

Accès aux fonctionnalités de l'appareil avec Expo SDK

Expo fournit plus de 50 modules pour la fonctionnalité de l'appareil. Quelques-uns sont couramment utilisés:

Caméra

npx expo install expo-camera

Vous pouvez demander des permissions, prendre des photos et enregistrer des vidéos. Exemple d'utilisation :

import { Camera } from 'expo-camera';
// ... request permission with Camera.requestCameraPermissionsAsync()

Lieu

npx expo install expo-location

Obtenez la position actuelle de l'utilisateur, les changements d'emplacement de la surveillance ou les adresses de géocode.

Notifications

npx expo install expo-notifications

Planifiez et manipulez les notifications locales et push. Expo fournit même un service de notification push pour que vous n'ayez pas besoin d'un moteur personnalisé pour envoyer des jetons.

Système de fichiers

npx expo install expo-file-system

Lire, écrire et gérer les fichiers sur l'appareil. Utile pour la mise en cache d'images ou le téléchargement de contenu.

Comme ces modules sont déjà liés dans le workflow géré par Expos, vous pouvez commencer à les utiliser immédiatement après l'installation du paquet npm. Aucune commande native de liaison n'est requise.

Déboguez et inspectez votre application

Le débogage est simple dans Expo. Lorsque vous exécutez , le packeur Metro fournit un menu développeur. Sur votre appareil, secouez-le (ou utilisez le menu de débogage à l'écran sur Android) pour accéder aux options :

• Recharger – recharger le paquet JavaScript.
• Inspecteur ouvert – ouvre React DevTools dans un navigateur pour l'inspecteur des composants.
• Toggle Remote JS Debugging – permet le débogage dans Chrome DevTools (vous pouvez définir des points d'arrêt dans votre JavaScript).
• Afficher Inspecteur d'élément – appuyez sur les éléments d'interface utilisateur pour voir leurs accessoires et styles.

Pour les requêtes réseau, vous pouvez utiliser des outils comme React Native Debugger ou l'inspecteur réseau intégré dans Chrome DevTools lorsque le débogage à distance est activé. De plus, les journaux Expo=1s apparaissent dans le terminal où vous avez démarré le serveur, montrant les traces de pile et la sortie console.log.

Utilisation de Flipper avec Expo

Si vous préférez le débogueur Flipper Facebook, vous pouvez configurer le workflow nu Expo , mais pour le workflow géré, les outils intégrés sont généralement suffisants. De nombreux développeurs comptent sur Expo=s propres journaux de développeurs et React DevTools pour 90 % des tâches de débogage.

Gérer l'État dans une application Expo

Les applications Expo sont des applications React Native, donc la gestion de l'état fonctionne exactement de la même façon. Vous pouvez utiliser:

• Contexte de réaction et useRéducteur[ pour un état simple à modérément complexe.
• Zustand ou Jotai pour une bibliothèque d'état légère, sans plaque de chaudière.
• Redux Toolkit pour les applications à grande échelle avec de nombreuses tranches d'état interconnectées.

Expo n'impose pas de choix spécifique. Pour les débutants, commencer par les crochets intégrés React. Vous pouvez toujours migrer vers une solution plus sophistiquée plus tard.

Exemple avec contexte de réaction :

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
 const [theme, setTheme] = useState('light');
 return (
 <ThemeContext.Provider value={{ theme, setTheme }}>
 {children}
 </ThemeContext.Provider>
 );
}
export const useTheme = () => useContext(ThemeContext);

Tester votre application

Exécutez et configurez Jest dans package.json. Vous pouvez écrire des tests unitaires pour vos composants et instantanés. Pour les tests de bout en bout, Detox fonctionne bien mais nécessite des constructions natives. Pour les flux de travail gérés, considérez Maestro – un outil de test d'interface utilisateur mobile qui fonctionne avec Expo Go.

Exemple d'un simple test pour le composant bouton:

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import App from '../App';

test('button shows alert', () => {
 const { getByText } = render(<App />);
 fireEvent.press(getByText('Click Me'));
 // Assert that Alert was called (use jest.spyOn)
});

Bâtir et publier votre application

Une fois votre application prête, vous voudrez la publier sur l'App Store et Google Play. Expo simplifie cela avec les services de construction de cloud.

Services de demande d'exposition (SAE)

EAS Build crée des binaires natifs prêts à la production sans que vous ayez à installer Xcode ou Android Studio.

1. Installer :
2. Connexion:
3. Configurer avec des profils de construction (développement, prévisualisation, production).
4. Exécution : ou

EAS construit votre application dans le cloud et retourne un fichier .ipa ou .apk. Vous pouvez ensuite soumettre aux magasins en utilisant .

Mises à jour en direct

Avec , vous pouvez pousser les mises à jour de JavaScript directement aux utilisateurs sans les soumettre à nouveau aux magasins. Configurez un canal dans app.json et lancez (ou utilisez EAS Update). L'application vérifie les mises à jour au lancement et télécharge le dernier paquet. Il s'agit d'un changement de jeu pour corriger les bogues rapidement.

Exemple app.json mise à jour config:

{
 "expo": {
 "updates": {
 "url": "https://u.expo.dev/YOUR_PROJECT_ID",
 "enabled": true
 }
 }
}

Limitations du flux de travail géré

Alors que Expo est puissant, il y a des scénarios où vous pourriez avoir besoin d'éjecter à un flux de travail nu:

• Les modules natifs personnalisés ne sont pas disponibles dans Expo SDK (p. ex., une nouvelle bibliothèque Bluetooth qui n'a pas été emballée).
• Les tâches de fond qui doivent être exécutées indéfiniment (Expo Go et les applications gérées ont des limites sur l'exécution de fond).
• Push notification personnalisation[ au-delà de ce qu'Expo offre (p. ex., des sons de notification personnalisés ou des supports riches).
• Grandes tailles de fichiers[ avec certaines bibliothèques natives (les applications gérées incluent toutes les applications Expo SDK, qui ajoute ~20MB).
• Il faut exécuter le code avant l'initialisation de l'application (les applications gérées ont un point d'entrée fixe).

Heureusement, vous pouvez -eject-y (en fait exécuter ) à tout moment. Cela génère les dossiers et , vous permettant de personnaliser le code natif. Une fois que vous le faites, vous pouvez continuer à utiliser les outils Expo-y, mais perdre la commodité de l'aperçu instantané avec Expo Go. Cependant, vous pouvez toujours utiliser EAS Build et les mises à jour OTA.

Meilleures pratiques pour le développement d'expositions

Gardez votre SDK Expo mis à jour

Expo publie une nouvelle version SDK tous les quelques mois. La mise à jour est relativement indolore : lancez et corrigez les changements de rupture.

Utiliser TypeScript depuis le début

Expo de première classe prend en charge TypeScript. Lorsque vous exécutez , choisissez le modèle TypeScript. Il capture de nombreux bugs tôt et améliore IDE autocomplete.

Optimiser les actifs d'image

Utilisez pour compresser les images de votre application. Aussi, appuyez sur pour effectuer le chargement d'images avec cache et porte-places.

Tirer parti de la communauté Expo

Les discussions sur le serveur Discord, les forums et GitHub sont extrêmement actives. Beaucoup de problèmes communs ont été résolus.Avant d'écrire un code personnalisé, recherchez Expo documentation ou des recettes communautaires.

Plan pour les exigences de l'App Store

Même avec Expo, vous devez respecter les politiques Apple et Google. Assurez-vous que votre application a des manifestes de confidentialité, des icônes appropriées et des écrans de projection. Utilisez pour définir les permissions et les métadonnées de l'application.

Pièges courants et comment les éviter

• Pour éviter d'installer des dépendances de pairs: Lorsque vous utilisez des modules Expo, il vous faut parfois installer manuellement des paquets connexes (p. ex. ] pour la navigation).
• Surutilisation de console.log dans la production[: Supprimez toutes les instructions de console avant de construire. Utilisez pour automatiser ceci.
• Dimensions de codage à chaud: Utiliser crochet de React Native pour supporter différentes tailles d'écran, y compris les comprimés.
• Relying on Expo Go for final testing: Expo Go est idéal pour le développement, mais certaines API peuvent se comporter différemment sur une construction autonome. Toujours tester sur une construction de production (EAS Build) avant de sortir.

Passer du début à la production

Expo n'est pas seulement un outil d'apprentissage; il est utilisé par de nombreuses applications de production, y compris les applications pour les grandes entreprises. Le workflow géré peut gérer des applications de complexité modérée. Si votre application a besoin d'intégrations natives lourdes, le workflow nu est toujours disponible. La clé est de démarrer simple et ajouter du code natif seulement si nécessaire.

En maîtrisant Expo, vous apprenez les modèles React Native standard qui se transfèrent à n'importe quel projet natif. Les compétences que vous acquiérez – conception de composants, gestion d'état, navigation et intégration API – sont exactement ce dont vous avez besoin pour le développement mobile professionnel.

Prochaines étapes et ressources

• Lisez le tutoriel officiel de l'Expo pour une visite étape par étape.
• Explorez l'application Expo Go pour voir ce qui est disponible.
• Rejoignez le Expo Discord pour le soutien communautaire.
• Découvrez Expo Snack pour prototyper directement dans votre navigateur.

Construire des applications mobiles avec Expo supprime les barrières initiales et vous permet de vous concentrer sur ce qui compte: votre logique, conception et expérience utilisateur app. Commencez dès aujourd'hui et découvrez à quel point le développement mobile peut être rapide.