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

I den här tutorialserien dyker vi direkt in i React, då vi bygger en fullt fungerande app för att visa ett galleri med filmer.

Att lära dig hur man bygger en app från början är ett utmärkt tillfälle att träna med alla viktiga funktioner i React, samtidigt som du planerar att utveckla dina utvecklingsfärdigheter. Alla rekommenderade metoder och bästa praxis följs, vilket är viktigt för att skapa moderna React-appar.

Vi sätter upp en helt ny React app med hjälp av skapa reagera-app verktyg, utvecklat av Facebook, samt att täcka följande Reaktemner i detalj:

• Komponenter 
• JSX
• Rekvisita
• stat
• Strukturera din app korrekt
• Använda ES6-funktioner för modern apputveckling

Vad vi ska bygga

För att göra React-utveckling mer roligt kommer vi att bygga en fullt fungerande app, snarare än att presentera generiska koduttryck när nya aspekter av React är täckta.

Tillsammans bygger vi "Movie Mojo", en app för att visa ett galleri med bra filmer. När appen laddas upp laddar appen några filmer på sidbelastningen och laddar sedan in mer när en knapp klickas. Slutligen kan du skriva in dina egna filmtitlar via en anpassad blankett som vid inlämning dynamiskt sätter in en ny film i galleriet.

förutsättningar

Det här är en handledning på mellannivå och du kommer därför att ha stor nytta om du har förkunskaper om följande ämnen:

• ES6-funktioner som pilfunktioner, klasser och moduler.
• Vet vad React-komponenter, rekvisita och tillstånd är.
• Vissa erfarenheter använder Node.js och NPM.
• Minst en grundläggande nivå av JavaScript-färdighet.

De flesta av dessa beskrivs i detalj när vi går, men jag rekommenderar att du borstar på några speciella områden efter behov.

Låt oss komma igång

Vi ska använda skapa reagera-app verktyg för att ställa in vår React app. Det är extremt lätt att använda och låter oss fokusera på att koda vår app direkt, utan att behöva navigera genom en komplicerad installationsprocess.

Att använda skapa reagera-app, du måste ha Node.js och npm installerad. Du kan kontrollera om de båda är tillgängliga genom att skriva följande i ett kommandoradsfönster:

nod -v

Och då:

npm -v

Om de är båda installerade så ser du det aktuella versionsnumret för varje.

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

Om du behöver installera eller uppdatera Node.js och npm då är det enklaste sättet att ladda ner Node.js från den officiella hemsidan. Node.js är buntad med npm så du behöver inte utföra en separat installation.

Att installera skapa reagera-app globalt, skriv detta till något kommandoradsfönster:

npm installera-g skapa-reagera-app

Vi kan nu gå vidare och använda skapa reagera-app att ställa in vår nya React app. Det skapar också en överordnad mapp för att innehålla våra projektfiler. Öppna ett kommandoradsfönster och navigera till mappen du vill ha din app (t.ex. / skrivbord), och skriv in följande:

skapa-reagera-app movie-mojo

Det tar en minut eller så att slutföra, men när det gör så borde du se ett meddelande som liknar detta:

Framgång! Skapat film-mojo på / Användare / davidgwyer / Desktop / movie-mojo I den katalogen kan du köra flera kommandon: garnstart Startar utvecklingsservern. garn bygger Buntar appen till statiska filer för produktion. garntest Startar testlöparen. utmatning av garn Ta bort det här verktyget och kopior bygga beroenden, konfigurationsfiler och skript i appkatalogen. Om du gör det kan du inte gå tillbaka! Vi föreslår att du börjar med att skriva: cd movie-mojo garn starta Happy hacking!

En ny movie-mojo mappen kommer att ha skapats med följande filstruktur:

De src mappen är där du redigerar dina projektfiler, och när du kommer att distribuera din app kommer de att buntas och läggas till i offentlig mapp, redo för distribution.

För att visa provappen i din webbläsare, låt oss utnyttja miniserveren som ingår med skapa reagera-app. Vi måste vara inuti projektmappen som vi just skapat, så i kommandoradsfönstret skriver du:

cd movie-mojo

Och då:

npm start

