React Crash Course voor beginners, deel 3

Het resultaat is vier  componenten toegevoegd aan onze galerij.

Het is erg vervelend om films één voor één handmatig toe te voegen App.js. In de praktijk zouden app-gegevens waarschijnlijk afkomstig zijn uit een database en tijdelijk worden opgeslagen in een JSON-object voordat ze worden toegevoegd aan het statusobject in uw app.

Reactstaat beheren

Wat staat er in een React-app? U kunt het beschouwen als een enkel JavaScript-object dat alle gegevens in uw app vertegenwoordigt. Staat kan op elke component worden gedefinieerd, maar als u de status tussen componenten wilt delen, is het beter om deze te definiëren op de component op het hoogste niveau. Staat kan vervolgens worden doorgegeven aan onderliggende componenten en indien nodig worden geopend.

Hoewel status één hoofddoel is, kan dat object meerdere subobjecten bevatten die betrekking hebben op verschillende delen van uw app. In een winkelwagen-app kunt u bijvoorbeeld een statusobject hebben voor de artikelen in uw bestelling en een ander object voor het monitoren van voorraad.

In onze app 'Movie Mojo' hebben we slechts één substatement om de films op te slaan in onze galerij.

De kerngedachte achter het gebruik van de staat is dat wanneer gegevens in uw app worden gewijzigd, React de relevante delen van de DOM voor u bijwerkt. Het enige dat u hoeft te doen, is de gegevens of status in uw app beheren en React verwerkt alle DOM-updates.

Films toevoegen via staat

Voor de eenvoud zullen we de databasestap verlaten en doen alsof onze filmedata is opgehaald uit een database en opgeslagen in JSON-formaat.

Om te demonstreren dat items aan een begintoestand worden toegevoegd, en om de status bij te werken wanneer een gebeurtenis plaatsvindt (zoals het indrukken van een knop), gebruiken we twee JSON-objecten die elk gegevens bevatten over vier films.

In de src map, voeg een nieuwe toe movies.js bestand, open het in een editor en voeg de volgende code toe om onze twee JSON-objecten te definiëren:

// enkele voorbeeldfilms const initialMovies = film1: titel: "Ferris Bueller's Day Off", jaar: "1986", beschrijving: "Een wijseman uit de middelbare school is vastbesloten om een ​​vrije dag van school te hebben, ondanks wat de opdrachtgever denkt van dat. ", poster:" ./posters/ferris.png ", movie2: title:" Bridget Jones 'Diary ", jaar:" 2001 ", beschrijving:" Een Britse vrouw is vastbesloten om zichzelf te verbeteren terwijl ze eruitziet voor liefde in een jaar waarin ze een persoonlijk dagboek bijhoudt. ", poster:" ./posters/bridget- jones.png ", movie3: title:" 50 First Dates ", year:" 2004 ", description:" Henry Roth is een man die bang is om zich te binden tot hij de mooie Lucy ontmoet. Ze slaan het tegen elkaar en Henry denkt dat hij eindelijk het meisje van zijn dromen heeft gevonden. ", Poster:" ./posters/50-first-dates.png " , movie4: title: "Matilda", jaar: "1996", beschrijving: "Verhaal van een geweldig klein meisje, dat toevallig een genie is, en haar geweldige leraar versus de slechtste ouders ooit en het slechtst denkbare schoolhoofd. ", poster:" ./posters/matil da.png "; const additionalMovies = movie5: title: "Dirty Dancing", jaar: "1987", beschrijving: "De zomer doorgebracht in een resort in Catskills met haar familie, Frances 'Baby' Houseman wordt verliefd op de dansinstructeur van het kamp, ​​Johnny Castle . ", poster:" ./posters/dirty-dancing.png ", movie6: title:" When Harry Met Sally ", jaar:" 1989 ", beschrijving:" Harry en Sally kennen elkaar al jaren, en zijn hele goede vrienden, maar ze vrezen dat seks de vriendschap zou verpesten. ", poster:" ./posters/when-harry-met-sally.png ", movie7: title:" Elf ", year:" 2003 ", description: "Na onbedoeld grote ravage te hebben aangericht aan de elfengemeenschap vanwege zijn lelijke grootte, wordt een man opgevoed als een elf op de Noordpool naar de VS gestuurd op zoek naar zijn ware identiteit.", poster: "./posters/elf. png ", movie8: title:" Grease ", year:" 1978 ", description:" Good girl Sandy and greaser Danny werd verliefd tijdens de zomer. Wanneer ze onverwacht ontdekken dat ze nu op dezelfde middelbare school zitten, zullen ze kunnen thei opnieuw aansteken r romantiek? ", poster:" ./posters/grease.png "; exporteer initialMovies; exporteer additionalMovies;

