Publié · en amélioration
Framework · Depuis 2015
React Native est un framework open source pour créer des applications Android et iOS avec React et JavaScript ou TypeScript, avec une interface native unique.
React Native est un framework open source publié par Meta en 2015. Il permet de créer des applications Android et iOS avec le modèle de composants de React. Les écrans sont rendus avec les vues natives de chaque plateforme, et non dans une vue web, si bien que les applications ont l'apparence et la réactivité d'une application native classique. Il est aujourd'hui développé par Meta avec la communauté et des entreprises partenaires, et sa New Architecture, activée par défaut, relie plus directement JavaScript et le code natif.
React Native est particulièrement intéressant pour les équipes qui utilisent déjà React sur le web et veulent créer des applications mobiles avec les mêmes connaissances et les mêmes outils. Une seule base de code cible les deux plateformes, on peut toujours passer à Kotlin ou Swift si nécessaire, et Fast Refresh affiche les modifications dès l'enregistrement. On le retrouve souvent dans des applications riches en écrans et au rythme de publication soutenu, comme le commerce, les réseaux sociaux ou les outils internes d'entreprise, et il peut aussi n'animer que quelques écrans d'une application native existante.
Le plus simple pour commencer est de créer un projet avec Expo, comme le recommande la documentation officielle. Installez Node.js, créez un projet avec create-expo-app, puis installez Expo Go sur votre téléphone et ouvrez l'application en scannant un code QR. Apprenez d'abord les bases de React, puis suivez le guide des composants de base de la documentation officielle et le tutoriel Expo pour créer une petite application.
Des composants comme View, Text et Image sont rendus avec les vues natives de chaque plateforme, avec l'apparence attendue.
Composants, props, état et hooks fonctionnent comme dans React, avec TypeScript et l'écosystème npm.
Fast Refresh applique les modifications en conservant l'état, et React Native DevTools sert au débogage.
Les Turbo Native Modules et les composants Fabric de la New Architecture se connectent directement à du code Kotlin et Swift.
Les outils de React Native fonctionnent sur Node.js. Installez la version LTS depuis nodejs.org et vérifiez qu'un numéro de version s'affiche. L'émulateur Android nécessite Android Studio, et le simulateur iOS nécessite macOS avec Xcode.
node --versionCréez un nouveau projet avec Expo, comme le recommande la documentation officielle. Le modèle est déjà configuré avec TypeScript et un routage basé sur les fichiers (Expo Router).
npx create-expo-app@latest my-appLancez le serveur de développement dans le dossier du projet, puis scannez le code QR avec Expo Go ou appuyez sur a (Android) ou i (iOS) dans le terminal.
cd my-app && npx expo startDans un projet créé à partir du modèle blank-typescript, App.tsx est le composant racine. View est un conteneur de mise en page et Text affiche du texte ; tout texte doit se trouver dans un composant Text. Les styles créés avec StyleSheet.create centrent le contenu grâce à Flexbox. Modifiez et enregistrez le fichier : Fast Refresh met aussitôt à jour l'application en cours d'exécution.
App.tsx
import { StyleSheet, Text, View } from "react-native";
export default function App() {
return (
<View style={styles.container}>
<Text>Hello, world!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, alignItems: "center", justifyContent: "center" },
});
npx create-expo-app@latest hello --template blank-typescript && cd hello && npx expo startSix chapitres pour aller de l'installation aux notions essentielles de React Native.
Posez vos questions, partagez votre expérience et échangez vos avis sur React Native.
Aucune discussion pour l'instant. Lancez la première.
0 commentaire
Se connecter · Connectez-vous pour laisser un commentaire.
Soyez le premier à commenter.