Maison / Technologie / Construire votre première application native React

Construire votre première application native React

Image par Hilthart Pedersen sur Unsplash

(Cet article fait partie d’une série en cours sur les compétences techniques et non techniques de Nathan Thomas, ingénieur en logiciel complet qui étudie et travaille à la Lambda School, située dans la Silicon Valley. Cliquez ici ici pour la partie 5 de la série, un article sur «La poursuite de la persistance et du grain».)

Débuter avec React Native

Il est temps de lancer un autre tutoriel d’application à faire!

Je rigole.

Je peux vous garantir que cette procédure pas à pas vaudra la peine, comme un double Oreos ou un chiot Golden Retriever heureux. Nous allons construire une application météo simple dans Réagir Natif en utilisant MetaWeather, une API météo gratuite. React Native est une bibliothèque permettant de créer iOS, Android et plus récemment. Windows, tablettes et applications Xbox.

Voici un exemple de produit fini nous allons faire. J’ai même ajouté un composant d’ordre supérieur et un style léger pour un assaisonnement supplémentaire afin que vous puissiez voir que React Native n’est pas si fou après tout.

Comme toujours, j’aime définir les attentes de mes lecteurs dès le départ; vous devez vous familiariser avec React, car je n’expliquerai pas les concepts fondamentaux. En fait, votre capacité à apprendre rapidement React Native de cet article dépend pouvoir comparer ce que nous faisons avec la manière dont nous utiliserions normalement React. De plus, vous devez vous familiariser avec Flexbox et les bases de CSS. Enfin, ce serait également bien si vous aviez l’habitude de travailler avec des API, mais ce n’est pas une obligation. Je tiens votre main dans cette partie et vous donne le code pour tout.

Cela fait, partons et commençons. Je pense que vous allez vraiment vous amuser avec celui-ci.

"Nous prenons mieux soin de nos smartphones que de nous-mêmes – les téléphones sont toujours rechargés!"

– Arianna Huffington

Faisons pleuvoir

Il ne reste que quelques choses à faire avant de coder quoi que ce soit. Je vais les énumérer tous ici:

  1. Aller au Site de l’Expo et inscrivez-vous pour un compte gratuit. Une fois que vous avez terminé, faites défiler jusqu’au bas de la page, recherchez une colonne intitulée «Débutants» et cliquez sur le lien «Essayer Expo Snack». Snack est un sandbox gratuit d’édition de code en ligne pour React Native, et c’est ce que nous utiliserons aujourd’hui.
  2. J’ai besoin que tu ailles prendre une tasse de ta boisson chaude préférée. Si nous allons faire cela, nous allons le faire correctement. Nous allons nous mettre à l’aise.

Lorsque vous avez terminé avec ces deux tâches, créez un nouveau projet vierge dans Snack. Votre nouvelle application standard devrait ressembler à ceci:

Snack constitue des noms incroyables lorsque vous créez une nouvelle application. Le mien s’appelle «beignet intelligent», mais le vôtre pourrait ressembler à «pistache amusée» ou «myrtilles fringantes». Allez-y, renommez-le si vous voulez (même si je gardais personnellement l’un de ces deux derniers noms), puis appuyez sur la touche gros bouton "Enregistrer" dans le coin supérieur droit. Je vais appeler la mienne «React Native App Demo» pour plus de clarté au cours de cette procédure pas à pas.

Allez-y, supprimez tout dans App.js et collez le code suivant:

https://medium.com/media/383fc891b3a4b19a0ddf0a0353e4b367/href

Cela va instantanément provoquer une erreur car nous n’avons pas encore créé de composant HomeView, mais ne paniquez pas depuis l’écran rouge de la mort Snack va nous lancer. Prenons un moment pour discuter de ce qui se passe dans notre code, puis nous le réparerons.

Notez que je n’ai jusqu’à présent importé que la dépendance à la réaction. Si cela ne vous prouve pas que vous pouvez facilement apprendre à utiliser React Native issu du Web, je ne sais pas ce qui se passera. Nous utilisons complètement React sur un appareil mobile et nous le compléterons en une minute avec la dépendance native-rea pour tout ce qui doit être modifié pour le rendre opérationnel.

