Différences clés avec React pour le web

Fondations communes, expressions différentes

Bien que React Native partage la même philosophie et les mêmes concepts de base que React pour le web (React DOM) – composants, props, state, hooks, JSX, approche déclarative – il existe des différences fondamentales dues à la nature distincte des plateformes cibles (mobile natif vs navigateur web). Comprendre ces différences est essentiel pour passer efficacement du développement web React au développement mobile avec React Native.

Le mantra "Learn once, write anywhere" est vrai pour les concepts React, mais pas pour l'intégralité du code. Vous ne pouvez pas simplement copier-coller un composant web React et vous attendre à ce qu'il fonctionne nativement sur mobile. Les différences se situent principalement au niveau de la couche de rendu, du styling, de la navigation et de l'accès aux API spécifiques à l'environnement.

Couche de rendu : Composants natifs vs DOM HTML

C'est la différence la plus fondamentale. React DOM rend vos composants React en éléments du DOM HTML standard (

Vous écrirez en React Native :

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


  Bonjour !
  


const styles = StyleSheet.create({ /* ... styles ici ... */ });

Ici, est l'équivalent le plus proche d'un

Styling : JavaScript et Flexbox au lieu de CSS

Puisqu'il n'y a pas de DOM HTML, il n'y a pas non plus de CSS au sens traditionnel du terme dans React Native. Le styling se fait entièrement via des objets JavaScript. La syntaxe ressemble beaucoup au CSS, mais elle est écrite en camelCase (ex: backgroundColor au lieu de background-color) et utilise un sous-ensemble des propriétés CSS.

L'API StyleSheet.create({}) est généralement utilisée pour définir les styles de manière organisée et optimisée (elle peut transformer les objets de style en identifiants numériques pour de meilleures performances). Le modèle de mise en page principal est Flexbox. Presque toute la mise en page dans React Native repose sur Flexbox, qui fonctionne de manière très similaire (avec quelques légères différences) à son implémentation web. Il n'y a pas de Grid Layout CSS ou de positionnement `float` par exemple.

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1, // Occupe tout l'espace disponible
    justifyContent: 'center', // Centre verticalement (axe principal par défaut)
    alignItems: 'center', // Centre horizontalement (axe secondaire)
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  text: {
    fontSize: 18,
    fontWeight: 'bold', // Notez le camelCase
    color: '#333',
    marginBottom: 10, // Unités sans dimension (densité-indépendantes)
  },
});

Navigation : Bibliothèques dédiées vs API du navigateur

Sur le web, la navigation est gérée par le navigateur via les URL et l'API History. Des bibliothèques comme React Router s'appuient sur ces mécanismes.

Dans React Native, il n'y a pas de navigateur ni d'URL au sens web. La navigation entre les différents écrans de l'application est gérée par des bibliothèques de navigation dédiées. La plus populaire est React Navigation, qui fournit différentes stratégies de navigation (Stack, Tabs, Drawer) et les composants nécessaires pour les implémenter de manière native sur iOS et Android. La configuration et l'utilisation de la navigation sont donc très différentes de celles du web.

Accès aux API natives et Modules spécifiques

React Native doit pouvoir interagir avec les fonctionnalités spécifiques des appareils mobiles qui n'existent pas sur le web : caméra, GPS, accéléromètre, stockage local natif, notifications push, contacts, etc.

React Native expose un certain nombre de ces fonctionnalités via ses API intégrées (ex: `Geolocation`, `PermissionsAndroid`, `AppState`). Pour des fonctionnalités plus avancées ou spécifiques, on utilise des modules natifs tiers (souvent installés via npm/yarn, puis liés au projet natif) ou on peut même écrire ses propres modules natifs en Java/Kotlin ou Objective-C/Swift et les exposer au JavaScript via le système de pontage de React Native.

Environnement de développement et de build

L'environnement de développement diffère également. Au lieu d'un simple `npm start` lançant un serveur de développement web, vous aurez besoin :

• Du setup natif correspondant : Xcode (et macOS) pour le développement iOS, Android Studio et le SDK Android pour le développement Android.
• D'un simulateur iOS ou d'un émulateur Android (ou d'un appareil physique) pour exécuter l'application.
• D'un outil comme le Metro Bundler (fourni avec React Native) qui compile votre code JavaScript et le sert à l'application en cours d'exécution.
• D'outils de débogage spécifiques comme Flipper, React Native Debugger, ou le débogage via les outils de développement Chrome.

Des plateformes comme Expo simplifient considérablement ce processus de configuration et de build initial, en fournissant un SDK géré et des outils cloud, mais elles peuvent avoir certaines limitations par rapport à un projet React Native "bare" (vanilla).

Conclusion : Des adaptations nécessaires mais des compétences transférables

En résumé, si les principes fondamentaux de React restent les mêmes, le passage de React DOM à React Native nécessite d'apprendre et d'utiliser de nouveaux composants d'interface utilisateur, une approche différente du styling (basée sur JavaScript et Flexbox), des bibliothèques de navigation spécifiques au mobile, et des méthodes pour interagir avec les API natives. L'environnement de développement et le processus de build sont également distincts.

Malgré ces différences, la familiarité avec React, JSX, la gestion d'état et les hooks constitue un avantage considérable et rend la courbe d'apprentissage de React Native beaucoup plus douce pour un développeur React web que d'apprendre le développement natif iOS ou Android à partir de zéro.