Obtenez votre tête autour de réagir avec ces cinq facteurs

Sep 13, 2025
Comment
[dix] [dix] [dix]
[dix]

L'apprentissage réagit, la bibliothèque JavaScript pour la création d'interfaces utilisateur de Facebook et Instagram semble noix jusqu'à ce que vous leur donniez une chance. Les choses deviennent beaucoup plus faciles lorsque vous comprenez cinq concepts clés. J'appelle ces cinq changements d'esprit. Ce sont: des composants, des méthodes d'état, d'état, de cycle de vie et de flux de données à sens unique.

[dix]

01. Composants

Les composants sont des morceaux de code pouvant être combinés pour fournir une fonctionnalité plus complexe. Lorsque vous divisez votre application en composants, cela facilite la mise à jour et la maintenance. En réagissant, les composants sont encore plus importants: vous ne les programmez pas seulement, vous concevez votre application en pensant à la manière dont ces composants correspondent ensemble.

Utilisons l'interface ci-dessous comme exemple. Vous pouvez voir comment il peut être divisé en trois pièces: une boîte pour réserver un nouveau rendez-vous, une vue de liste qui vous permet d'afficher les rendez-vous existants et d'une zone de recherche pour la regarder à travers eux.

An image showing how easy it is the structure an app into reusable components.

[dix] [dix]
Vous pouvez facilement voir comment structurer cette application dans des composants réutilisables

Dans HTML, vous pouvez penser à cette application en tant que série d'éléments, comme celui-ci: 

 & lt; div id = "peppointments" & gt;
  & lt; div class = "addappointments" & gt; & lt; / div et gt;
  & lt; div class = "Searchappointments" & gt; & lt; / div & gt;
  & lt; div class = "listAppointments" & gt; & lt; / div et gt;
& lt; / div et gt;

Et c'est aussi ce que vous feriez dans la réaction. Vous créez une seule étiquette (& lt; Div ID = "PETAppOutments" & GT;) qui appelle une composante PETAppOutments, qui appelle ensuite les autres sous-composants selon les besoins. Pour passer le long d'un objet de configuration comme celui-ci, vous utilisez la méthode CreateClass de l'objet React.

[dix] 
 var mainterface = réact.Createclass ({
  Render: fonction () {
    revenir (
      & lt; div classname = "interface" & gt;
        & lt; addAppointment / & gt;
        & lt; Searchappointments / & gt;
        & lt; listAppointments / & gt;
      & lt; / div et gt;
    )
  } // rendu
}); //Interface principale

ReactDom.Rendeur (
  & lt; mainterface / & gt;
  document.getElementyid ('peppointments')
); // rendu

Il y a deux méthodes de rendu. Dans la classe d'interface principale, nous déclarons les éléments qui seront envoyés au navigateur et la méthode ReactDom.Render remplace le & lt; Div ID = "PETAppOutments" & GT; & LT; / Div & GT; élément de votre code HTML avec le code de réact. Nous écrivions alors le code qui gère chacun de nos trois sous-composants.

Les composants rendent le code facile à écrire et à entretenir. Une fois que vous avez appris à penser et à organiser vos applications en tant que série de composants composables, la construction d'applications complexes devient plus simple.

02. JSX

Jsx est probablement l'un des plus gros changements d'esprit et une des raisons pour lesquelles la bibliothèque semble si étrange. JSX est une extension à JavaScript qui vous permet de combiner code XML avec JavaScript.

