Ställ in en reaktormiljö, del 3

Lägg märke till hur i komponent vi kan skapa så många element som vi gillar genom att lägga till fler samtal till React.createElement (). Dessutom skickas rekvisita till barnkomponenter via a rekvisita JavaScript-objekt, som sedan kan nås inuti komponenter via funktionsparametern rekvisita.

Öppna index.html i en webbläsare för att se React-utgången.

Jag kommer inte att gå in i mer detaljer här om React.createElement (), och andra icke-JSX-ämnen, eftersom majoriteten av React-användare väljer att skriva sina komponenter med JSX. Vi använder JSX för våra React-komponenter för resten av denna handledningsserie.

Tydligen begränsar bristen på verktyg som Babel hur lätt det är att skriva React-kod helt från början. Det finns många andra verktyg vi kan dra nytta av, till exempel en bunt som skapar en enda JavaScript-fil från alla nödvändiga React-bibliotek samt vår app-kod. Vi kommer att upptäcka ett bättre tillvägagångssätt i nästa avsnitt som är lika lätt att ställa in.

Skapa React App

För att lösa problemet med komplexa manuella React-inställningar, introducerade Facebook create-react-app, vilket är ett användarvänligt sätt att komma igång med att utveckla med React. Det ger dig fullständig installation men behöver ingen manuell konfiguration alls.

Låt oss fortsätta och installera create-react-app. Skriv följande kod i ett kommandoradsfönster.

npm installera-g skapa-reagera-app

Detta kommer att installera skapa-reagera-app globalt så att du kan komma åt det från vilken katalog som helst.

Du behöver npm installerat för att köra det här kommandot, och Node.js ska köra skapa-reagera-app. Eftersom npm levereras med Node.js, ladda ner och installera senast den senaste versionen av Node.js från den officiella hemsidan.

Vi skapar nu en ny React-app som heter my-första-komponenter. Observera att skapa-reagera-app skapar innehållsmappen för din app automatiskt, så du behöver bara se till att du är i katalogen du vill ha din appmapp skapad i.

Kör dessa kommandon för att skapa din app och köra startskriptet.

skapa-reagera-app min-första komponenter cd min-första komponenter / npm start

Det kan ta en minut eller två för skapa-reagera-app för att slutföra installationen av allt. När du är färdig, skriv in npm start kommando och ett nytt webbläsarfönster öppnas och efter några sekunder visas din React app.

Det fina med Create-React-app är att det innehåller en mini-webbserver och även kollar filerna i din app för ändringar. När en ändring görs blir din app ombyggd och webbläsarfönstret laddas automatiskt om att visa din uppdaterade app.

Under den automatiska installationsprocessen genererar skapa-reagera-app flera filer såväl som följande tre mappar:

• node_modules
• offentlig
• src

För att få en känsla för hur vi skapar komponenter och kopplar samman dem i en skapad app som skapar reaktion-app skapar vi samma komponenter som vi har arbetat med hittills.

Standardutgången i appen tyder på att vi redigerar App.js som utgångspunkt, så öppna den här filen och ta bort importsamtal för logotypen och CSS-filerna eftersom vi inte behöver dem. Vi kan också förenkla komponent, och lägg till i våra två barns komponenter från tidigare.

Din App.js filen ska nu se ut så här:

Importreakt, Komponent från "reagera"; klass App utökar komponent render () return ( 
 
Mina första reaktorkomponenter!
   
 ) klass MyFirstComponent utökar komponent render () return ( 
this.props.number: Hej från React!
 ) klass MySecondComponent utökar komponent render () return ( 
this.props.number: Min andra reaktionskomponent.
 ) exportera standard App;

Spara dina ändringar och skapa-reagera-app uppdaterar automatiskt din app i webbläsaren. Detta resulterar i samma resultat som tidigare. (Observera att den laddas i webbläsaren via den lokala webbservern den här gången.)

Låt oss göra detta mer modulärt för att vara i linje med moderna bästa praxis för att skapa React apps. Skapa två nya filer inuti src mapp heter MyFirstComponent.js och MySecondComponent.js.

Inuti MyFirstComponent.js, lägg till följande kod:

Importreakt, Komponent från "reagera"; klass MyFirstComponent utökar komponent render () return ( 
this.props.number: Hej från React!
 ) exportera standard MyFirstComponent;

Och inuti MySecondComponent.js, lägg till liknande kod:

Importreakt, Komponent från "reagera"; klass MySecondComponent utökar komponent render () return ( 
this.props.number: Min andra reaktionskomponent.
 ) exportera standard MySecondComponent;

Slutligen måste vi uppdatera App.js för att importera båda barnkomponenterna eftersom de nu finns i separata filer:

Importreakt, Komponent från "reagera"; importera MyFirstComponent från './MyFirstComponent'; importera MySecondComponent från './MySecondComponent'; klass App utökar komponent render () return ( 
 
Mina första reaktorkomponenter!
   
 ) exportera standard App;

Denna metod att strukturera din React-app är mycket mer modulär och bärbar. Det möjliggör också enklare felsökning eftersom varje komponent är fristående i sin egen modul.

Slutsats

I den här handledningen har vi tagit upp två metoder för att konfigurera React lokalt: den manuella inställningen och använda verktyget skapa-reagera app från Facebook.

Skapa en React-app manuellt från början och sätt in script-beroenden direkt inuti index.html filen är ganska ineffektiv. När dina appskalor släpps, och som olika versioner av dina skript släpps, blir det manuellt att uppdatera skripten utan att hantera dem. Utöver det kan vi inte använda ES6-funktioner, eller skriva våra komponenter i JSX!

Med hjälp av create-react-app är å andra sidan en mycket smidig process. Den är installerad och initialiserad med ett par kommandon. När du har kört, skapar-reagerar appen din app och uppdaterar webbläsarfönstret varje gång du redigerar några projektfiler. Det här är ett riktigt trevligt arbetsflöde när det gör många mindre förändringar, eftersom det bidrar till att påskynda apputveckling.

I nästa handledning skapar vi en React-app från början som använder Webpack och Babel för att paketera och bearbeta vår app till en enda JavaScript-fil. Till skillnad från create-react-app, där allt är gjort för dig, konfigurerar vi alla installationsfiler manuellt och vi diskuterar varför du skulle välja den här metoden.