Notions de Base - React Native

Spécialisé dans le développement d'applications mobiles pour Android et iOS, React Native est basé sur un concept appelé "JSX" (JavaScript XML), qui permet de décrire l'apparence des composants de l'interface utilisateur. En React Native, le composant (ou "component" en anglais) est un concept fondamental pour la création de l'interface utilisateur. Il est indépendant et réutilisable. Il existe deux types de composants : les composants de base et les composants personnalisables.

Les étapes d'installation

Les étapes d'installation suivantes s'appliquent sur Windows pour les applications mobiles Android.

• Installer un JDK.
• Télécharger et installer Node.js.
• Installer Native React à partir d'un terminal avec la commande :
  • npm install -g react-native-cli 
• Création d'un nouveau projet.
  •  npx react-native init NouveauProjet
• Accéder au projet :
  • Cd NouveauProjet.
• Exécuter l'application :
  • npx react-native run-android.

Les vues (View)

Les vues sont des composants fondamentaux utilisés pour structurer l'interface utilisateur d'une application mobile. Elles représentent des éléments de base capables de contenir d'autres vues ou composants. Comme mentionné sur le site de React Native : « un petit élément rectangulaire sur l'écran qui peut être utilisé pour afficher du texte, des images ou répondre aux entrées de l'utilisateur »(p), la vue constitue est une partie incontournable de l'écran dans le développement d'applications mobiles. L'image suivante explique très bien ce processus :

 Les composants de base 

Les composants de base sont des éléments pré-construits fournis par le framework lui-même. Ces composants simplifient la création d'interfaces utilisateur en offrant des fonctionnalités prêtes à l'emploi, permettant aux développeurs de se concentrer sur la logique métier de leur application. Les composants de base les plus courants incluent View, Text, Image, TextInput, Button, et ScrollView. Le tableau suivant illustre différents composants ainsi que leur équivalent sur Android, iOS et le Web :

Les composants personnalisés

React Native est réputé pour sa capacité à concevoir des composants personnalisés. Ces derniers offrent aux développeurs la possibilité de créer des interfaces utilisateur remarquablement complexes pour leurs applications mobiles. Voici quelques étapes permettant de générer un composant personnalisé.

Tout d'abord, comme cité dans le site DevBrite, la première étape consiste à créer une classe en la nommant MyCustomComponent qui hérite de React.Component. Dans cette classe, il faut implémenter une méthode appelée render() qui se charge de renvoyer un élément React représentant le composant en question. De plus, il est possible de gérer l'état ducomposant en utilisant la méthode useState().

Ensuite, après avoir initialisé le composant personnalisé, on peut l'importer dans notre application React Native. Ce framework permet de passer des propriétés (ou "props") aux composants personnalisés. Pour cette réalisation, la balise <MyCustomComponent uneValeur="uneValeur" /> s'en sort très bien. Elle favorise la personnalisation du comportement du composant en lui transmettant des valeurs spécifiques.

Interface utilisateur 

Pour créer des interfaces utilisateur attrayantes et modernes, React Native met en place l'API StyleSheet, qui facilite la personnalisation des applications pour les développeurs. Elle leur permet de personnaliser les composants en modifiant des éléments tels que la couleur du texte, de l'arrière-plan, la largeur, la hauteur, la taille de la police, etc. De manière similaire au développement web, les développeurs disposent du Flexbox pour optimiser la disposition des composants.

En ce qui concerne les images, ce framework met à disposition une API permettant de substituer les paramètres par défaut de mise en cache des images de React Native. Il est nécessaire d'appeler cette API directement depuis le code de votre AppDelegate natif, idéalement dans la méthode didFinishLaunchingWithOptions.

Références 

1. « Composants de base et composants natifs», React Native,https://reactnative.dev/docs/intro-react-native-components, (page consultée le 13 février 2024).
2.  «Création de composants personnalisés dans React Native», Devbrite, https://devbrite.io/react-native-custom-components, (page consultée le 13 février 2024).
3. «Style», React Native, https://reactnative.dev/docs/style, (page consultée le14 février 2024).
4. Zarrouk Anis, «Les composants en React Native», Medium, https://azzarroukanis.medium.com/les-composants-en-react-native-c633817d70f3,  (publié le 31 mai 2021), (page consultée 15 février 2024).
5. C O D E X, How to Install React Native in Windows 10 (Getting Started in React Native), Inde, 2021, 19 minutes, coul, https://www.youtube.com/watch?v=oZFCt69Bccc.