React Crash Course för nybörjare, del 2

I del en av denna handledningsserie använde vi skapa reagera-app verktyg för att skapa en arbetsprovapp som utgångspunkt för vår "Movie Mojo" -galleriapp.

I del två kommer vi att ta tag i att vi lägger till vår första anpassade komponent för att visa individuella filmkort. Vi ser också hur användandet av rekvisita gör att vi kan anpassa utseendet på komponenter genom att skicka in data istället för att hårdkoda det.

Detta visar flexibiliteten och återanvändningen av komponenter, och hur de kan användas som kraftfulla byggstenar i dina React apps.

Vår första komponent

OK, låt oss skapa en komponent! Till att börja med kommer vi att hålla sakerna ganska enkla och refactor header HTML i sin egen komponent.

Moderna Reaktions bästa praxis rekommenderar att du separerar ut varje komponent i din app i en separat fil. Vi följer denna princip så, i dina projekt / src / komponenter / mapp, skapa en ny fil som heter Header.js och öppna den i en textredigerare.

Överst på komponentfiler börjar vi alltid med att importera nödvändiga bibliotek, andra komponenter (som vi kan boja komponenter) och extra tillgångar vi behöver (t ex stilar). De importera uttalandet är en del av ES6 och låter oss hålla våra projekt mycket modulära.

För vår

komponent behöver vi bara importera React-biblioteket, vilket vi kan göra med detta uttalande:

Importreakt, Komponent från "reagera";

Detta importerar hela React-biblioteket och gör det tillgängligt via Reagera variabel. Det importerar också Komponent objekt direkt så att vi kan använda det utan att behöva specifikt kvalificera det med ett föregående Reagera. objektreferens.

Med andra ord, om vi inte uttryckligen importerade Komponent objekt då måste vi få tillgång till det enligt följande:

React.Component

Men för att vi importerade Komponent direkt kan vi bara använda det själv utan hänvisning till Reagera variabel. Det spelar ingen roll vilken du använder, och är bara nere till preferens.

För att faktiskt skapa komponenten förlänger vi Komponent objekt för att skapa en ny klass som definierar vår

komponent. Efter importera uttalande, typ:

Klasshuvudet utökar komponent  export standard App;

Här använder vi en ES6-klass som vår komponentbehållare. Klasser är ett bra sätt att inkapslera all kod som behövs för att beskriva din komponent.

Du kanske också har märkt att komponentfilen slutar med en exportdeklaration. Detta, som du kanske förväntar dig, exporterar vår komponent och gör den tillgänglig för andra filer i vårt projekt.

I allra högsta grad krävs att alla React-komponenter har en återgivningsmetod, vilket ger en viss markering. Det här kan vara HTML, andra React-komponenter eller en blandning av båda.

Lägg till detta i din komponentklass:

render () return React.createElement ('div', null, 'Hej där, det här är en React-komponent!');

De React.createElement () Metoden skapar ett HTML-element (a

i det här fallet) och lägger till lite innehåll på den. Spara ändringar till Header.js och öppna upp App.js.

För att använda en React-komponent i en annan komponent måste vi först importera den, så lägg till den i listan över importdeklarationer högst upp på App.js:

importera rubrik från "./Header";

Observera hur du inte behöver lägga till .js filtillägg, eftersom detta antas. Också för att

komponenten finns i samma mapp som vår komponent behöver vi inte ange hela sökvägen.

Faktum är att om du försöker använda importera rubrik från './components/Header'; från insidan App.js, Du får ett kompileringsfel.

Vi kan nu lägga till

komponent i returdeklarationen precis som något HTML-element. Det finns dock ett tillvägagångssätt. Du kan endast returnera ett toppnivåelement inom en returmetod för komponenter.

Så det här är inte tillåtet:

render () returnera ( 
 
 );

Om du vill återvända till flera element måste du sätta upp dem alla i ett enskilt omslagsperspektiv:

render () returnera (  
 
 
 );

Så se till att du lägger till

komponent inuti

element för att undvika fel.

klass App utökar komponent render () return (    Upptäck din film Mojo!
 
  Välkommen till "Movie Mojo" React app! 
 
 );

Detta kommer att leda till vår

komponent gjordes.

För att slutföra

komponent tar vi bort följande HTML-block från App.js och lägg till den till Header.js.

 Upptäck din film Mojo!

Men du kanske har märkt att det finns ett problem. I App.js de komponentåtergivningsmetod returnerar det som ser ut som HTML. Ändå i Header.js det är bara ett samtal till React.createElement (). Vad pågår?

Svaret är JSX. I App.js vi använder JSX för att skriva HTML-liknande syntax för att definiera vår komponentutgång. Jämför detta med vår komponentdefinition för Header.js.

React.createElement ('div', null, 'Hej där, det här är en React-komponent!');

Så här måste vi skriva React-komponenter utan JSX. Faktum är att det här är vad JSX sammanställs till innan det kan göras till webbläsaren under huven.

Du behöver inte använda JSX alls för dina React-komponenter. det är helt upp till dig. Men nästan alla komponenter du kommer att stöta på kommer att skrivas i JSX eftersom det bara är så mycket lättare att skriva.

Det är också mycket läsbart för andra som är nya i din kod. Tänk dig att behöva studera ett React-projekt som innehåller dussintals olika komponenter skrivna i vanlig JavaScript!

Så det borde inte vara någon överraskning att vi ska använda JSX för komponentdefinitioner under resten av denna handledningsserie.

Gå vidare och ersätt React.createElement () ring med JSX-ekvivalenten vi kopierade från App.js. Din Header.js filen ska nu se ut så här:

Importreakt, Komponent från "reagera"; klasshuvud utökar komponent render () return (  Upptäck din film Mojo!
 
 );  exportera standardrubriken;

Medan JSX tillåter oss mycket mer flexibilitet att skriva våra komponenter, kom ihåg att det inte är egentligen HTML vi skriver men en abstraktion av det.

Du kan se detta i kodfältet ovan. Meddelande i

tagg som vi använde klassnamn hellre än klass för att ange var vi vill förklara en CSS-klass? Detta beror på att alla JSX är sammanställda till ren JavaScript, och klass är ett reserverat ord i ES6 JavaScript.

Låt oss också justera rubrikstegen. Öppna App.css och redigera .App-header CSS klass att vara:

.App-header bakgrundsfärg: steelblue; höjd: 70px; vaddering: 20px; färg vit;

Detta uppdaterar bakgrundsfärgen på rubriken och minskar höjden.

Komponent rekvisita

Hittills, vår

komponenten är statisk. Det betyder att det visar fast innehåll som aldrig ändras. Men komponenter kan göras för att vara dynamiska och visningsinnehållet passerat in i dem, via komponent rekvisita. Detta gör komponenter plötsligt mycket mer användbara eftersom de blir generiska och återanvändbara.

Tänk på komponent rekvisita som liknar HTML-taggar. Till exempel a

taggen kan ha attribut för id, klass, stil och så vidare gör det möjligt för oss att tilldela unika värden för det specifika

element.

Vi kan göra samma för React-komponenter. Säg att vi inte vill att vår rubrik ska mata ut den fasta texten "Discover Your Movie Mojo!" hela tiden. Skulle det inte vara bättre om vår rubrik skulle kunna visa någon text?

Till skillnad från HTML-attribut kan vi namnge våra komponenter rekvisita vad vi än vill. Inuti App.js, uppdatera

tagg för att vara:

Uppdatera sedan

komponent att använda text stötta.

 This.props.text

Detta resulterar i vår rubrik som visar vilken text som läggs till i text prop i App.js.

Låt oss ta en närmare titt på hur vi hänvisade till text prop inuti Header.js använder sig av:

This.props.text

De lockiga hängslen berättar bara för JSX att vi har några JavaScript vi vill utvärdera. Detta skiljer det från text. Om vi inte använde några lockiga hängslen, strängen bokstavlig this.props.text skulle utmatas, vilket inte är vad vi vill ha.

De detta sökord hänvisar till Rubrik komponent klass, och rekvisita är ett objekt som innehåller alla värden som skickats in från

. I vårt fall är rekvisita Objektet innehåller bara en post, men du kan lägga till så många som du vill i praktiken.

Vår

komponenten är nu mycket mer generisk och innehåller inte en hårdkodad sträng. Det här är en bra metod när du skriver React-komponenter. Ju mer generiska du gör dem desto mer återanvändbara är de.

Det här är goda nyheter när du utvecklar kommande React apps eftersom du kan återanvända komponenter från tidigare projekt så att du inte behöver skriva allt från början.

Vi använde rekvisita ovan för att passera en fast sträng i

komponent, men rekvisita kan också passera variabler, funktionsreferenser och tillstånd till komponenter.

För att skicka en variabel via rekvisita kan vi göra något så här, var rubrik är en variabel:

Inspecting React Components

Det finns ett mycket användbart verktyg tillgängligt för Chrome-webbläsaren som låter dig inspektera information om din React-app.

Standardverktyg för utvecklare tillåter dig bara att visa normala HTML-element, men med verktyget React Developer Tools installerat kan du navigera genom alla React-komponenter i din app.

När det är installerat, öppna verktygen för webbläsarinspektör och klicka på den nyligen tillgängliga Reagera flik. Observera att istället för HTML-element ser du hierarkin för React-komponenter i din app. Klicka på komponent för att välja den.

När en gång väljs visas information om en komponent i fönstret till höger. De komponenten har inga rekvisita och så är fönstret tomt. Men om du väljer

komponent inuti då ser du texten "text" vi passerade in.

React-utvecklarverktygen är mycket användbara för debugging, speciellt när du kommer på att utveckla mer komplexa React-appar, så det är väl värt att vänja sig vid att använda dem på enklare appar.

Du kan också använda verktygen React developer för att inspektera din ansökan, vilket vi kommer in i nästa handledning.

Slutsats

I denna handledning lärde du dig hur du delar upp din app i separata komponenter för att göra det mer modulärt. Komponentrekvisita gör att du kan skicka in värden till enskilda komponenter, som liknar hur du lägger till attribut till HTML-element.

Vi såg också hur man kan utnyttja nya verktyg för webbläsarinspektör för att undersöka komponenter och rekvisita data.

I del 3 lägger vi till tillstånd i vår app för att hjälpa oss att hantera våra data mer effektivt.

Koda

React Crash Course för nybörjare, del 3

React Crash Course för nybörjare, del 1