Développez vos applications Android natives avec React Native : Guide complet pour débutants

React Native permet de créer des applications mobiles natives pour Android et iOS en utilisant JavaScript et React, la bibliothèque d'interface utilisateur développée par Facebook. Cette approche simplifie le développement en évitant d'apprendre Java pour Android et Objective-C/Swift pour iOS.

Voici un guide complet pour démarrer avec React Native et devenir opérationnel rapidement.

Prérequis pour React Native

Si vous maîtrisez déjà React, les prérequis sont minimes : une connexion Internet stable et un accès réseau à votre ordinateur. Consultez nos guides sur les bases de la ligne de commande Linux ou Windows pour débutants si nécessaire.

Installation de React Native

L'installation est simple, mais commencez par Node.js.

Node.js permet d'exécuter du JavaScript en dehors du navigateur, pour des applications desktop ou serveurs.

Téléchargez Node.js sur nodejs.org et installez la version pour Windows, macOS ou Linux.

L'installation inclut npm, le gestionnaire de paquets JavaScript, essentiel pour React Native.

Installez create-react-native-app globalement via npm :

npm install -g create-react-native-app

Si des erreurs de permissions surviennent, configurez npm correctement.

Créez votre première application facilement

Créez un dossier pour votre projet et naviguez-y.

Utilisez create-react-native-app :

create-react-native-app FirstAndroidApp

Un nouveau dossier est créé. Accédez-y et lancez :

npm start

Le serveur de développement démarre, affichant un QR code et l'IP.

Exécutez l'application sur votre appareil Android

Installez l'app Expo sur votre téléphone Android. Elle se connecte au serveur et recharge automatiquement les modifications.

Assurez-vous que votre téléphone et ordinateur sont sur le même réseau.

Dans Expo, scannez le QR code. L'app apparaît sur votre téléphone.

Vous verrez les statuts de connexion dans le terminal. Commençons à coder !

Hello World !

Dans le dossier FirstAndroidApp, ouvrez App.js. Voici le code initial :

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Ouvrez App.js pour commencer à travailler sur votre application !</Text>
        <Text>Les modifications que vous apportez seront automatiquement rechargées.</Text>
        <Text>Secouez votre téléphone pour ouvrir le menu développeur.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

La syntaxe ressemble à HTML/CSS, mais utilise des composants React Native.

Les imports chargent les composants nécessaires. La classe App rend la vue avec des balises comme <View> et <Text>.

Les styles sont définis via StyleSheet.create().

Modifions : changez backgroundColor en vert :

backgroundColor: '#4caf50',

Ajoutez un style text :

text: {
  color: '#fff',
  fontSize: 34,
  fontWeight: 'bold',
},

Mettez à jour styles :

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#4caf50',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: '#fff',
    fontSize: 34,
    fontWeight: 'bold',
  },
});

Appliquez au Text :

<Text style={styles.text}>Bonjour, le monde !</Text>

Vers le Play Store !

Cette base vous permet de développer des apps avancées. Consultez la documentation officielle React Native pour plus de détails.

Découvrez nos meilleurs tutoriels React et, pour les jeux, notre guide Buildbox.