React Crash Course for nybegynnere, del 1

I denne opplæringsserien vil vi dykke rett inn i å bruke React, da vi bygger en fullt fungerende app for å vise et galleri med filmer.

Lære å bygge en app fra begynnelsen er en flott mulighet til å øve med alle de viktigste funksjonene i React, mens du planlegger å utvikle dine ferdigheter. Alle anbefalte metoder og beste praksis blir fulgt, noe som er viktig for å skape moderne React apps.

Vi skal sette opp en helt ny React-app ved hjelp av create reagere-app verktøy, utviklet av Facebook, samt dekning av følgende Reagemner i detalj:

• komponenter 
• jsx
• Rekvisitter
• Stat
• Strukturere appen din riktig
• Bruke ES6-funksjoner for moderne apputvikling

Hva vi skal bygge

For å lære om React-utvikling mer moro, skal vi bygge en fullt fungerende app, i stedet for å presentere generiske kodestykker når nye aspekter av React er dekket.

Sammen skal vi bygge "Movie Mojo", en app for å vise et galleri med gode filmer. Når appen er fullført, laster appen noen filmer på sidelast, og lastes deretter inn mer når en knapp klikkes. Til slutt vil du kunne legge inn dine egne filmtitler via et egendefinert skjema som ved innsending dynamisk vil sette inn en ny film i galleriet.

Forutsetninger

Dette er en mellomveiledning, og du vil derfor ha stor fordel hvis du har litt kunnskap om følgende emner:

• ES6-funksjoner som pilfunksjoner, klasser og moduler.
• Vet hva React-komponenter, rekvisitter og tilstand er.
• Noen erfaringer med Node.js og NPM.
• Minst et grunnleggende nivå av JavaScript-ferdighet.

De fleste av disse er dekket i detalj når vi går, men jeg anbefaler å pusse opp på bestemte områder etter behov.

La oss få satt opp

Vi skal bruke create reagere-app verktøy for å sette opp vår React-app. Det er ekstremt enkelt å bruke og vil tillate oss å fokusere på å koding vår app straks, uten å måtte navigere gjennom en komplisert oppsettprosess.

Å bruke create reagere-app, du må ha node.js og NPM installert. Du kan sjekke om de er tilgjengelige begge ved å skrive følgende i et kommandolinjevindu:

node -v

Og så:

npm -v

Hvis de begge er installert, ser du det gjeldende versjonsnummeret for hver.

MacBook-Pro: ~ davidgwyer $ node -v v6.11.1 MacBook-Pro: ~ davidgwyer $ npm -v 5.3.0 MacBook-Pro: ~ davidgwyer $

Hvis du trenger å installere eller oppdatere node.js og NPM så er den enkleste måten å laste ned node.js fra den offisielle nettsiden. node.js er buntet med NPM så du trenger ikke å utføre en separat installasjon.

Å installere create reagere-app globalt, skriv dette inn i et kommandolinjevindu:

npm installere-g create-react-app

Vi kan nå gå videre og bruke create reagere-app å stille ut vår nye React-app. Det vil også lage en toppnivå mappe for å inneholde våre prosjektfiler. Åpne et kommandolinjevindu og naviger til mappen du vil ha appen din plassert (for eksempel / skrivebord), og skriv inn følgende:

lage-reagere-app movie-mojo

Det vil ta et minutt eller så å fullføre, men når det gjøres, bør du se en melding som ligner dette:

Suksess! Laget film-mojo på / Brukere / davidgwyer / Desktop / movie-mojo I den katalogen kan du kjøre flere kommandoer: garnstart Starter utviklingsserveren. garn bygger Bunter appen til statiske filer for produksjon. garntest starter testløperen. garnutkast Fjerner dette verktøyet og kopierer avhengigheter, konfigurasjonsfiler og skript til appkatalogen. Hvis du gjør dette, kan du ikke gå tilbake! Vi foreslår at du begynner med å skrive: cd movie-mojo garn start Happy hacking!

En ny film-mojo mappen vil ha blitt opprettet med følgende filstruktur:

De src mappen er hvor du vil redigere prosjektfilene dine, og når du kommer til å distribuere appen din, blir de samlet og lagt til i offentlig mappe, klar til distribusjon.

For å vise eksempelappen i nettleseren din, la oss dra nytte av miniserveren som følger med create reagere-app. Vi må være inne i prosjektmappen vi nettopp har opprettet, så skriv inn i kommandolinjevinduet:

