Skip to main content
Join the Agentforce Hackathon on Nov. 18-19 to compete for a $20,000 Grand Prize. Sign up now. Terms apply.

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 du parcours Kit de développement mobile, vous savez que le kit de développement mobile vous offre de nombreuses possibilités 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 Native standard 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, il est possible de renvoyer du balisage JSX depuis la fonction render() d’un composant.
  • Dans le kit de développement mobile version 9.0 ou ultérieure, vous pouvez écrire du code en JavaScript ES2015 standard, comme auparavant, ou en TypeScript. Vous pouvez coder avec ou sans langage TypeScript, totalement ou partiellement. TypeScript utilise son propre compilateur pour effectuer une vérification de type statique pendant le codage. Les erreurs détectées par le compilateur sont informatives et non rédhibitoires : votre code JavaScript fonctionnera toujours comme avant. Les bibliothèques de kit de développement mobile pour React Native comprennent des types TypeScript.

La popularité de React Native s’explique en partie par le fait qu’il n’est pas nécessaire de recompiler vos applications avec Xcode ou Gradle pour tester les modifications. 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 sous-jacent est encore en version préliminaire, le kit de développement mobile prend entièrement en charge React Native. Vous pouvez construire des applications React Native avec nos outils fonctionnant via la ligne de commande et utiliser des composants du kit de développement mobile tels que l’authentification, SmartStore et Mobile Sync afin de créer des applications complètes issues de ce kit.

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

Le module Bases de Salesforce Mobile SDK, qui présente des instructions de création d’une application connectée, est un prérequis à 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 Mobile SDK n’utilisent pas de secret de consommateur. Par conséquent, vous pouvez ignorer cette valeur.

Ressources

Partagez vos commentaires sur Trailhead dans l'aide Salesforce.

Nous aimerions connaître votre expérience avec Trailhead. Vous pouvez désormais accéder au nouveau formulaire de commentaires à tout moment depuis le site d'aide Salesforce.

En savoir plus Continuer à partager vos commentaires