Haal je hoofd rond reageren met deze vijf factoren

Leren reageren, de JavaScript-bibliotheek voor het maken van gebruikersinterfaces van Facebook en Instagram lijkt noten totdat je het een kans geeft. Dingen worden veel gemakkelijker wanneer u vijf belangrijke concepten begrijpt. Ik noem deze de vijf geestverschuivingen. Zij zijn: componenten, JSX, State, Lifecycle-methoden en eenrichtingsgegevensstroom.

01. Componenten

Componenten zijn stukjes code die kan worden gecombineerd om meer complexe functionaliteit te bieden. Wanneer u uw aanvraag in componenten verdeelt, maakt het het gemakkelijker om bij te werken en te onderhouden. In reageren zijn componenten nog belangrijker: programmeer je niet alleen, je ontwerpt je app door te denken over hoe deze componenten bij elkaar passen.

Laten we de interface hieronder gebruiken als een voorbeeld. Je kunt zien hoe het kan worden onderverdeeld in drie stukken: een vak voor het boeken van een nieuwe afspraak, een lijstweergave waarmee u de bestaande afspraken kunt bekijken en een zoekvak voor het kijkt door hen.

In HTML zou je aan deze applicatie als een reeks elementen kunnen denken, zoals dit:

 & LT; DIV ID = "PetAppointments" & GT;
  & lt; div class = "addappointments" & gt; & lt; / div & gt;
  & LT; DIV-klasse = "SearchAppunctions" & GT; & LT; / DIV & GT;
  & LT; DIV-klasse = "ListAppointments" & GT; & LT; / DIV & GT;
& LT; / DIV & GT; 

En dat is ook wat je zou doen in reageer. U maakt een enkele tag (& lt; div id = "aandoeningen" & GT;) die een aangespanningscomponent noemt, die vervolgens de andere subcomponenten indien nodig roept. Om een ​​configuratiedoel als deze door te geven, gebruikt u de creatievlassemethode van het reageerobject.

 Var-maininterface = reageren.createclass ({
  render: functie () {
    terug (
      & lt; div classname = "interface" & GT;
        & lt; addplace / & GT;
        & LT; SearchAppunctions / & GT;
        & LT; ListAppointments / & GT;
      & LT; / DIV & GT;
    ​
  } // render
​// Maininterface

Reaction.Render (
  & lt; maininterface / gt ;,
  Document.getelementByID ('PetAppointments')
​// render 

Er zijn twee rendermethoden. In de klasse Maininterface verklaren we de items die naar de browser worden verzonden en de ReactionDom.Render-methode vervangt de & LT; DIV ID = "PetAppointments" & GT; & LT; / DIV & GT; element in uw HTML met de code van ReACT. We zouden dan de code schrijven die elk van onze drie subcomponenten afhandelt.

Componenten maken code eenvoudig te schrijven en te onderhouden. Zodra u leert na te denken en uw apps te organiseren als een reeks samengestelde componenten, wordt het bouwen van complexe toepassingen eenvoudiger.

02. JSX

JSX is waarschijnlijk een van de grootste geestverschuivingen en een van de redenen waarom de bibliotheek zo raar lijkt. JSX is een extensie naar Javascript waarmee u XML-code met JavaScript kunt combineren.

Dit is een soort van wat er gebeurt met sjablonen, zoals snor, waarmee u Javascript binnen HTML kunt opnemen. Maar JSX wordt (getranspileerd) in JavaScript vertaald. U bouwt dus niet alleen een sjabloon, maar een structuur die wordt omgezet in een reeks javascript-verklaringen. In tegenstelling tot sjablonen van talen hoeft het niet op looptijd te worden geïnterpreteerd. Laten we eens kijken naar een voorbeeld.

 & LT; LI ClassName = "PET-ITEM MEDIA" KEY = {INDEX} & GT;
  & LT; DIV CLASSNAME = "PET-INFO MEDIA-BODY" & GT;
    & lt; div classname = "PET-head" & GT;
      & LT; Span ClassName = "PET-NAAM" & GT; {this.state.data [INDEX] .PETNAME} & LT; / SPAN & GT;
      & LT; CLASSNAME = "APT-datum pull-juist" & GT; {this.state.data [index] .Ptdate} & lt; / span & GT;
    & LT; / DIV & GT;
    & LT; DIV CLASSNAME = "Eigenaar-naam" & GT; & LT; Span ClassName = "Label-item" & GT; Eigenaar: & LT; / Span & GT;
    {this.state.data [index] .OwnerName} & lt; / div & gt;
    & LT; DIV CLASSNAME = "APT-OPMERKINGEN" & GT; {this.state.data [index] .PTNOTES} & LT; / DIV & GT;
  & LT; / DIV & GT;
& LT; / LI & GT; 

We kunnen deze code gebruiken om onze afspraken uit te voeren. Dit voelt zich veel op het gebruik van een normale sjablonerende taal, dus anders dan een paar kleine idiosyncrasies over JSX te leren, kun je het snel ophalen.

Het vreemde gedeelte over het gebruik van JSX is niet het leren van de taal zelf; Het komt over het feit dat het plaatsen van HTML binnen je JavaScript-code lijkt, het lijkt gewoon, goed, verkeerd. Maar het is echt leuk om alle code te hebben voor elke component die op een enkele plaats leeft.

03. Staat

De Dird Mind Shift leert werken met de staat in reageren. Staat wordt opgeslagen op de bovenste component van uw toepassing en beheert wat er in uw app gebeurt. Er is een speciale methode genaamd GetInitialState, waar u kunt configureren wat er gebeurt wanneer uw aanvraag begint.

In mijn voorbeeldtoepassing wordt de initiële status als volgt ingesteld:

 Var-maininterface = reageren.createclass ({
  getinitialstate: functie () {
    terugkeer {
      Aptbodyvisible: FALSE,
      Orderby: 'Petname',
      orderdir: 'ASC',
      QueryText: ''
    } // Return
  }, // getinitialstate 

Het lijkt erop dat ik wereldwijde variabelen instel voor mijn toepassing, maar het aanpassen van deze variabelen bedient eigenlijk hoe componenten renderen. Als iets in mijn app de waarde van een variabele verandert, zullen mijn componenten opnieuw renderen. Als de waarde van Orderby-veranderingen bijvoorbeeld verandert, wordt de lijst met afspraken opnieuw geordend.

Wanneer u een component schrijft, is het eenvoudig om de toestand van de toepassing te wijzigen. Het schrijven van componenten is eenvoudiger, omdat u zich alleen gericht hebt op wat de component doet. Hier is de uiteindelijke component van mijn app:

 var react = vereisen ('reageert');
var aptlist = reageren.createclass ({

  Handledelete: functie () {
    Dit.Props.onelete (this.Props.whichitem)
  ​

  render: functie () {
    terug (
      & LT; LI CLASSNAME = "PET-ITEM MEDIA" & GT;
        & lt; div classname = "Media-links" & GT;
          & LT; Knop ClassName = "PET-DELETE BTN BTN-XS BTN-GEVAAR" OnClick = {this.Handledelete} & GT;
          & LT; Span ClassName = "Glyphicon Glyphicon-Verwijderen" & GT; & LT; / Span & GT; & LT; / Button & GT;
        & LT; / DIV & GT;
        & LT; DIV CLASSNAME = "PET-INFO MEDIA-BODY" & GT;
          & lt; div classname = "PET-head" & GT;
            & LT; Span ClassName = "PET-NAAM" & GT; {deze.props.Singleitem.petName} & LT; / Span & GT;
            & LT; Span ClassName = "Apt-Date Pull-Right" & GT; {deze.props.Singleitem.aptdate} & LT; / Span & GT;
          & LT; / DIV & GT;
          & LT; DIV CLASSNAME = "Eigenaar-naam" & GT; & LT; Span ClassName = "Label-item" & GT; Eigenaar: & LT; / Span & GT;
          {This.Props.Singleitem.OwnerName} & lt; / div & gt;
          & LT; DIV CLASSNAME = "APT-OPMERKINGEN" & GT; {deze.props.Singleitem.aptnotes} & LT; / DIV & GT;
        & LT; / DIV & GT;
      & LT; / LI & GT;
    ) // Return
  } // render
​// aptlist

module.exports = aptlist; 

Het onderdeel is alleen bezig met twee dingen. Ten eerste, met de lijst met afspraken op basis van de huidige status van de toepassing. Ten tweede, met een klik op een van de rode 'X's.

Als u op de 'X' klikt, duwt een wijziging in de toepassingsstatus, waardoor dit onderdeel opnieuw wordt weergegeven. Ik maak me geen zorgen over wat er met de gegevens gebeurt, simpelweg met hoe de huidige gegevens worden weergegeven.

De lijstcomponent is alleen bezig met het vermelden van dingen. Het hoeft zich geen zorgen te maken over wat er elders gebeurt. Het is een schitterende manier om applicaties te bouwen en zodra je het hangen, zul je zien waarom het een superieure manier is om te coderen.

04. Eenweggegevensstroom

De volgende geestverschuiving is om te leren houden van een enkele reisstroom. In reageren woont de staat van uw aanvraag in de bovenste component. Wanneer u het in een subcomponent moet wijzigen, maakt u een verwijzing naar de bovenste component en hanteert u het daar. Dit is een beetje moeilijk om eraan te wennen. Hier is een voorbeeld:

 var react = vereisen ('reageren');
var aptlist = reageren.createclass ({
  Handledelete: functie () {
    Dit.Props.onelete (this.Props.whichitem)
  ​
  render: functie () {
    terug (
      & LT; LI CLASSNAME = "PET-ITEM MEDIA" & GT;
        & lt; div classname = "Media-links" & GT;
          & LT; Knop ClassName = "PET-DELETE BTN BTN-XS BTN-GEVAAR" OnClick = {this.Handledelete} & GT;
          & LT; Span ClassName = "Glyphicon Glyphicon-Verwijderen" & GT; & LT; / Span & GT; & LT; / Button & GT;
        & LT; / DIV & GT;
      & LT; / LI & GT;
      ​
    ) // Return
  } // render
​// aptlist

module.exports = aptlist; 

Dit is een vereenvoudigde versie van de module die een lijst met afspraken maakt. Onze lijst heeft een Delete-knop, die we beheren via een gebeurtenishandler. Dit is een speciale reageerversie van Onclick. Onze gebeurtenishandler noemt de functie Handledelete, die lokaal is voor de submodule. Onze lokale functie maakt eenvoudigweg een verwijzing naar een andere functie in een object genaamd rekwisieten. Rekwisieten zijn hoe belangrijke modules communiceren met submodules.

In de hoofdmodule maakt u een kenmerk op de tag die u gebruikt om de module te vertegenwoordigen. Het ziet eruit als het passeren van een attribuut aan een HTML-tag:

 & LT; APTLIST ONDELETE = {this.Deletemessage} / gt; 

En dan maakt u uw eigen methode in de hoofdcomponent om de wijziging van de toestand van de toepassing aan te pakken. De staat in de hoofdmodule houden helpt uw ​​submodules efficiënter te maken. Het is ook gemakkelijker om code te behouden, omdat de meeste actie op één plek gebeurt.

05. Lifecycle-methoden

Een van de beste dingen over reageren is de manier waarop het de weergave van je modules beheert. Uw modules hoeven zich geen zorgen te maken over het bijwerken van de DOM, alleen over het reageren op de staat van uw aanvraag. Wanneer de staatsveranderingen verandert, reageert reageer de componenten van uw toepassing. Het doet dit door zijn eigen versie van de DOM te creëren die een virtuele dom wordt genoemd.

Maar soms moet je dingen kunnen doen in reactie op de rendering Lifecyle. Voer levenscyclusmethoden in. Dit zijn manieren om te reageren op taken op verschillende punten in de uitvoering van de toepassing.

Er zijn bijvoorbeeld LIFECYLE-methoden waarmee u externe gegevens kunt laden via Ajax-aanvragen:

 ComponentDIDMount: functie () {
  This.ServerreQuest = $ .get ('./ js / data.json', functie (resultaat) {
    var tempapts = resultaat;
    This.SetState ({
      MyAppointments: Tempapts
    ​// setstate
  } .BIND (dit);
}, // ComponentDidmount 

Hier kunt u COMPONENTDIDMOULT u in staat om iets uit te voeren nadat de initiële weergave is voltooid. Dit is een geweldige plek om Ajax-inhoud te laden, timers op te zetten enzovoort. Er zijn veel andere levenscyclusmethoden waarmee u de uitvoering van de toepassing op verschillende punten kunt vangen. Ze zijn nodig vanwege de virtuele dom van react, die een geweldige tentaliteit is bij het bouwen van apps.

Rethinking Reageer

Reageer vereist een heroverweging van de manier waarop je met webtoepassingen werkt, maar als je je concentreert op het beheersen van de voordelen van deze vijf geestverschuivingen, leert je snel waarom de bibliotheek zo ongelooflijk populair is geworden en een fantastische manier is om interfaces te bouwen.

Dit artikel - geïllustreerd door Ray Villalobos - werd oorspronkelijk gepubliceerd in kwestie 286 van netto, 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Abonneer u op NET ​

Wilt u uw reactievaardigheden verder verfijnen?

Als je geïnteresseerd bent in het leren van meer over reageren, zorg er dan voor dat je je ticket hebt opgepikt Genereer Londen van 19-21 september 2018 ​Opgelopen reageer Academy om te leren reageren over de hele wereld en gelanceerd sizzy.co en ok-google.io Kristijan Ristovski zal zijn workshop leveren - leer hoe te denken in reageren - waarin hij zal ontdekken, reageert de beste praktijken en leer je oplossingen voor echte problemen die je zou kunnen tegenkomen in het proces van het bouwen van een app.

Genereer London vindt plaats van 19-21 september 2018. KRIJG NU ​

Gerelateerde artikelen:

• 10 expert Reacterstips die je vandaag moet weten
• Maak een dashboard-app met reageer
• Bouw een eenvoudige muziekspeler met reageer