React Native

React Native est un framework logiciel d'interface utilisateur open source développé par Meta Platforms (anciennement Facebook Inc.). Il est utilisé pour développer des applications pour Android , Android TV , iOS , macOS , tvOS , Vega OS , Web , Windows et UWP en permettant aux développeurs d'utiliser le framework React conjointement aux fonctionnalités natives de la plateforme. Il est utilisé pour développer des applications Android et iOS chez Facebook , Microsoft et Shopify . Il est également utilisé pour développer des applications de réalité virtuelle chez Oculus .

Histoire

En 2012, Mark Zuckerberg a déclaré : « Notre plus grande erreur en tant qu’entreprise a été de miser trop sur HTML5 au détriment des applications natives. » L’utilisation de HTML5 pour la version mobile de Facebook a engendré une application instable et lente à charger les données. Il a promis que Facebook proposerait prochainement une meilleure expérience mobile.

Chez Facebook, Jordan Walke a développé un logiciel qui générait des éléments d'interface utilisateur pour iOS à partir d'un thread JavaScript en arrière-plan , ce qui a servi de base au framework web React . Ils ont décidé d'organiser un hackathon interne pour perfectionner ce prototype afin de pouvoir créer des applications natives avec cette technologie.

En 2015, après des mois de développement, Facebook a publié la première version de la configuration JavaScript React . Lors d'une présentation technique, Christopher Chedeau a expliqué que Facebook utilisait déjà React Native en production pour son application Group et son application Ads Manager.

En octobre 2025, Meta a annoncé qu'elle ferait don de React, React Native et JSX ( JavaScript XML ) à une nouvelle fondation React, qui fait partie de la Linux Foundation .

Mise en œuvre

Les principes de fonctionnement de React Native sont pratiquement identiques à ceux de React, à ceci près que React Native ne manipule pas le DOM via le DOM virtuel . Il s'exécute dans un processus en arrière-plan (qui interprète le JavaScript écrit par les développeurs) directement sur le périphérique final et communique avec la plateforme native via des données sérialisées sur un pont asynchrone et par lots .

Les composants React encapsulent du code natif existant et interagissent avec les API natives via le paradigme d'interface utilisateur déclaratif de React et JavaScript . TypeScript est souvent utilisé de préférence à JavaScript dans les applications React Native modernes en raison de sa sécurité de type accrue .

Bien que le style React Native présente une syntaxe similaire à celle du CSS , il n'utilise ni HTML ni CSS . À la place, ce sont les messages du thread JavaScript qui permettent de manipuler les vues natives. Grâce aux plugins, Tailwind peut également être utilisé avec React Native.

React Native est également disponible pour Windows et macOS , et est actuellement maintenu par Microsoft .

Exemple de « Bonjour, monde ! »

Un programme « Hello, World ! » en React Native ressemble à ceci :

import { AppRegistry , Text , View , Button } from 'react-native' ;import React from 'react' ;const HelloWorldApp = () => {const [ count , setCount ] = React . useState ( 0 );const incrementCount = () => {définirCount (( prevCount ) => prevCount + 1 );};retour (< Afficher ><Texte> Bonjour le monde ! </Texte>< Texte > { nombre } < /Texte>< Button onPress = { incrementCount } title = "Incrémenter le compteur" /></View>);};exporter par défaut HelloWorldApp ;AppRegistry.registerComponent ( 'HelloWorld' , () = > HelloWorldApp ) ;

Exemple TypeScript

En TypeScript, un composant compteur ressemble à ceci :

import { Button , Text , View } from "react-native" ;import React from "react" ;interface CounterProps {titre : chaîne de caractères ; // Propriété obligatoirebaseNumber? : nombre ; // Propriété optionnelle}const Counter : React.FC < CounterProps > = ({ title , baseNumber }) => {const [ count , setCount ] = React . useState < number > ( baseNumber || 0 );const incrementCount = () : void => setCount (( prevCount ) => prevCount + 1 );retour (< Afficher >< Texte > { nombre } < /Texte>< Button onPress = { incrementCount } title = { title } >< /Button></View>);};