Voordat we kunnen verwijzen naar de JSON-objecten in onze  component, we moeten ze importeren. Voeg dit toe aan de bovenkant van App.js:

importeer initialMovies uit '... / films'; importeer additionalMovies uit '... / films';

Elk JSON-object is nu beschikbaar via de variabelen initialMovies en additionalMovies. Tot nu toe hebben we echter geen enkele staat gekoppeld aan onze app. Laten we dat nu oplossen.

De component op het hoogste niveau in onze app 'Movie Mojo' is , dus laten we hier ons staatsobject toevoegen. We moeten state worden geïnitialiseerd samen met de componentklasse, die we kunnen doen via de constructorfunctie.

Wanneer u een constructorfunctie gebruikt in een React-klasse, moet u bellen super() eerst als de bestanddeel object dat we verlengen, moet vóór alles anders worden geïnitialiseerd. Plus, de deze sleutelwoord zal niet beschikbaar zijn in de constructor tot na super() is teruggekomen.

Om onze te initialiseren staat object, voeg dit toe aan de  componentklasse:

constructor () super (); this.state = movies: ; 

Hiermee wordt een leeg statusobject gemaakt voor onze React-app. Met behulp van de React ontwikkelaarshulpmiddelen kunnen we de staat object geïnitialiseerd rechtstreeks op de  bestanddeel.

We willen echter het staat object met sommige films zodat ze meteen worden weergegeven bij het laden van de pagina. Om dit te doen, kunnen we de films state object met initialMovies in plaats van een leeg object.

constructor () super (); this.state = movies: initialMovies; 

Hiermee wordt de beginstatus voor onze app ingesteld voor de vier films die zijn opgeslagen in de initialMovies JSON-object, maar de films in de galerij worden nog steeds hard gecodeerd weergegeven  componenten die we eerder hebben toegevoegd.

We moeten de films weergeven in de film state object in plaats daarvan, wat we kunnen doen door een lus te gebruiken om elke film te itereren.

Begin met het verwijderen van de hardcodes  componenten, en vervang ze door:

Object .keys (this.state.movies) .map (key => )

Deze code vereist enige uitleg. De film statusobject bevat afzonderlijke films die zijn opgeslagen als objecten, maar om deze te herhalen, zou het eenvoudiger zijn om met een array te werken.

Dus we gebruiken Object.keys () om alle sleutels voor de filmvoorwerpen te pakken en deze in een array op te slaan. Dit wordt vervolgens herhaald met behulp van .kaart(), en een  component wordt uitgevoerd voor elke film in de films state object.

Er zijn een paar wijzigingen aangebracht ten opzichte van de vorige manier waarop we een hebben toegevoegd , though. Ten eerste geven we alle informatie voor een individuele film via een single door meta prop. Dit is eigenlijk handiger dan voorheen, waarbij we een afzonderlijke prop hebben gespecificeerd voor elk filmattribuut.

Merk ook op dat we een sleutel steun ook. Dit wordt intern door React gebruikt om componenten bij te houden die door de lus zijn toegevoegd. Het is niet echt beschikbaar voor gebruik door het onderdeel, dus probeer het niet te openen in uw eigen code.

Zonder een sleutel prop, React gooit een fout, dus het is belangrijk om het op te nemen. Reageren moet weten welke nieuwe films zijn toegevoegd, bijgewerkt of verwijderd om alles gesynchroniseerd te houden.

We moeten nog een ding doen voordat onze componenten kunnen worden weergegeven. Doe open Movie.js, en voor elke verwijzing naar een prop, voeg het toe met meta, als volgt:

 
this.props.meta.title
 
 
(this.props.meta.year)
 