Une fois ce petit discours encourageant, supprimez tous les fichiers du répertoire des composants existants, ajoutez un répertoire de conteneur à l’intérieur de celui-ci et créez un nouveau fichier HomeView.js. Collez le code suivant (et nous en discuterons ensuite):

https://medium.com/media/1d18eadc3ba355b0b180404d04d588f4/href

Avez-vous lu tout cela? Bien. Vous méritez une médaille, un high cinq ou au moins un cookie de quelqu’un. Allez-y et faites une pause mentale rapide pour siroter une des boissons chaudes que vous tenez.

Ok, discutons de ce qui se passe.

Tout d’abord, nous avons la ligne d’importation pour react-native. Cela ressemble à ceci:

https://medium.com/media/161f9f3a557ec3213da1f0fe35a354b8/href

Ces exportations nommées à partir de la dépendance Rea-native nous permettent de développer notre application mobile au-dessus de React normal. Mais ne vous laissez pas intimider par eux; ils correspondent directement à pratiquement tout ce que vous connaissez déjà de l’environnement Web:

  1. Le texte est utilisé de la même manière que p, h1, h2 et toutes ces autres sortes de balises contenant du texte.
  2. La balise View est utilisée de la même manière que vous le feriez avec une div, une section, un en-tête, un pied de page ou d’autres types de balises organisationnelles au format HTML.
  3. ScrollView ressemble beaucoup à View, mais c’est extra fantaisie 🎉 car cela nous permet d’étendre notre conteneur au-delà des limites de l’écran afin que l’utilisateur puisse faire défiler le contenu. Nous verrons comment cela fonctionne dans un peu.
  4. Enfin, l’importation StyleSheet nous permet de créer un objet de feuille de style complet dans notre application à l’aide de styles CSS.

Fort de cette connaissance, parcourons la page et analysons le code. Pour commencer, voici la classe dans notre fichier de composant HomeView.js:

https://medium.com/media/f26f6b9a5ebdce319562ced25357ec44/href

Comme vous pouvez le constater, notre classe est structurée avec un objet ScrollView comme conteneur global. Cela nous permet d’avoir une structure fluide et déroulante sur la page que l’utilisateur peut faire glisser avec son doigt. À l’intérieur de cela, nous avons nos balises View et Text qui contiennent du contenu textuel. Enfin, la dernière chose à noter ici est que nous utilisons un autre Balise de texte à l’intérieur du premier; cela fonctionne (dans ce scénario) très comme si vous aviez une balise span à l’intérieur d’une balise p dans votre JSX dans React normal. Il vous permet de sélectionner des parties du texte pour un style spécifique.

Nous avons notre StyleSheet ci-dessous notre classe. Pour rappel, voici à quoi ça ressemble:

https://medium.com/media/873103a28a604bb895c4318c04908e14/href

Lorsque nous appelons la méthode .create () de StyleSheet, nous pouvons transmettre un objet contenant plusieurs paires clé-valeur d’objets de style. React Native les connecte à notre composant et les rend accessibles à titre de référence.

Dans l’extrait de code, le style scrollContainer se voit attribuer la valeur d’un objet contenant de nombreuses propriétés de style CSS individuelles. Celles-ci sont toutes traitées à la chamelle (c’est-à-dire marginBottom et justificationContent), et toute valeur de texte est entourée de guillemets (c’est-à-dire "centre", "espaceBetween", etc.).

En outre, notez que toutes les mesures manquent des valeurs (c’est-à-dire rem, px, etc.) que vous connaissez et aimez (et que vous détestez peut-être) à partir d’un environnement Web. Cela est dû au fait que toutes les mesures de React Native sont définies par défaut sur des entiers simples sans fin d’unité. Celles-ci représentent des proportions indépendantes de la densité de pixels sur l’écran.