Ceci est en quelque sorte ce qui se passe avec des langages de modèles comme la moustache, qui vous permettent d'inclure JavaScript au sein de HTML. Mais JSX est traduit (transpilé) en JavaScript. Donc, vous n'êtes pas seulement construire un modèle, mais une structure qui est convertie en une série de déclarations JavaScript. Contrairement aux langues de modèles, il n'est pas nécessaire d'interpréter au moment de l'exécution. Regardons un exemple. 

 & lt; Li CLASSNAME = "PET-Item Media" Key = {index} & gt;
  & lt; div classname = "Pet-Info Media-Body" & GT;
    & lt; divanname de divanny = "animal de compagnie" & gt;
      & lt; SPAN CLASSNAME = "PET-NAME" & GT; {this.state.data [index] .petName} & lt; / span & gt;
      & lt; SPAN CLASSNAME NOM = "APT-DATE-DATE-ROIGE" & GT; {Ceci.State.Data [index] .aptdate} & lt; / span & gt;
    & lt; / div et gt;
    & lt; div classname = "Nom du propriétaire" & GT; & lt; Span ClasseName = "Étiquette-item" & GT; Propriétaire: & lt; / span & gt;
    {this.state.data [index]. Nom de page} & lt; / div et gt;
    & lt; div classname = "apt-notes" & gt; {this.state.data [index] .aptnotes} & lt; / div et gt;
  & lt; / div et gt;
& lt; / li & gt;

Nous pouvons utiliser ce code pour générer nos rendez-vous. Cela ressemble beaucoup à l'utilisation d'un langage de modèles régulier, d'autres que d'apprendre quelques idiosyncrasies mineures à propos de JSX, vous pouvez le ramasser rapidement.

La partie étrange sur l'utilisation de JSX n'apprend pas la langue elle-même; Il remonte au fait que mettre le HTML dans votre code JavaScript semble ... bien, mal. Mais c'est vraiment agréable d'avoir tout le code de chaque composant vivant en une seule place.

03. Etat

An image displaying the user clicking on a red X – which is captured at the component level.

[dix] [dix]
En cliquant sur l'un des XS rouge, est capturé au niveau du composant mais fait référence à une méthode dans le composant principal par les accessoires

Le troisième changement d'esprit apprend à travailler avec l'état de réaction. L'état est stocké sur le composant le plus haut de votre application et gère ce qui se passe dans votre application. Il existe une méthode spéciale appelée getinitialstate où vous pouvez configurer ce qui se passe lorsque votre application commence.

