Sette opp et reaktormiljø, del 3

Legg merke til hvordan i komponent vi kan lage så mange elementer som vi liker ved å legge til flere samtaler til React.createElement (). Også rekvisitter sendes inn i barnekomponenter via a Rekvisitter JavaScript-objekt, som deretter kan nås i komponenter via funksjonsparameteren Rekvisitter.

Åpen index.html i en nettleser for å se React-utgangen.

Jeg vil ikke gå inn i flere detaljer her om React.createElement (), og andre ikke-JSX-emner, da flertallet av React-brukere velger å skrive sine komponenter ved hjelp av JSX. Vi bruker JSX for våre React-komponenter for resten av denne opplæringsserien.

Det er klart at mangelen på verktøy som Babel begrenser hvor lett det er å skrive React-kode helt fra grunnen av. Det er mange andre verktøy vi kan dra nytte av, for eksempel en pakker som lager en enkelt JavaScript-fil fra alle de nødvendige React-biblioteker pluss vår appkode. Vi finner en bedre tilnærming i neste avsnitt som er like lett å sette opp.

Opprett React App

For å løse problemet med komplekse manuelle React-oppsett, introduserte Facebook create-react-app, som er en brukervennlig måte å komme i gang med å utvikle med React. Den gir deg full oppsett, men krever ingen manuell konfigurasjon i det hele tatt.

La oss gå videre og installere create-react-app. Skriv inn følgende kode i et kommandolinjevindu.

npm installere-g create-react-app

Dette vil installere create-react-app globalt, slik at du kan få tilgang til det fra hvilken som helst katalog.

Du trenger npm installert for å kjøre denne kommandoen, og Node.js for å kjøre create-react-app. Siden npm kommer med Node.js, laster du ned og installerer den nyeste versjonen av Node.js fra den offisielle nettsiden.

Vi lager nå en ny React-app som heter my-første-komponenter. Legg merke til at create-react-app oppretter den inneholdende mappen for appen din automatisk, slik at du bare må sørge for at du er i katalogen du vil ha appmappen din opprettet i.

Kjør disse kommandoene for å lage din app og kjør startskriptet.

lage-reager-app min første komponenter cd min-første komponenter / npm start

Det kan ta et minutt eller to for create-react-app for å fullføre installasjonen av alt. Når du er ferdig, skriv inn npm start kommandoen, og et nytt nettleservindu åpnes, og etter noen sekunder vises React-appen din.

Den fine tingen om create-react-app er at den inneholder en mini webserver og også ser filene i appen din for endringer. Når en endring er gjort, blir appen din gjenopprettet, og nettleservinduet oppdateres automatisk for å vise den oppdaterte appen din.

Under den automatiske oppsettprosessen genererer create-react-app flere filer i tillegg til følgende tre mapper:

• node_modules
• offentlig
• src

For å få en følelse av hvordan vi oppretter komponenter og kobler dem sammen i en generert app opprett-reagerer-app, oppretter vi de samme komponentene som vi har jobbet med så langt.

Standardutgangen til appen antyder at vi redigerer App.js Som utgangspunkt skal du åpne denne filen og fjerne importanropene for logoen og CSS-filene, ettersom vi ikke trenger disse. Vi kan også forenkle komponent, og legg til i våre to barns komponenter fra før.

Din App.js filen skal nå se slik ut:

Import React, Component fra 'reagere'; klassen App utvider komponent render () return ( 
 
Mine første reaktorkomponenter!
   
 ) klasse MyFirstComponent utvider komponent render () return ( 
this.props.number: Hei fra React!
 ) klasse MySecondComponent utvider komponent render () return ( 
this.props.number: Min andre reaksjonskomponent.
 ) eksporter standard app;

Lagre endringene dine og opprett-reagerer-appen oppdaterer automatisk appen din i nettleseren. Dette gir samme resultat som før. (Legg merke til at den er lastet i nettleseren via den lokale webserveren denne gangen, skjønt.)

La oss imidlertid gjøre dette mer modulært, for å være i tråd med moderne beste praksis for å lage React apps. Lag to nye filer inni src mappen heter MyFirstComponent.js og MySecondComponent.js.

Innsiden MyFirstComponent.js, legg til følgende kode:

Import React, Component fra 'reagere'; klasse MyFirstComponent utvider komponent render () return ( 
this.props.number: Hei fra React!
 ) eksporter standard MyFirstComponent;

Og inni MySecondComponent.js, legg til lignende kode:

Import React, Component fra 'reagere'; klasse MySecondComponent utvider komponent render () return ( 
this.props.number: Min andre reaksjonskomponent.
 ) eksporter standard MySecondComponent;

Til slutt må vi oppdatere App.js for å importere begge barnekomponenter som de nå er plassert i separate filer:

Import React, Component fra 'reagere'; importer MyFirstComponent fra './MyFirstComponent'; importer MySecondComponent fra '. /MySecondComponent'; klassen App utvider komponent render () return ( 
 
Mine første reaktorkomponenter!
   
 ) eksporter standard app;

Denne tilnærmingen til å strukturere React-appen er mye mer modulær og bærbar. Det muliggjør også enklere feilsøking, da hver komponent er selvstendig inne i sin egen modul.

Konklusjon

I denne opplæringen har vi dekket to metoder for å sette opp React lokalt: den manuelle tilnærmingen, og bruke verktøyet Create-React-app fra Facebook.

Opprett en React-app manuelt fra begynnelsen og legg inn skriptavhengighetene direkte i index.html filen er ganske ineffektiv. Når appskalaene dine, og som forskjellige versjoner av skriptene dine blir utgitt, blir det enkelt å oppdatere skriptene manuelt. Dessuten kan vi ikke bruke ES6-funksjoner, eller skrive våre komponenter i JSX!

Ved å bruke create-react-app er derimot en veldig jevn prosess. Den er installert og initialisert med et par kommandoer. Når du kjører, oppretter-reager-app gjenoppretter appen din og oppdaterer nettleservinduet hver gang du redigerer eventuelle prosjektfiler. Dette er en veldig fin arbeidsflyt når det gjøres mange små endringer, da det bidrar til å øke app-utviklingen.

I neste veiledning lager vi en React-app fra begynnelsen som bruker Webpack og Babel til å pakke og behandle vår app i en enkelt JavaScript-fil. I motsetning til create-react-app, hvor alt er gjort for deg, konfigurerer vi alle oppsettfilene manuelt, og vi diskuterer hvorfor du vil velge denne tilnærmingen.