this.props.meta.description
 

Meer films laden

We hebben gezien hoe films die aan de status zijn toegevoegd, worden weergegeven wanneer onze app wordt geïnitialiseerd, maar wat als we onze filmgalerij op een bepaald moment willen bijwerken?

Dit is waar React echt op schijnt. Het enige wat we moeten doen is de films bijwerken in de film state-object en React werkt automatisch alle delen van onze app bij die dit object gebruiken. Dus, als we films toevoegen, activeert React de  component render () methode om onze filmgalerij bij te werken.

Laten we kijken hoe we dit kunnen implementeren.

Begin door een HTML-knop toe te voegen binnen de sluitende div-wrapper in App.js.

Meer laden… 

Wanneer op de knop wordt geklikt, wordt een klassemethode gebruikt loadAdditionalMovies wordt genoemd. Voeg deze methode toe aan de  componentklasse:

loadAdditionalMovies () var currentMovies = ... this.state.movies; var newMovies = Object.assign (currentMovies, additionalMovies); this.setState (movies: newMovies); 

De status bijwerken is relatief eenvoudig zolang u de aanbevolen methode volgt, namelijk het huidige statusobject kopiëren naar een nieuw object en die kopie bijwerken met nieuwe items. Vervolgens bellen we om de nieuwe status in te stellen this.setState en geef ons nieuwe staatsobject door om de vorige te overschrijven. Zodra de status is bijgewerkt, werkt React alleen updates uit aan de delen van de DOM die zijn getroffen door de statusverandering.

De eerste regel in loadAdditionalMovies () gebruikt een verspreiding operator om alle eigenschappen van de te kopiëren this.state.movies object in het nieuwe currentMovies voorwerp.

Daarna gebruiken we Object.assign om twee objecten samen te voegen, waardoor de lijst met nieuwe films aan de huidige lijst wordt toegevoegd.

Er is nog één stap die we moeten voltooien voor de loadAdditionalMovies () methode zal werken. Als u naar een aangepaste componentmethode wilt verwijzen, moeten we deze eerst handmatig binden aan de componentklasse.

Dit is een eigenaardigheid van React en het is iets dat je moet onthouden om te doen. Elke keer dat een methode wordt gebruikt zonder handmatig te zijn gebonden, klaagt React en gooit een compilatiefout.

Voeg dit toe aan de klasse-constructor in App.js:

this.loadAdditionalMovies = this.loadAdditionalMovies.bind (this);

Zolang u eraan denkt deze tijdelijke oplossing te gebruiken voor elke aangepaste methode waarvoor u deze moet gebruiken deze, je zult geen problemen tegenkomen.

Probeer nu op te klikken Meer laden…  Knop. Je zou vier extra films moeten zien toegevoegd aan de galerij.

Dit toont een belangrijke sterkte van React aan. Dat wil zeggen, u laten focussen op de gegevens in uw app en alle alledaagse updates van de DOM laten staan ​​om te Reageren. Om films toe te voegen, hoefden we alleen de gegevens in onze film state-object en React zorgde voor al het andere.

Onze voorbeeldapp is nog steeds vrij eenvoudig, maar stel je een veel complexere app voor met veel componenten en meerdere statelijke objecten. Het proberen om de DOM handmatig bij te werken naarmate de gegevens in je app veranderen, zou een enorme (en foutgevoelige) taak zijn!

Conclusie

In deze zelfstudie hebben we echt vooruitgang geboekt met onze app 'Movie Mojo'. We hebben de React-status gebruikt om de lijst met films in onze app te beheren. We hebben niet alleen films aan het initiële statusobject toegevoegd toen onze app werd geïnitialiseerd, maar we hebben ook de lijst met films in onze galerij bijgewerkt toen de app Meer laden…  Er is op de knop geklikt.

In deel vier en de laatste zelfstudie in deze serie zullen we bekijken hoe we handmatig een film aan onze galerij kunnen toevoegen via een aangepast formulier. Gebruikers kunnen het formulier invullen en details over een film toevoegen, die zullen worden toegevoegd aan de lijst met films die in de galerij worden weergegeven.