Dans mon exemple d'application, l'état initial est configuré comme ceci: 

 var mainterface = réact.Createclass ({
  getinitialstate: fonction () {
    revenir {
      Visible apte: Faux,
      ordonnance: 'petname',
      orderdir: 'ASC',
      QueryText: ''
    } //revenir
  }, // getinitialstate
[dix]

On dirait que je configurais des variables globales pour mon application, mais la modification de ces variables contrôlent réellement la façon dont les composants rendent. Si quelque chose dans mon application change la valeur d'une variable, mes composants rèventont. Si la valeur de l'ordre change, par exemple, la liste des rendez-vous réalise.

Lorsque vous écrivez un composant, il est facile de modifier l'état de l'application. Les composants d'écriture sont plus faciles que vous ne vous concentrez que sur ce que le composant fait. Voici le composant de la liste finale de mon application: 

 var réact = exiger ("réagir");
var aptlist = réact.Createclass ({

  Handledelete: fonction () {
    cela.Props.ondelete (ceci.props.whichitem)
  },

  Render: fonction () {
    revenir(
      & lt; Li CLASSNAME = "PET-Item Media" & GT;
        & lt; div classname = "media-gauche" & gt;
          & lt; bouton classname = "PET-Suppr BTN BTN-XS BTN-DANGER" ONCLICK = {Ceci.HeDleDelete} & gt;
          & lt; Span ClassName = "Glyphicon Glyphicon-Supprimer" & GT; & lt; / span & gt; & lt; / button & gt;
        & lt; / div et gt;
        & lt; div classname = "Pet-Info Media-Body" & GT;
          & lt; divanname de divanny = "animal de compagnie" & gt;
            & lt; span classname = "PET-NAME" & GT; {this.props.singleitem.petname} & lt; / span & gt;
            & lt; SPAN CLASSNAME = "APT-DATE TIX-ROIGE" & GT; {Ceci.Props.SingleItem.aptdate} & lt; / span & gt;
          & lt; / div et gt;
          & lt; div classname = "Nom du propriétaire" & GT; & lt; Span ClasseName = "Étiquette-item" & GT; Propriétaire: & lt; / span & gt;
          {ceci.props.singleitem.owname} & lt; / div et gt;
          & lt; div clasname = "apt-notes" & gt; {this.props.singleitem.aptnotes} & lt; / div et gt;
        & lt; / div et gt;
      & lt; / li & gt;
    ) // revenir
  } // rendu
}); // aptlist

module.exports = aptlist;

Le composant n'est concerné que par deux choses. Premièrement, montrant la liste des rendez-vous en fonction de l'état actuel de l'application. Deuxièmement, la manipulation d'un clic sur l'un des Red 'X's.

En cliquant sur le 'X', appuyez sur une modification de l'état de l'application, ce qui obligeait ce composant à restituer. Je ne suis pas inquiet de ce qui se passe avec les données, simplement avec la manière dont les données actuelles seront affichées.

La composante Liste n'est concernée que par la liste des choses. Il n'a pas à s'inquiéter de ce qui se passe ailleurs. C'est un moyen brillant de construire des applications et une fois que vous avez compris, vous verrez pourquoi il est un moyen supérieur de coder.

04. Flux de données à sens unique

An image showing the user inputting information into a search component, demonstrating how React will re-render specific data on the go.

[dix] [dix]
Ici, le composant de recherche est uniquement concerné par la modification de l'état des données. La liste reformulera avec les nouvelles données à la volée

Le prochain changement d'esprit est d'apprendre à aimer un flux de données à sens unique. En réagissant, l'état de votre application réside dans le composant le plus haut. Lorsque vous devez le modifier dans un sous-composant, vous créez une référence sur le composant le plus haut et le gérer là-bas. Ceci est un peu difficile à utiliser. Voici un exemple: 

 var réact = exiger ("réagir");
var aptlist = réact.Createclass ({
  Handledelete: fonction () {
    cela.Props.ondelete (ceci.props.whichitem)
  },
  Render: fonction () {
    revenir(
      & lt; Li CLASSNAME = "PET-Item Media" & GT;
        & lt; div classname = "media-gauche" & gt;
          & lt; bouton classname = "PET-Suppr BTN BTN-XS BTN-DANGER" ONCLICK = {Ceci.HeDleDelete} & gt;
          & lt; Span ClassName = "Glyphicon Glyphicon-Supprimer" & GT; & lt; / span & gt; & lt; / button & gt;
        & lt; / div et gt;
      & lt; / li & gt;
      ...
    ) // revenir
  } // rendu
}); // aptlist

module.exports = aptlist;

Ceci est une version simplifiée du module qui crée une liste de rendez-vous. Notre liste a un bouton Supprimer, que nous gérons via un gestionnaire d'événements. Ceci est une version réactive spéciale d'Onclick. Notre gestionnaire d'événements appelle la fonction Handledelete, qui est locale au sous-module. Notre fonction locale crée simplement une référence à une autre fonction dans un objet appelé accessoires. Les accessoires sont la façon dont les modules principaux communiquent avec des sous-modules.

Dans le module principal, vous créeriez un attribut à la balise que vous utilisez pour représenter le module. Il a l'air de passer un attribut à une étiquette HTML: 

 & lt; aptlist ondelete = {this.deletemessage} / & gt;

Et puis vous créez votre propre méthode dans le composant principal pour gérer la modification de l'état de l'application. Garder l'état dans le module principal aide à rendre vos sous-modules plus efficaces. Il est également plus facile de maintenir le code car la majeure partie de l'action se produit au même endroit.

05. Méthodes de cycle de vie

L'une des meilleures choses sur réagir est la façon dont il gère le rendu de vos modules. Vos modules n'ont pas à vous soucier de la mise à jour du DOM, à propos de réagir à l'état de votre application. Lorsque les changements d'état, réagir réaffirmer les composants de votre application. Cela le fait en créant sa propre version du DOM appelé un DOM virtuel.

Mais parfois, vous devez être capable de faire les choses en réponse au cycle de vie rendu. Entrez les méthodes de cycle de vie. Ce sont des moyens de demander réact de gérer les tâches à différents moments de l'exécution de l'application.

Il existe par exemple des méthodes de cycle de vie qui vous permettent de charger des données externes via les demandes AJAX: 

 ComponentDidMount: fonction () {
  this.serverrequest = $ .get ("./ js / data.json ', fonction (résultat) {
    varemposts var = résultat;
    ceci.setstate ({
      myappointments: tempappts
    }); // SetState
  } .Bind (this));
}, // composantDidMount

Ici, ComponentDidMount vous permet d'exécuter quelque chose après la fin du rendu initial. C'est un endroit idéal pour charger les contenus Ajax, mettre en place des minuteries et ainsi de suite. Il y a beaucoup d'autres méthodes de cycle de vie qui vous permettent de piéger l'exécution de l'application à différents moments. Ils sont nécessaires à cause du DOM virtuel de React, ce qui est un excellent épon-conversation lors de la construction d'applications.

Repenser réagir

Réagir nécessite une repense de la manière dont vous travaillez avec des applications Web, mais si vous vous concentrez sur la maîtrise des avantages de ces cinq changements d'esprit, vous apprendrez rapidement pourquoi la bibliothèque est devenue si incroyablement populaire et constitue un moyen fantastique de construire des interfaces.

Cet article - illustré par Ray Villalobos - a été publié à l'origine dans le numéro 286 de Net, le magazine le plus vendable au monde pour les concepteurs et les développeurs Web. Abonnez-vous au NET .

Voulez-vous affiner davantage vos compétences de réaction?

Image with the details on Kristijan Ristovski’s workshop – Learn How to Think in React – at Generate London on 19-21 September 2018.

[dix] [dix]
Kristijan Ristovski donne à son atelier apprendre à penser à réagir pour générer Londres du 19 au 21 septembre 2018

Si vous êtes intéressé à en apprendre davantage sur React, assurez-vous que vous avez pris votre billet pour Générez Londres du 19 au 21 septembre 2018 . Avoir fondé React Academy pour enseigner réagir dans le monde entier et lancé sizzy.co et ok-google.io Kristijan Ristovski fournira son atelier - apprendre à penser à réagir - dans lequel il explorera les meilleures pratiques et enseignera vos solutions à de vrais problèmes que vous pourriez rencontrer dans le processus de construction d'une application.

Generate London a lieu du 19 au 21 septembre 2018. Obtenez votre billet maintenant .

Articles Liés:

  • 10 conseils Expert ReactJS que vous devez savoir aujourd'hui
  • Créer une application de tableau de bord avec réaction
  • Construire un simple lecteur de musique avec réaction
[dix] [dix]
[dix]

Comment - Most Popular Articles

Utilisez Adobe XD pour créer des interactions micro

Comment Sep 13, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'image: Adobe) [DIX] Adobe XD Peut-VOUS ARTIDE ARI..

Contrôle de la version principale pour les équipes distantes

Comment Sep 13, 2025

[dix] [dix] [dix] [dix] Le travail à distance est devenu beaucoup plus fréquent dans le développem..

Comment traiter un visage pour l'animation

Comment Sep 13, 2025

[dix] [dix] [dix] [dix] Quand j'avais d'abord appris à créer des plates-formes de personnages à Ma..

Tourner les illustrations 2D en art 3D

Comment Sep 13, 2025

[dix] [dix] [dix] [dix] Mon voyage dans la fabrication Art 3D a commen..

Comment créer des couleurs brillantes avec des peintures à l'huile

Comment Sep 13, 2025

[dix] [dix] [dix] [dix] Être invité à décrire mon technique de peinture ..

Améliorez vos pinceaux dans les huiles

Comment Sep 13, 2025

Les peintures à l'huile offrent le support idéal pour obtenir des broussailles fortes et intéressantes. Le style de pinceaux d'un artiste est ce qui définit leur travail et lui donne la p..

Le guide ultime pour composer des images dans Photoshop

Comment Sep 13, 2025

[dix] [dix] [dix] [dix] Parmi tous les projets Photoshop, la composition d'images dans un cadre fanta..

Comment prendre votre logo vectoriel de 2D à 3D

Comment Sep 13, 2025

[dix] [dix] [dix] [dix] Dans ce tutoriel, nous examinons comment vous pouvez prendre vos logos basés..

Catégories