C’est également un bon moment pour parler du fonctionnement de la disposition dans React Native. J’ai déjà dit que CSS était la technique que vous utilisiez pour styliser tout, mais vous serez également ravi de savoir que Flexbox est le module que nous utilisons pour toutes les présentations. Il y a cependant deux différences significatives que vous devez connaître, mais:

  1. La propriété de style CSS de flexDirection dans le module Flexbox est définie par défaut sur column au lieu de ligne dans React Native.
  2. La nouvelle propriété flex, montrée dans scrollContainer ci-dessus, redimensionne l’élément en fonction du nombre qui lui est attribué. Il est impossible que je puisse l’expliquer dans ce petit espace mieux que le documentation officielle, je vous recommande donc vivement de le lire rapidement.

Comme nous l’avons dit précédemment, l’objet transmis à StyleSheet.create () s’applique au composant lors de son montage. Nous utilisons ensuite les styles dessus en écrivant style = {styles.styleNameGoesHere} sur le composant dans le code; voici à nouveau la classe HomeView.js pour que vous puissiez voir de quoi je parle:

https://medium.com/media/f26f6b9a5ebdce319562ced25357ec44/href

Assez cool, non?

Maintenant que nous avons une connaissance de base de certaines des importations React Native ainsi que du fonctionnement des feuilles de style par défaut, allons de l’avant et configurons un composant d’ordre supérieur, des composants de présentation et appelons axios à notre API MetaWeather.

"Lorsque nous avons commencé à travailler sur l’iPhone, nous étions tous motivés à ne pas supporter notre téléphone et nous voulions un meilleur téléphone."

– Jony Ive

Quand il pleut, ça se déverse

À ce stade, votre application devrait avoir l’image suivante à l’écran et la configuration du fichier, comme indiqué ci-dessous:

Nous allons aller de l’avant et construire le reste de cette application. Je vais vous montrer des fragments de code à coller, et nous parlerons de tout ce qui est unique avant de passer au suivant. Ça sonne bien?

Commencez par créer un composant LoginView.js dans votre répertoire de conteneur et collez le code suivant:

https://medium.com/media/7cd1e1cb6f5daf04fb87de0829557548/href

La seule chose nouvelle que je veux souligner ici est que nous pouvons importer et utiliser la dépendance prop-types comme dans React normal. Nous ne le ferons pas dans le reste de l’application, mais il est important que vous le voyiez au moins une fois. Nous devons maintenant étoffer le reste de l’application pour que le bouton Fonction de ce composant soit transmis aux accessoires.

Le code ci-dessus va également générer une grosse erreur rouge en raison de l’importation du bouton. Créez donc un répertoire de présentation à l’intérieur du composant et créez un fichier Button.js. Collez dans le code suivant:

https://medium.com/media/632b5603c500581f430744af6b649f60/href