Detta enkla kommando gör tre huvud saker. Det kommer:

• Kompilera vårt exempel på React app.
• Öppna ett nytt webbläsarfönster och visa vår app.
• Övervaka ändringar i projektfiler.

När du har sammanställt ser du följande utdata:

Sammansatt framgångsrikt! Nu kan du se film-mojo i webbläsaren. Lokal: http: // localhost: 3000 / På ditt nätverk: http://192.168.0.15:3000/ Notera att utvecklingsbyggnaden inte är optimerad. För att skapa en produktionsbyggnad, använd garnbyggnad.

Och här är appen som körs i webbläsaren.

När några ändringar görs i din app, kommer den automatiskt att omkompileras och laddas om i webbläsarfönstret. Detta är en riktigt cool egenskap av skapa reagera-app och sparar mycket tid under utveckling!

Det låter dig också fokusera på att koda din app utan att bli distraherad genom att manuellt kompilera och kontinuerligt uppdatera webbläsarfönstret för att se de senaste ändringarna.

Kanske är det bästa arbetsflödet, om du har tillgängligt skärmutrymme, att få webbläsaren och textredigeraren öppen sida vid sida. På det sättet, när du ändrar en av dina projektfiler, ser du ändringarna som nästan visas direkt i webbläsarfönstret.

Låt oss försöka göra en förändring till vårt provprojekt.

Inuti src mapp, öppen App.js i din textredigerare. Försök ändra linjen:

För att komma igång, redigera src / App.js och spara för att ladda om.

till:

Välkommen till "Movie Mojo" React app!

Så snart du lagrar ändringarna, komprimeras React-appen automatiskt och webbläsarfönstret uppdateras. Om du har omordnat din arbetsytan som föreslagits ovan ser du hur ögonblickligt detta är.

Strukturera vår app

Låt oss konfigurera strukturen i vår app som vi ska använda för resten av denna handledning.

De skapa reagera-app Verktyget gör ett bra jobb med ställning av vår app, men vi har fortfarande flexibiliteten att anpassa den till våra behov.

För det första, låt oss bli av med de filer som vi inte längre behöver från vår src mapp. Vi behöver inte servicearbetare i vår app, så ta bort registerServiceWorker.js fil. Detta hänvisas till i index.js, så öppna den i en redigerare och ta bort alla referenser så det ser ut så här:

Import Reakt från "reagera"; Importera ReactDOM från 'react-dom'; importera "./index.css"; importera app från './App'; ReactDOM.render (, document.getElementById ( 'root'));

Därefter raderas logo.svg fil och redigera App.js att ta bort referenser till den. Din uppdaterade fil ska nu se ut så här:

Importreakt, Komponent från "reagera"; importera "./App.css"; klass App utökar komponent render () return ( 
 
 
Välkommen till React
 
 
 Välkommen till "Movie Mojo" React app! 
 
 );  exportera standard App;

Vi kan också bli av med App.test.js fil. Detta kommer att lämna oss med följande filer i src:

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

Vi skapar flera komponenter, så låt oss skapa en egen mapp för att lagra dem alla in. Inside src, skapa en ny komponenter mapp och lägg till App.js filen till den. Vår app kommer inte att kompilera korrekt tills vi uppdaterar ett par referenser.

I index.js, uppdatera sökvägen för att importera  komponent:

importera app från './components/App';

Och i App.js, uppdatera sökvägen till App.css:

importera "... /App.css";

Spara dina ändringar och se till att din app omkompileras framgångsrikt.

Vi är nu nästan redo att börja koda vår "Movie Mojo" -app. För det första, låt oss bli bekanta med hur vår app görs.

Ta en titt på index.js. Det här är filen som faktiskt gör vår app till DOM. Det gör det via ReactDom.render () metod, som tar i två argument. Det första argumentet är den komponent vi vill göra. I vårt fall är det här  komponent, som är den översta nivån (och för närvarande endast) i vår app.

Det andra argumentet anger DOM-målelementet som vi vill montera vår React app till. Som standard skapar "create-reager-app" det här elementet automatiskt. Om du tittar inuti offentlig mapp, det finns en index.html som innehåller en