Page 4: App.js: Point d'entrée principal de l'application React Native

^{Toutes les pages}

Créer des applications mobiles avec React Native

Page 1
React Native c'est quoi et à quoi il sert?

Page 2
Préparer l'environnement de travail

Page 3
Créer une application React Native

Page 4
App.js: Point d'entrée principal de l'application React Native

Fichier App.js: Entrée principale de l'application React Native

A quoi ressemble le fichier App.js?

Dans une application React Native avec Expo, le fichier App.js joue le rôle de point de départ. C'est à dire que c'est lui qui orchestre l’affichage initial, appelle les composants et configure les premières interactions. Il contient la fonction principale qui retourne l’interface de base en JSX, souvent avec une vue et du texte. Comme les autres fichiers du projet (assets, package.json, yarn.lock, etc.), il participe à la même logique d’ensemble qui consiste à structurer, stabiliser et faire fonctionner l’application de manière cohérente et évolutive.

Le contenu par défaut du fichier App.js correspond généralement à ceci:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
   return (
      <View style={styles.container}>
         <Text>
            Open up App.js to start working on your app!
         </Text>
         <StatusBar style="auto" />
      </View>
   );
}

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

Bien entendu, nous allons explorer tout ce contenu en détail et nous allons le modifier selon nos convenances, mais il faut d'abord faire un petit rappel sur les notions de base de React (applicables aussi en React Native).

JSX en React Native

Comme on l'a vu dans le cours consacré à la bibliothèque React, JSX (pour JavaScript Syntax Extension et parfois JavaScript XML) est une extension du langage Javscript utilisé dans React. En effet, JSX est du Javascript écrit de manière semblable à du HTML afin de faciliter la description des composants. Toutefois, il ne s’agit pas réellement de HTML. En effet, en React Native, les balises JSX représentent des composants natifs spécifiques à Android et iOS et non des éléments du DOM comme en React web.

Dans le code précédent, le JSX c'est tout ce qui est retourné par la fonction App().

Les composants de l'application

Comme on l'a également vu en React, un composant est un élément qui fait partie de l’interface graphique. Il peut donc contenir du texte, des images, des boutons ou tout autre type de contenu visible. L’avantage du composant react réside dans sa réutilisabilité. En effet, un même composant peut être utilisé de nombreuses fois afin de construire des vues différentes de l’application.

Dans le code précédent, on peut identifier les composants natifs: <View>, <Text> et <StatusBar>. Voyons rapidement l'utilité de chaque composant:

<View>: c’est le composant de base pour structurer l’interface. Il fonctionne comme une div en HTML, mais traduit en élément natif sur Android et iOS. Il sert généralement à englober d'autres composants élémentaires.
<Text>: ce composant est dédié à l’affichage de texte. Contrairement au web où on peut écrire du texte n’importe où, React Native exige que tout texte soit encapsulé dans ce composant.
<StatusBar>: Ce composant permet de personnaliser la barre d’état en haut de l’écran (celle qui affiche l’heure, la batterie, etc.)

Vous avez sans doute remarqué que tous ces composants ont été importés avant d'être utilisés à l'aide des instructions suivantes:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

Je rappelle qu'en React et en React Native (comme en JavaScript moderne), on utilise les accolades lors de l’importation pour extraire des exports nommés d’un module, c’est-à-dire des fonctions ou composants qui ne sont pas l’export principal (ou exportés par défaut).

Style de l'application

Vous avez aussi certainement identifié ce bout de code situé tout en bas du fichier App.js:

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

Ce bloc définit un objet de styles en React Native, grâce à StyleSheet.create(). C’est une manière optimisée et lisible d’appliquer des styles aux composants, similaire à une feuille CSS mais directement intégrée dans le code JavaScript.

Nous aurons l'occasion de traiter en détail les styles en React Native plus loin dans ce cours.

Page 1
React Native c'est quoi et à quoi il sert?

Page 2
Préparer l'environnement de travail

Page 3
Créer une application React Native

Page 4
App.js: Point d'entrée principal de l'application React Native