Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Premiers pas avec React Native

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

  • Comprendre ce qu’est React Native
  • Comprendre comment React Native prend en charge des langages de programmation très utilisés.
  • Installer les logiciels nécessaire à utiliser React Native avec le kit de développement mobile.

Qu’est-ce que React Native ?

Si vous avez terminé les autres modules de la piste Kit de développement mobile vous savez que le Kit de développement mobile offre beaucoup d’options de développement. Vous pouvez créer des applications natives pour Android et iOS, en utilisant les langages de programmation natifs pour écrire votre code. Ou vous pouvez créer des applications hybrides exécutables sur Android et iOS, écrites en JavaScript, CSS, HTML, et même Visualforce. Les applications hybrides, basées sur Apache Cordova, sont exécutées dans un conteneur web qui forme un pont vers du code natif. Cette approche entraîne une légère pénalité en termes de performances, et les applications n'ont pas toujours exactement l’aspect natif.

Et c’est là que React Native entre en scène. Facebook a lancé React en tant que framework de développement open source en 2013, et React Native lui a succédé en 2015. Aujourd'hui, la technologie React se divise en deux parties : ReactJS et React Native. ReactJS est une bibliothèque JavaScript destinée à créer des interfaces utilisateur sur le web. React Native est un framework qui utilise la bibliothèque ReactJS pour construire des composants natifs pour les composants mobiles. Comme Cordova, React Native est multiplateforme : il prend en charge Android et iOS.

Même si les composants React Native doivent être écrits dans des versions particulières de JavaScript, CSS et XML, les objets sous-jacents sont des objets natifs à l’appareil, qui accèdent directement au système d’exploitation. Le résultat est que les performances et l’aspect des composants React Native sont au niveau des composants natifs.

Les langages React ont de petites particularités :

  • Le JavaScript de React implémente ES2015, un standard encore en émergence, donc les développeurs hybrides rencontreront peut-être des constructions inhabituelles dans les exemples de code React. Pour en savoir plus sur ES2015, reportez-vous à la section Ressources en bas de cette unité.
  • Le CSS de React est en réalité du code JavaScript qui imite du CSS, et fonctionne globalement comme du CSS sur le web. Une des différences majeures est qu'il faut utiliser des identifiants sans tirets, avec des majuscules internes, au lieu de noms en minuscules et avec des tirets. Même si vous connaissez CSS, vous préférerez peut-être les mécanismes de React.
  • Le balisage XML utilisé par React s’appelle JSX. JSX est une syntaxe XML qui permet d'intégrer du balisage XML en JavaScript, au lieu de la méthode traditionnelle consistant à intégrer le JavaScript dans le balisage. Donc plutôt que d’enregistrer le balisage dans un fichier séparé de la source JavaScript, vous l'écrivez directement dans le code JavaScript. Par exemple, on peut renvoyer du balisage JSX depuis la fonction render() d'un composant.

La popularité de React Native s’explique en partie par le fait qu’il n’est pas nécessaire de compiler vos applications pour tester les changements. Une fois que l’application fonctionne sur un appareil réel ou virtuel, il vous suffit de modifier et d’enregistrer le code, puis de rafraîchir votre émulateur ou votre simulateur pour voir vos changements.

Même si le framework Facebook est encore en version préliminaire, le Kit de développement mobile traite React Native comme un membre à part entière. Vous pouvez construire des applications React Native avec nos outils en ligne de commande et utiliser des composants du kit de développement mobile tels que l’authentification, SmartStore, et Mobile Sync pour créer des applications complètes issues du kit de développement mobile.

Installation de Forcereact

Avez-vous terminé Configuration de vos outils de développeurs Kit de développement mobile ? Si ce n’est pas le cas, c’est le moment de le faire et de vous assurer que vos outils de développement sont à jour. Même si la programmation React Native a lieu en JavaScript, il faut tout de même installer les outils de développement natifs de la plateforme (Android Studio, XCode, ou les deux). Pour créer des applications React Native pour le Kit de développement mobile, servez-vous de l’utilitaire npm forcereact.

Création d'une application connectée

Remarque

Remarque

Le module Bases du Kit de développement mobile, qui présente des instructions de création d'une application connectée, est un prérequis de ce module. Vous ne pourrez pas faire les exercices de cette unité sans créer une application connectée.

Pour se connecter au service Salesforce, chaque appareil mobile nécessite une application connectée Salesforce. Une application connectée permet à votre application de communiquer avec Salesforce et d’accéder en toute sécurité aux API Salesforce.

Après avoir créé et enregistré votre application connectée, notez ses détails.
  • Copiez les valeurs URL de rappel et Clé consommateur. Ces valeurs sont utiles pour configurer l'authentification dans votre application.
  • Les applications Kit de développement mobile n’utilisent pas de secret de consommateur. Par conséquent, vous pouvez ignorer cette valeur.