Rock Solid React.js Foundations: Guide du débutant

Je travaille avec React et React-Native depuis quelques mois. J'ai déjà publié deux applications en production, Kiven Aa (React) et Pollen Chat (React Native). Quand j'ai commencé à apprendre React, je cherchais quelque chose (un blog, une vidéo, un cours, peu importe) qui ne m'a pas seulement appris à écrire des applications dans React. Je voulais aussi qu'il me prépare aux interviews.

La plupart des matériaux que j'ai trouvés se concentraient sur l'un ou l'autre. Donc, cet article s'adresse au public qui recherche un mélange parfait de théorie et de pratique. Je vais vous donner un peu de théorie pour que vous compreniez ce qui se passe sous le capot, puis je vous montrerai comment écrire du code React.js.

Si vous préférez la vidéo, j'ai également tout ce cours sur YouTube. Veuillez vérifier cela.

Plongeons-nous dans…

React.js est une bibliothèque JavaScript pour créer des interfaces utilisateur

Vous pouvez créer toutes sortes d'applications d'une seule page. Par exemple, les messageries de chat et les portails de commerce électronique sur lesquels vous souhaitez afficher les modifications sur l'interface utilisateur en temps réel.

Tout est un composant

Une application React est composée de composants, dont beaucoup sont imbriqués les uns dans les autres. «Mais que sont les composants?», Demandez-vous.

Un composant est un morceau de code réutilisable, qui définit l'apparence et le comportement de certaines fonctionnalités sur l'interface utilisateur. Par exemple, un bouton est un composant.

Examinons la calculatrice suivante, que vous voyez sur Google lorsque vous essayez de calculer quelque chose comme 2 + 2 = 4 –1 = 3 (calculs rapides!)

Comme vous pouvez le voir dans l'image ci-dessus, la calculatrice comporte de nombreuses zones - comme la fenêtre d'affichage des résultats et le pavé numérique . Tous ces éléments peuvent être des composants séparés ou un composant géant. Cela dépend de la façon dont on est à l'aise pour décomposer et faire abstraction des choses dans React

Vous écrivez le code pour tous ces composants séparément. Ensuite, combinez-les sous un seul conteneur, qui à son tour est un composant React lui-même. De cette façon, vous pouvez créer des composants réutilisables et votre application finale sera un ensemble de composants séparés travaillant ensemble.

Voici l'une des méthodes permettant d'écrire la calculatrice, illustrée ci-dessus, dans React:

Oui! Cela ressemble à du code HTML, mais ce n'est pas le cas. Nous en explorerons plus dans les sections suivantes.

Mise en place de notre terrain de jeu

Ce tutoriel se concentre sur les principes de base de React. Il n'est pas principalement orienté vers React pour le Web ou React Native (pour la création d'applications mobiles). Nous allons donc utiliser un éditeur en ligne afin d'éviter les configurations spécifiques web ou natives avant même d'apprendre ce que React peut faire.

J'ai déjà mis en place un environnement pour vous sur codepen.io. Suivez simplement le lien et lisez tous les commentaires dans les onglets HTML et JavaScript (JS).

Contrôle des composants

Nous avons appris qu'une application React est une collection de divers composants, structurés comme un arbre imbriqué. Ainsi, nous avons besoin d'une sorte de mécanisme pour transmettre les données d'un composant à un autre.

Entrez "accessoires"

Nous pouvons transmettre des données arbitraires à notre composant en utilisant un propsobjet. Chaque composant de React obtient cet propsobjet.

Avant d'apprendre à utiliser cet propsobjet, découvrons les composants fonctionnels.

a) Composant fonctionnel

Un composant fonctionnel de React consomme des données arbitraires que vous lui transmettez à l'aide d'un propsobjet. Il renvoie un objet qui décrit ce que UI React doit rendre. Les composants fonctionnels sont également appelés composants sans état.

Écrivons notre premier composant fonctionnel:

C'est si simple. Nous venons de passer propscomme argument à une fonction JavaScript simple et avons renvoyé, euh, bien, qu'est-ce que c'était? Que {props.name}je v> chose! C'est JSX (JavaScript Extended). Nous en apprendrons plus à ce sujet dans une section ultérieure.

Cette fonction ci-dessus rendra le HTML suivant dans le navigateur:

Lisez la section ci-dessous sur JSX, où j'ai expliqué comment nous obtenons ce HTML à partir de notre code JSX.

Comment pouvez-vous utiliser ce composant fonctionnel dans votre application React? Heureux que vous ayez demandé! C'est aussi simple que ce qui suit:

L'attribut namedans le code ci-dessus devient à l' props.nameintérieur de notre Hello composant. L'attribut agedevient props.ageet ainsi de suite.

Rappelles toi! Vous pouvez imbriquer un composant React dans d'autres composants React.

Utilisons ce Hellocomposant dans notre aire de jeux codepen. Remplacez l' divintérieur ReactDOM.render()par notre Hellocomposant, comme suit, et voyez les changements dans la fenêtre du bas.

Mais que faire si votre composant a un état interne? Par exemple, comme le composant compteur suivant, qui a une variable de comptage interne, qui change sur les touches + et -.

b) Composant basé sur les classes

Le composant basé sur les classes possède une propriété supplémentaire stateque vous pouvez utiliser pour contenir les données privées d'un composant. Nous pouvons réécrire notre Hellocomposant en utilisant la notation de classe comme suit. Étant donné que ces composants ont un état, ils sont également appelés composants avec état .

Nous étendons la React.Componentclasse de la bibliothèque React pour créer des composants basés sur des classes dans React. En savoir plus sur les classes JavaScript ici.

La render()méthode doit être présente dans votre classe lorsque React recherche cette méthode afin de savoir quelle interface utilisateur il doit afficher à l'écran.

Pour utiliser ce type d'état interne, nous devons d'abord initialiser l' stateobjet dans le constructeur de la classe de composant, de la manière suivante.

De même, le propspeut être consulté dans notre composant basé sur les classes en utilisant this.propsobject.

Pour définir l'état, vous utilisez React.Component's setState(). Nous en verrons un exemple dans la dernière partie de ce tutoriel.

Astuce: N'appelez jamais la fonction setState()interne render(), car cela setState()entraîne le nouveau rendu du composant et cela entraînera une boucle sans fin.

Original text


En dehors de cela state, un composant basé sur une classe a des méthodes de cycle de vie comme celles- componentWillMount().ci que vous pouvez utiliser pour faire des choses, comme l'initialisation de state et tout, mais cela sort du cadre de cet article.

JSX

JSX est une forme courte de JavaScript Extended et c'est un moyen d'écrire des React composants. En utilisant JSX, vous obtenez toute la puissance de JavaScript à l'intérieur de balises XML.

Vous mettez des expressions JavaScript à l'intérieur {}. Voici quelques exemples JSX valides.

La façon dont cela fonctionne est que vous écrivez JSX pour décrire à quoi devrait ressembler votre interface utilisateur. Un transpilateur comme Babelconvertit ce code en un tas d' React.createElement()appels. La bibliothèque React utilise ensuite ces React.createElement()appels pour construire une structure arborescente d'éléments DOM (dans le cas de React pour Web) ou de vues natives (dans le cas de React Native) et la garde en mémoire.

React calcule ensuite comment il peut imiter efficacement cet arbre dans la mémoire de l'interface utilisateur affichée à l'utilisateur. Ce processus est appelé réconciliation. Une fois ce calcul effectué, React apporte les modifications à l'interface utilisateur réelle à l'écran.

Vous pouvez utiliser le REPL en ligne de Babel pour voir ce que React produit réellement lorsque vous écrivez du JSX.

Puisque JSX n'est qu'un sucre syntaxique sur des React.createElement()appels simples , React peut être utilisé sans JSX

Maintenant que nous avons tous les concepts en place, nous sommes donc bien placés pour écrire un countercomposant que nous avons vu précédemment sous forme de GIF.

Le code est le suivant et j'espère que vous savez déjà comment le rendre dans notre terrain de jeu.

Voici quelques points saillants concernant le code ci-dessus.

  1. JSX utilise camelCasingdonc l button'attribut d' est onClick, non onclick, comme nous l 'utilisons en HTML.
  2. La liaison est nécessaire pour thistravailler sur les rappels. Voir les lignes 8 et 9 dans le code ci-dessus.

Le code interactif final se trouve ici.

Avec cela, nous sommes arrivés à la conclusion de notre cours intensif React. J'espère avoir éclairé le fonctionnement de React et comment vous pouvez utiliser React pour créer des applications plus grandes, en utilisant des composants plus petits et réutilisables.

Si vous avez des questions ou des doutes, contactez-moi sur Twitter @ rajat1saxena ou écrivez-moi à [email protected]

Veuillez recommander cet article si vous l'avez aimé et partagez-le avec votre réseau. Suivez-moi pour plus d'articles liés à la technologie et envisagez de vous abonner à ma chaîne Rayn Studios sur YouTube. Merci beaucoup.