Dans ce code, je tiens à ce que vous remarquiez ce que nous importons de react-native – TouchableHighlight est ce qui permet à React Native de répondre correctement aux contacts tactiles lorsqu’il est entouré d’autres balises. Nous devons lui fournir un accessoire underlayColor et un code de couleur hexadécimale (les deux derniers chiffres du # 0E30F050 ci-dessus correspondent au pourcentage d’opacité). Si nous ne fournissons pas cela, la couleur deviendra super funky lorsque nous appuierons sur le bouton (découvrez pourquoi ici).

En outre, notez que nous n’avons plus d’événements onClick. Au lieu de cela, nous utilisons onPress qui semble super évident si nous nous arrêtons pour y penser. Nous utilisons des smartphones, après tout!

Notre prochaine étape consiste à créer un fichier supplémentaire dans votre répertoire conteneur. Nous allons le nommer authenticate.js. Ceci est un composant d’ordre supérieur pour un extrêmement processus de pseudo-connexion simple. Collez ce code dans:

https://medium.com/media/0dd833be919505acd6c178aab8111f85/href

L’utilisation d’un composant d’ordre supérieur et d’un léger curry a pour but de vous montrer que nous exerçons les mêmes muscles que dans React normal. Réagir Native n’est pas si mal, et les choses commencent vraiment à se concrétiser maintenant!

De toute évidence, nous devons compléter le cercle avec nos composants, et vous pouvez probablement voir où cela se passe si vous êtes habitué au currying et aux composants d’ordre supérieur dans React; Revenons à App.js et mettez-le à jour pour qu’il ressemble à ceci:

https://medium.com/media/334b4fee5c66ab82c9349430857d8f0f/href

Droit sur! À ce stade, notre structure de fichier et notre application devraient ressembler à ceci:

Si vous cliquez sur ce beau bouton bleu, vous vous «connecterez» à votre application. Il est temps de faire appel à l’API MetaWeather et d’afficher nos données à l’écran!

Image par Alfred Twj sur Unsplash

Excuse moi pendant que j’embrasse le ciel

Tout d’abord, allez-y et cliquez sur le fichier package.json. Supprimez tout le code et collez la liste de dépendances suivante dans:

https://medium.com/media/34ce9193aabaf9db14665d017692d597/href

N’est-ce pas agréable de savoir que nous avons votre vieux package.json avec nous et pour le trajet?

Ensuite, accédez à HomeView.js et mettez à jour le code afin qu’il ressemble à ceci:

https://medium.com/media/4a4229ffafc937b1cd19a72d8d1d9100/href

Nous venons d’importer la dépendance axios avec le composant Button.js, d’ajouter une fonction de constructeur de classe, d’implémenter une méthode de cycle de vie composantDidMount (), mais un nouveau texte et un bouton dans notre code de composant et d’ajouter un style weatherText dans notre code StyleSheet. L’appel axios présent dans notre méthode de cycle de vie est actuellement codé à San Francisco, mais vous pouvez le modifier à l’aide des informations contenues dans la documentation de l’API MetaWeather. ici.

Ouf. 😰

C’était beaucoup de travail, mais nous avons tous terminé! Parcourez l’application et vous constaterez que vous pouvez vous connecter, faire glisser la page ScrollView de HomeView.js, afficher le temps actuel à l’écran et vous déconnecter à l’aide du bouton de l’écran d’accueil.

Ressources supplémentaires pour votre voyage

  1. Réagissez la documentation officielle autochtone– Celles-ci sont vraiment bien écrites et vous pouvez en gros effectuer votre recherche dans la construction d’une application (avec un peu de lumière générée par Stack Overflow).
  2. Expo– C’est le meilleur moyen de créer une application React Native. Ils ont créé le logiciel Snack que nous avons utilisé dans cet article. J’ai utilisé le Xcode brut d’Apple sur mon dernier projet car Expo ne prend pas en charge React Hooks et croyez-moi, vous devriez utiliser Expo. Il existe de bons outils CLI pour travailler localement sur votre ordinateur, vous évitant ainsi d’utiliser Snack à l’avenir.
  3. Réagir au routeur natif– Il existe de nombreux choix de navigation dans React Native, mais celui-ci est excellent car il utilise exactement la même syntaxe que React Router (sauf qu’il n’a pas de NavLink).
  4. Composants stylés– Vous pouvez utiliser cette étonnante bibliothèque de styles dans React Native en installant les composants styled-dependency, puis en important des composants stylés / native n’importe où dans votre application.
  5. Réagir au générateur d’ombres natif– Une excellente ressource pour générer des ombres portées fraîches pour vos applications. J’ai utilisé cela pour générer l’ombre sur la carte de bienvenue dans l’application de démonstration de cet article.

Merci d’avoir lu.

Nathan

(GitHub, LinkedIn , Gazouillement , Instagram, et Site Portfolio)


Construire votre première application native Reacta été publié à l’origine dans Hacker midisur Medium, où les gens poursuivent la conversation en soulignant et en répondant à cette histoire.

Source

A propos newstrotteur-fr

Découvrez également

Alex Kurtzman parle de l’avenir de la franchise STAR TREK et de la préservation de la fraîcheur et de la nouveauté – Newstrotteur

Sur le récent épisode du podcast de Deadline Appel d’équipage, Star Trek: Découverte producteur exécutif, …

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *