React Crash Course for Beginners, del 2

I en del av denne opplæringsserien brukte vi create reagere-app verktøy for å lage en arbeidseksempel-app som utgangspunkt for vår "Movie Mojo" -galleri-app.

I del to, får vi tak i å legge til vår første tilpassede komponent for å vise individuelle filmkort. Vi ser også hvordan bruk av rekvisitter gjør at vi kan tilpasse utseendet på komponenter ved å sende inn data i stedet for å kodes hardt.

Dette demonstrerer fleksibiliteten og gjenbruken av komponenter, og hvordan de kan brukes som kraftige byggeklosser i React apps.

Vår første komponent

OK, la oss lage en komponent! Til å begynne med holder vi ting ganske enkle og refactor header HTML i sin egen komponent.

Best Practices for Modern React anbefaler å skille ut hver komponent i appen din til en egen fil. Vi følger dette prinsippet så, i dine prosjekter / src / komponenter / mappe, opprett en ny fil som heter Header.js og åpne den i et tekstredigeringsprogram.

Øverst på komponentfiler begynner vi alltid ved å importere nødvendige biblioteker, andre komponenter (som vi kan hekse komponenter) og ekstra ressurser vi trenger (for eksempel stilarter). De importere erklæring er en del av ES6 og lar oss holde prosjektene svært modulære.

For vår

komponent, trenger vi bare å importere React-biblioteket, som vi kan gjøre med denne setningen:

Import React, Component fra 'reagere';

Dette importerer hele React-biblioteket og gjør det tilgjengelig via Reagere variabel. Det importerer også Komponent objektet direkte slik at vi kan bruke det uten å kvalifisere det med et forrige Reagere. objektreferanse.

Med andre ord, hvis vi ikke eksplisitt importerte Komponent objekt da vi måtte få tilgang til det som følger:

React.Component

Men fordi vi importerte Komponent direkte, kan vi bare bruke det på egen hånd uten noen henvisning til Reagere variabel. Det spiller ingen rolle hvilken du bruker, og er bare nede i preferanse.

For å faktisk lage komponenten, utvider vi Komponent protester mot å lage en ny klasse som definerer vår

komponent. Etter importere setning, type:

Klasseoverskrift utvider komponent  eksport standard App;

Her bruker vi en ES6-klasse som vår komponentbeholder. Klasser er en flott måte å inkapslere all koden som trengs for å beskrive komponenten din.

Du har kanskje også lagt merke til at komponentfilen slutter med en eksportoppgave. Dette, som du kanskje forventer, eksporterer vår komponent og gjør den tilgjengelig for andre filer i vårt prosjekt.

I det minste trenger alle React-komponenter å ha en gjengivelsesmetode, som returnerer noe oppslag. Dette kan være HTML, andre React-komponenter eller en blanding av begge.

Legg til dette i komponentklassen din:

render () return React.createElement ('div', null, 'Hei det, dette er en React-komponent!');

De React.createElement () Metode oppretter et HTML-element (a

i dette tilfellet) og legger til noe innhold til det. Lagre endringer i Header.js og åpne opp App.js.

Hvis du vil bruke en React-komponent i en annen komponent, må vi først importere den, så legg den til listen over importopplysninger øverst på App.js:

Import Header fra './Header';

Legg merke til hvordan du ikke trenger å legge til .js filtype som dette antas. Også fordi

komponenten er i samme mappe som vår komponent, trenger vi ikke å angi hele banen.

Faktisk, hvis du prøver å bruke Importer header fra './components/Header'; fra innsiden App.js, Du får en kompileringsfeil.

Vi kan nå legge til

komponent i returoppgaven akkurat som ethvert HTML-element. Det er imidlertid en advarsel. Du kan bare returnere ett toppnivå element i en komponent retur metode.

Så dette er ikke tillatt:

gjengivelse () retur ( 
 
 );

Hvis du vil returnere flere elementer, må du pakke dem inn i et enkelt innpakningselement:

gjengivelse () retur (  
 
 
 );

Så sørg for at du legger til

komponent inne i

element for å unngå feil.

klassen App utvider komponent render () return (    Oppdag din film Mojo!
 
  Velkommen til "Movie Mojo" React app! 
 
 );

Dette vil resultere i vår

komponent blir gjengitt.

For å fullføre

komponent, fjerner vi følgende HTML-blokk fra App.js og legg den til Header.js.

 Oppdag din film Mojo!

Du har imidlertid kanskje lagt merke til at det er et problem. I App.js de komponent gjengemetoden returnerer hva som ser ut som HTML. Likevel i Header.js det er bare en enkelt samtale til React.createElement (). Hva skjer?

Svaret er JSX. I App.js Vi bruker JSX til å skrive HTML-lignende syntaks for å definere vår komponentutgang. Sammenlign dette med vår komponentdefinisjon for Header.js.

React.createElement ('div', null, 'Hei, dette er en React-komponent!');

Slik må vi skrive React-komponenter uten JSX. Faktisk, under hetten, er dette hva JSX er kompilert inn før det kan gjengis til nettleseren.

Du er ikke pålagt å bruke JSX i det hele tatt for dine React-komponenter; det er helt opp til deg. Men nesten alle komponenter du kommer over vil bli skrevet i JSX fordi det er bare så mye lettere å skrive.

Det er også svært lesbart for andre som er nye i koden din. Tenk deg å måtte studere et React-prosjekt som inneholder dusinvis av forskjellige komponenter skrevet i vanlig JavaScript!

Så det bør ikke komme som en overraskelse at vi bruker JSX for komponentdefinisjoner gjennom resten av denne opplæringsserien.

Gå videre og erstatt React.createElement () ring med JSX-ekvivalenten vi kopierte fra App.js. Din Header.js filen skal nå se slik ut:

Import React, Component fra 'reagere'; Klassehode utvider komponent render () return (  Oppdag din film Mojo!
 
 );  Eksporter standard Header;

Mens JSX gir oss mye mer fleksibilitet ved å skrive våre komponenter, husk at det ikke er egentlig HTML vi skriver, men en abstraksjon av det.

Du kan se dette i kodebiten ovenfor. Merknad i

tag vi brukte klassenavn heller enn klasse å indikere hvor vi vil erklære en CSS-klasse? Dette skyldes at alle JSX er kompilert ned til rent JavaScript, og klasse er et reservert ord i ES6 JavaScript.

La oss også tilpasse topptekstene. Åpen App.css og rediger .App-header CSS klasse å være:

.App-header bakgrunnsfarge: steelblue; høyde: 70px; polstring: 20px; farge: hvit;

Dette oppdaterer bakgrunnsfargen på toppteksten og reduserer høyden.

Komponent rekvisitter

Så langt, vår

komponenten er statisk. Det vil si, det viser fast innhold som aldri endres. Men komponenter kan gjøres for å være dynamiske og skjerminnholdet passert inn i dem, via komponent rekvisitter. Dette gjør komponentene plutselig mye mer nyttige ettersom de blir generiske og gjenbrukbare.

Tenk på komponent rekvisitter som ligner på HTML-koder. For eksempel a

tag kan ha attributter for id, klasse, stil og så videre gjør det mulig for oss å tildele unike verdier for det bestemte

element.

Vi kan gjøre det samme for React-komponenter. Si at vi ikke ville ha vår topptekst til å skrive ut den faste teksten 'Discover Your Movie Mojo!' hele tiden. Ville det ikke vært bedre hvis vår overskrift kunne vise noen tekst?

I motsetning til HTML-attributter kan vi nevne våre komponent rekvisitter uansett hva vi liker. Innsiden App.js, oppdater

tag for å være:

Oppdater deretter

komponent for å bruke tekst rekvisitt.

  This.props.text

Dette resulterer i vår overskrift som viser hvilken tekst som legges til tekst prop i App.js.

La oss se nærmere på hvordan vi refererte til tekst prop innsiden Header.js ved hjelp av:

 This.props.text

De krøllete båndene forteller bare JSX at vi har noen JavaScript vi vil evaluere. Dette skiller det fra tekst. Hvis vi ikke brukte noen krøllete braces, strengen bokstavelig this.props.text ville bli utgitt, noe som ikke er det vi vil ha.

De dette søkeord refererer til Overskrift komponent klasse, og Rekvisitter er et objekt som inneholder alle verdiene som er sendt inn fra

. I vårt tilfelle, Rekvisitter objekt inneholder bare en oppføring, men du kan legge til så mange som du liker i praksis.

Våre

komponenten er nå mye mer generisk og inneholder ikke en hardkodd streng. Dette er en god praksis når du skriver React-komponenter. Jo mer generisk du lager dem, jo mer gjenbrukbare er de.

Dette er gode nyheter når du utvikler fremtidige React apps som du kan gjenbruke komponenter fra tidligere prosjekter, slik at du ikke trenger å skrive alt fra grunnen.

Vi brukte rekvisitter over for å passere en fast streng i

komponent, men rekvisitter kan også passere variabler, funksjonsreferanser og tilstand til komponenter.

For å sende en variabel via rekvisitter, kan vi gjøre noe slikt, hvor headerText er en variabel:

Inspisere reaktorkomponenter

Det er et veldig nyttig verktøy som er tilgjengelig for Chrome-nettleseren, som lar deg inspisere informasjon om React-appen din.

Standardutviklerverktøyene lar deg bare vise vanlige HTML-elementer, men med utvidelsen av Utviklerverktøyet for React, kan du navigere gjennom alle React-komponentene i appen din.

Når det er installert, åpner du nettleserinspektørverktøyene, og klikker på den nylig tilgjengelige Reagere fane. Legg merke til at i stedet for HTML-elementer ser du hierarkiet av React-komponenter i appen din. Klikk på komponent for å velge den.

Når valgt, vises informasjon om en komponent i vinduet til høyre. De komponenten har ingen rekvisitter og så er vinduet tomt. Men hvis du velger

komponent inne så ser du "tekst" -posten vi passerte inn.

React-utviklerverktøyene er svært nyttige for feilsøking, spesielt når du kommer på å utvikle mer komplekse React-apper, så det er vel verdt å bli vant til å bruke dem på enklere apper.

Du kan også bruke React-utviklerverktøyene til å inspisere søknadstilstanden din, som vi kommer inn i neste opplæring.

Konklusjon

I denne opplæringen lærte du hvordan du kan dele appen din i separate komponenter for å gjøre det mer modulært. Komponent rekvisitter gjør det mulig å sende inn verdier til individuelle komponenter, som ligner på hvordan du legger til attributter til HTML-elementer.

Vi så også hvordan du kan utnytte nye nettleserinspeksjonsverktøy for å undersøke komponenter og rekvisitter.

I del 3 legger vi til status i vår app for å hjelpe oss med å administrere dataene våre mer effektivt.

Kode

React Crash Course for Beginners, del 3

React Crash Course for nybegynnere, del 1