cd film-mojo

Og så:

npm start

Denne enkle kommandoen gjør tre hovedtyper. Det vil:

• Samle vår prøve React app.
• Åpne et nytt nettleservindu og vis vår app.
• Overvåk endringer i prosjektfiler.

Når du er samlet, ser du følgende utgang:

Kompilert med hell! Du kan nå se film-mojo i nettleseren. Lokal: http: // localhost: 3000 / På nettverket ditt: http://192.168.0.15:3000/ Merk at utviklingsbygget ikke er optimalisert. For å lage en produksjonsbygg, bruk garnbygging.

Og her er prøveappen som kjører i nettleseren.

Når noen endringer gjøres i appen din, blir den automatisk komprimert og oppdatert i nettleservinduet. Dette er en veldig kul funksjon av create reagere-app og vil spare deg mye tid under utvikling!

Den lar deg også fokusere på koding av appen din uten å bli distrahert ved å manuelt kompilere og kontinuerlig oppdatere nettleservinduet for å se de siste endringene.

Kanskje den beste arbeidsflyten, hvis du har ledig skjermplass, er å ha nettleseren og tekstredigereren åpen side ved side. På den måten, når du endrer en av prosjektfilene dine, ser du endringene som vises nesten umiddelbart i nettleservinduet.

La oss prøve å gjøre en endring i vårt utvalgsprosjekt.

Inne i src mappe, åpen App.js i teksteditoren din. Prøv å endre linjen:

For å komme i gang, rediger src / App.js og lagre for å laste på nytt.

til:

Velkommen til "Movie Mojo" React app!

Så snart du lagrer endringene, reagerer React-appen automatisk, og nettleservinduet oppdateres. Hvis du har omarrangert arbeidsområdet ditt som foreslått ovenfor, så ser du hvor øyeblikkelig dette er.

Strukturering av vår App

La oss sette opp strukturen til vår app som vi skal bruke for resten av denne opplæringen.

De create reagere-app verktøyet gjør en god jobb med stillasett vår app, men vi har fortsatt fleksibiliteten til å tilpasse det til våre behov.

For det første, la oss kvitte oss med filene vi ikke lenger trenger fra vår src mappe. Vi trenger ikke servicearbeidere i vår app, så slett registerServiceWorker.js fil. Dette refereres til i index.js, så åpne den opp i en redigerer og slett alle referanser slik at den ser slik ut:

Import Reakt fra 'reagere'; importere ReactDOM fra 'react-dom'; importer './index.css'; importer app fra './App'; ReactDOM.render (, document.getElementById ( 'root'));

Deretter slett du logo.svg fil og rediger App.js å fjerne referanser til den. Din oppdaterte fil skal nå se slik ut:

Import React, Component fra 'reagere'; importer './App.css'; klassen App utvider komponent render () return ( 
 
 
Velkommen til React
 
 
 Velkommen til "Movie Mojo" React app! 
 
 );  eksporter standard app;

Vi kan også bli kvitt App.test.js fil. Dette vil etterlate oss med følgende filer i src:

• index.js
• index.css
• App.js
• App.css

Vi lager flere komponenter, så la oss lage en dedikert mappe for å lagre dem alle i. Inside src, lage en ny komponenter mappe og legg til App.js filen til den. Vår app vil ikke kompilere riktig før vi oppdaterer et par referanser.

I index.js, Oppdater banen for å importere  komponent:

importer app fra './components/App';

Og i App.js, oppdater banen til App.css:

importere '... /App.css';

Lagre endringene dine og sørg for at appen din kompileres med hell.

Vi er nå nesten klare til å begynne å kode vår "Movie Mojo" -app. Først, men la oss bli kjent med hvordan vår app blir gjengitt.

Se på index.js. Dette er filen som faktisk gjør appen vår til DOM. Det gjør dette via ReactDom.render () metode, som tar i to argumenter. Det første argumentet er komponenten vi vil gjengi. I vårt tilfelle er dette den  komponent, som er komponenten på toppnivå (og for øyeblikket bare) i appen vår.

Det andre argumentet angir DOM målelementet vi vil montere vår React app til. Som standard oppretter "create-react-app" dette elementet automatisk. Hvis du tar en titt inne i offentlig mappe, det er en index.html som inneholder en