React vs React Native : mêmes idées, briques différentes
React vs React Native
React vs React Native : correspondance des éléments et quand utiliser chacun | We.Inc
React construit des interfaces web à partir d'éléments HTML ; React Native construit des applications iOS et Android à partir de vues natives. Voyez l'équivalent natif de chaque élément web et ce que vous pouvez partager.
React est la bibliothèque ; React Native l'utilise pour créer des applications iOS et Android. Avec React sur le web, vous affichez des éléments HTML comme div et button dans une page de navigateur. React Native affiche ses propres composants, comme View et Text, qui deviennent de vraies vues de la plateforme. Composants, props, state et hooks fonctionnent de la même façon dans les deux.
Côte à côte
Question
React (web, react-dom)
React Native
Où ça tourne ?
Navigateurs web
Applications iOS et Android
Briques de base
Éléments HTML : div, p, img, input
Composants de base : View, Text, Image, TextInput
Style
Fichiers CSS, className ou objet style
Prop style avec des objets JavaScript, souvent issus de StyleSheet.create
Direction flex par défaut
row (avec display: flex)
Gestionnaire de tap ou de clic
onClick
onPress
Partagé
Composants, JSX, props, state, hooks
Composants, JSX, props, state, hooks
Le moyen le plus rapide de voir la différence est de traduire un élément web en son équivalent natif. Cherchez dans la table ci-dessous une balise HTML, une prop ou une habitude CSS, et chaque ligne donne le remplacement React Native avec une courte note sur ce qui se comporte différemment.
Tapez un élément HTML, une prop ou une notion CSS dans le champ de recherche, par exemple img, onClick ou class.
Lisez la colonne React Native pour le composant, la prop ou l'API de remplacement.
Consultez la note pour le comportement qui change, comme les tailles d'image obligatoires ou le texte qui doit être placé dans Text.
Utilisez les exemples de code plus bas pour voir la même petite carte écrite pour les deux plateformes.
Apprenez d'abord React sur le web si les deux sont nouveaux pour vous. Tout ce qui concerne les composants, le state et les hooks se transpose, et les outils du navigateur facilitent le débogage.
Gardez la récupération de données, la validation et la logique de state dans de simples modules TypeScript sans import de react-dom ni de react-native. Ces fichiers peuvent être partagés entre une application web et une application mobile.
Attendez-vous à refaire la couche visuelle. Le balisage et le CSS ne se transposent pas aux composants natifs, prévoyez donc du temps pour les écrans même quand la logique est partagée.
Donnez à chaque Image distante une largeur et une hauteur explicites. Contrairement à une balise img, elle ne se dimensionne pas d'après le fichier téléchargé.
Questions fréquentes
React Native est-il la même chose que React ?
Non. React est la bibliothèque de composants ; React Native est un framework qui utilise React pour piloter des vues mobiles natives. Vous écrivez les composants de la même façon, mais vous affichez View, Text et d'autres composants natifs au lieu du HTML, et il n'y a pas de DOM de navigateur.
Peut-on utiliser HTML et CSS dans React Native ?
Pas directement. Il n'y a ni éléments div ou span ni fichiers CSS. Les styles sont des objets JavaScript aux noms en camelCase qui reprennent en grande partie le CSS, et la mise en page utilise flexbox avec quelques valeurs par défaut différentes.
Faut-il apprendre React ou React Native en premier ?
React d'abord, dans la plupart des cas. La documentation de React Native présente elle-même les composants, le JSX, les props et le state de React comme la base, et les pratiquer sur le web donne un retour plus rapide.
Une application web React et une application React Native peuvent-elles partager du code ?
La logique peut être partagée : types, clients d'API, validation et hooks qui ne touchent pas au DOM. Les écrans et les composants ne le sont généralement pas, car ils affichent des primitives différentes.
React Native produit-il une vraie application native ?
Oui. La documentation de React Native explique qu'à l'exécution il crée les vues Android et iOS correspondant à ses composants, donc une View devient une vue native plutôt qu'une page web dans un conteneur.
Ce qui est partagé, et ce qui ne l'est pas
Les deux utilisent le paquet react. Composants fonctionnels, JSX, props, state, effets, context et hooks personnalisés sont identiques, et un hook comme useState se comporte de la même façon sur un téléphone que dans un navigateur.
Ce qui diffère, c'est le moteur de rendu. Sur le web, react-dom transforme les composants en éléments HTML. Dans React Native, des composants comme View et Text deviennent des vues de la plateforme, donc tout ce qui dépend du DOM, de document.querySelector aux sélecteurs CSS, n'est pas disponible.
Règles de texte et de mise en page qui piègent les développeurs web
Dans React Native, chaque chaîne doit se trouver dans un composant Text ; une chaîne nue sous une View déclenche une erreur. L'héritage des styles est aussi limité : un Text imbriqué hérite de son Text parent, mais une View ne transmet rien à ses enfants.
Flexbox est le système de mise en page, mais flexDirection vaut column par défaut, alignContent vaut flex-start et flexShrink vaut 0, et flex n'accepte qu'un seul nombre. Les mises en page copiées depuis du CSS web demandent souvent d'ajouter flexDirection: "row".
Quand choisir l'un ou l'autre
Choisissez React pour tout ce que l'on ouvre dans un navigateur : sites vitrines, tableaux de bord, applications web et contenus qui doivent être trouvés par les moteurs de recherche. Choisissez React Native quand vous avez besoin d'une application sur les stores iOS et Android, avec accès aux fonctions de l'appareil et à la navigation native.
Beaucoup d'équipes utilisent les deux : une application web React et une application React Native qui partagent les types et le code d'API. Si vous hésitez aussi avec Next.js côté web, le guide Next.js vs React de ce site traite de ce choix.
Une carte, écrite pour les deux
La logique du composant est identique : les mêmes props, le même appel à useState, le même gestionnaire. Seuls les éléments et le style changent.
React pour le web
Des éléments HTML, une classe CSS et onClick. Le navigateur place le bouton après le texte.
React Native pour iOS et Android
View, Text et Pressable de react-native, des styles issus de StyleSheet.create, et onPress à la place de onClick.
Listes : map() sur le web, FlatList sur un téléphone
La même liste en React Native
FlatList n'affiche que ce qui est proche de l'écran, ce qui garde les longues listes fluides. keyExtractor joue le rôle de la prop key.
Un conteneur avec mise en page flexbox, style et gestion du toucher. Il ne défile pas.
Tout le texte doit être dans Text. Un Text imbriqué hérite des styles ; il n'y a pas de balises de titre.
Les images réseau ont besoin d'une largeur et d'une hauteur explicites. Les fichiers locaux utilisent require().
onChangeText transmet directement la nouvelle chaîne au lieu d'un événement.
La prop multiline autorise plusieurs lignes de texte.
Masque le texte saisi. Ne fonctionne pas avec multiline.
Une entrée booléenne contrôlée : mettez à jour value depuis onValueChange.
Button prend une prop title ; Pressable enveloppe n'importe quels enfants que vous voulez rendre cliquables.
Pressable propose aussi onPressIn, onPressOut et onLongPress.
Affiche tous ses enfants d'un coup, réservez-le donc aux contenus courts.
Affiche efficacement les longues listes. Nécessite data et renderItem ; keyExtractor définit chaque clé.
Ouvre l'URL avec une application installée, comme le navigateur. Placez-le dans un Pressable pour un lien cliquable.
Les styles sont des objets, généralement définis avec StyleSheet.create. Passez un tableau pour les combiner ; le dernier l'emporte.
Les noms de style sont en camelCase, comme dans la prop style de React sur le web.
Chaque View est un conteneur flex et empile ses enfants verticalement, sauf indication contraire.
Correspondance des éléments web vers React Native
Cherchez un élément, une prop ou une notion CSS
img, onClick, class...
{n} lignes affichées sur {v}
Aucun résultat. Essayez un nom de balise comme div ou input.