Share
React har tidigare varit känt för att vara svårt att komma igång med att skapa appar, eftersom du verkligen måste förstå hur man konfigurerar byggverktyg manuellt. Detta är även innan du skriver en enda rad React-kod.
Verktyget create-react-app hjälper till med det här problemet oerhört, eftersom det gör det möjligt för någon att skapa en fullständig fungerande React-app utan att behöva veta om hur man konfigurerar byggverktygen. Verkligheten är att skapa-reagera-appen kommer att vara bra för de flesta appar, speciellt om du är ny för att reagera.
Eftersom du får mer erfarenhet av React, kan du ha vissa krav på dina appar som behöver anpassad konfiguration av installationsfilerna. I det här fallet måste du kunna konfigurera React build-verktyg manuellt, eftersom skapar-reagerar app som standard döljer dessa från dig.
I den här handledningen visar jag dig hur du konfigurerar en React-app genom att manuellt konfigurera byggverktyg när vi går. Detta kommer förhoppningsvis ge dig självförtroendet att fortsätta och experimentera med mer komplexa inställningar.
Även om det kan tyckas lite skrämmande i början, kommer du att njuta av alla fördelar med att ha total kontroll över varje enskild konfigurationsinställning. Och du kan bestämma exakt vilka verktyg som ingår i din app, vilket kan variera från projekt till projekt. Detta tillvägagångssätt låter dig också enkelt integrera nya byggverktyg som de kommer med (som de ofta gör).
Är du redo att skapa din första React app helt från början? Vi gör det.
För att visa hur du skapar en React-app via manuell konfiguration av byggverktygen bygger vi samma, väldigt enkla, React-app från tidigare tutorials i den här serien.
Börja med att skapa en mapp som heter my-första-komponenter-build, och öppna sedan ett kommandoradsfönster som pekar på den här mappen.
Typ npm init att skapa en package.json fil. Den här filen innehåller all information om verktygen som används för att bygga din app och tillhörande inställningar. Godkänn alla standardinställningar och fortsätt bara att slå Stiga på (cirka tio gånger) tills det är klart.
Om du accepterade alla standardinställningar, package.json kommer att se ut så här:
"namn": "my-first-components-build", "version": "1.0.0", "beskrivning": "", "main": "index.js", "scripts" : "echo \" Fel: inget test specificerat \ "&& avsluta 1", "författare": "", "licens": "ISC"
Vi behöver nu lägga till React and ReactDOM-skript till vårt projekt. Vi gör det via npm, pakethanteraren för Node.js.
Inne i samma kommandoradskatalog, ange:
npm installera - reagera reagera dom
Detta installerar både React and ReactDom, plus eventuella beroenden som krävs av dessa två moduler. Du märker att vi nu har en ny node_modules katalog där var modulerna har lagts till.
Om du tittar på package.json fil, en ny beroenden Egenskapen har lagts till med information om nodmoduler som vi installerat.
"beroenden": "reagera": "^ 15.6.1", "reagera dom": "^ 15.6.1"
Detta hände för att vi angav --spara alternativet i vårt npm installera kommando. Detta meddelade npm att vi ville hålla reda på våra installerade projektberoende. Detta är viktigt om vi vill dela vårt projekt.
Vanligtvis, eftersom node_modules mappen är så stor, du vill inte försöka dela detta direkt. Istället delar du ditt projekt utan node_modules mapp. Då, när någon hämtar ditt projekt är allt de behöver göra typ npm installera att duplicera inställningen direkt från package.json.
Obs! I npm 5.x sparas installerade moduler automatiskt till package.json. Du behöver inte längre manuellt ange --spara alternativ.
Inuti my-första-komponenter-build mapp, skapa en ny src mapp och lägg till en index.js filen till den. Vi kommer tillbaka till det här senare när vi börjar skapa vår React-app, när vi har konfigurerat projektinställningsfilerna.
Lägg till en index.html-fil i samma mapp med följande kod:
Skapa en React App manuellt, med hjälp av byggverktyg
Vi vill kunna kompilera vår app till en enda JavaScript-fil och använda även JSX och ES6-klasser och -moduler. För att göra detta måste vi installera Webpack och Babel moduler via npm.
Låt oss installera Babel först. Skriv följande i kommandoradsfönstret:
npm installera - save-dev babel-core babel-loader babel-preset-env babel-preset-reagerar
Detta installerar alla moduler som behövs för Babel för att kompilera ES6 och JSX-kod ner till standard JavaScript.
Nu, låt oss installera Webpack, igen via kommandoraden:
npm installera - save-dev html-webpack-plugin webpack webpack-dev-server
Detta installerar alla moduler som behövs för Webpack, en lokal webbserver, och gör att vi kan styra Webpack för att skapa en dynamisk index.html fil i offentlig mapp baserad på den vi lagt till i src mapp. Vi kan också lägga till en dynamisk referens till den medföljande JavaScript-filen i HTML-filen varje gång appen är byggd.
Efter att dessa nya moduler har installerats, är din package.json filen kommer nu att se ut så här:
"beroenden": "reagera": "^ 15.6.1", "reagera dom": "^ 15.6.1", "devDependencies": "babel-core": "^ 6.25.0", "babel -laster ":" ^ 7.1.0 "," babel-preset-env ":" ^ 1.5.2 "," babel-preset-reager ":" ^ 6.24.1 "," html-webpack-plugin " ^ 2.28.0 "," webpack ":" ^ 3.0.0 "," webpack-dev-server ":" ^ 2.5.0 "
Den här gången sparas Webpack och Babel beroenden till package.json som dev beroenden.
Detta innebär att dessa speciella moduler behövs under utvecklingsfasen (dvs. byggnadsfasen) av appen. Å andra sidan krävs beroenden (som React och ReactDOM) under körtiden, så kommer det att inkluderas direkt tillsammans med vår anpassade app-kod.
För att få Webpack att bygga vår app och buntas i en enda fil måste vi konfigurera inställningar. Inne i din rotappmapp, skapa webpack.config.js, som används för att lagra Webpack-specifika bygginställningar.
Vi behöver Webpack för att göra tre saker:
Inuti webpack.config.js, Lägg till:
Accentsconagua
var-sökväg = kräver ("sökväg"); var HtmlWebpackPlugin = kräver ('html-webpack-plugin'); module.exports = entry: './src/index.js', output: sökväg: path.resolve (__ dirname, 'public'), filnamn: 'build.js', modul: rules: [test : /\.(js)$/, använd: 'babel-loader'], plugins: [ny HtmlWebpackPlugin (mall: 'src / index.html')]Oroa dig inte för mycket om den syntakt som används här; förstå bara översikten över vad som händer.
Allt vi gör är att exportera ett JavaScript-objekt med vissa egenskaper som styr hur Webpack bygger vår app. De inträde egendom anger startpunkten för vår React app, vilket är index.js. Därefter produktion egendom definierar utgångsbanan och filnamnet för den medföljande JavaScript-filen.
När det gäller själva byggprocessen vill vi att Webpack ska skicka alla JavaScript-filer via Babel-kompilatorn för att omvandla JSX / ES6 till standard JavaScript. Vi gör detta via modul fast egendom. Det anger bara ett vanligt uttryck som kör Babel-omvandlingar endast för JavaScript-filer.
För att slutföra Babel setup måste vi lägga till en post till package.json fil för att ange vilka Babel-omvandlingar vi vill utföra på våra JavaScript-filer. Öppna package.json och lägg till en babel fast egendom:
"babel": "förinställningar": ["env", "reagera"],
Detta kommer att köra två omvandlingar på varje JavaScript-fil i vårt projekt. De env transformation kommer att konvertera ES6 JavaScript till standard JavaScript som är kompatibel med alla webbläsare. Och den reagera transformation kommer att kompilera JSX-kod ner till create () funktionen samtal, vilket är helt giltigt JavaScript.
Nu tillbaka till vårt webpack.config.js fil.
Den sista egenskapen vi har är plugin-program, som innehåller alla specialoperationer vi vill utföra under byggprocessen. I vårt fall behöver vi Webpack för att skapa en index.html fil som innehåller en referens till den medföljande JavaScript-filen. Vi anger också en befintlig index.html fil (den som vi skapade tidigare) för att användas som en mall för att skapa den slutliga bunten index.html fil.
Låt oss nu lägga till en manus egendom till package.json. Förresten kan du lägga till så många skript som du vill utföra olika uppgifter. För nu vill vi bara kunna köra Webpack, så in package.json ta bort "testa" skript och ersätt det med:
"skript": "build": "webpack",,
Innan vi testar byggprocessen, låt oss lägga till en React-komponent till index.js så vi har något att göra.
Importreakt, Komponent från "reagera"; Importera ReactDOM från 'react-dom'; klass App utökar komponent render () return () ReactDOM.render (Hej världen!
, document.querySelector ('#app'));
Detta bör se väldigt bekant ut nu om du har följt med de tidigare handledningarna i denna serie.
Från kommandoraden kör:
npm kör byggnad
Efter ett tag borde du se en ny offentlig mapp skapad inuti my-första-komponenter-build, som innehåller index.html och index.js. Öppna index.html för att se resultatet av vårt testreaktprogram.
Observera att den medföljande JavaScript-filen har lagts till för oss, och testkomponenten görs till rätt DOM-element.
När du börjar göra flera ändringar i din app kommer du snart att lära dig att det är ganska tråkigt att manuellt redigera en fil, spara den, kör byggkommandot och ladda sedan om webbläsarfönstret för att se ändringarna.
Lyckligtvis kan vi använda Webpack-miniservern som vi installerade tidigare för att automatisera denna process. Lägg till ett andra skript till package.json så ser egenskapen "skript" ut så här:
"skript": "build": "webpack", "dev": "webpack-dev-server --open",
Kör nu:
npm kör dev
Efter några sekunder ser du en ny webbläsarflik som är öppen när din webapp körs. URL-adressen pekar nu på en lokal server istället för att peka på en viss lokal fil. Gör en mindre förändring till index.js i src mapp och spara. Observera att din app automatiskt uppdaterar i webbläsaren nästan omedelbart för att återspegla de nya ändringarna.
Webpack kommer nu att övervaka filerna i din app för ändringar. När någon ändring görs och sparas, kommer Webpack att omkompilera din app och automatiskt ladda om webbläsarfönstret med de nya uppdateringarna.
Obs! Webpack-servern kommer inte att bygga om din app, eftersom den lagrar ändringar i en cache, det är därför det kan uppdatera webbläsaren så snabbt. Det betyder att du inte ser uppdateringarna som återspeglas i offentlig mapp. Faktum är att du kan ta bort den här mappen helt när du använder Webpack-servern.
När du behöver bygga din app kan du helt enkelt springa npm kör byggnad att skapa offentlig mapp igen (om det behövs) och mata ut dina appfiler, redo för distribution.
För fullständighet, låt oss lägga till de två enkla komponenterna som vi har använt i tidigare handledning.
Lägg till två nya filer i den roterade projektmappen som heter MyFirstComponent.js och MySecondComponent.js till huvudappmappen. I 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 i MySecondComponent.js, Lägg till:
Importreakt, Komponent från "reagera"; klass MySecondComponent utökar komponent render () return (this.props.number: Min andra reaktionskomponent.
) exportera standard MySecondComponent;
För att använda dessa komponenter i vår app, uppdatera index.js till det följande:
Importreakt, Komponent från "reagera"; Importera ReactDOM från 'react-dom'; importera MyFirstComponent från './MyFirstComponent'; importera MySecondComponent från './MySecondComponent'; klass App utökar komponent render () return () ReactDOM.render (Mina första reaktorkomponenter!
, document.querySelector ('#app'));
Detta resulterar i samma resultat som vi har sett tidigare, förutom den här tiden genom att konfigurera React-appen 100% manuellt.
När du har gått igenom den här bruksanvisningen en gång och skapat konfigurations installationsfiler är det här den enda gången du behöver göra det helt från början. För framtida projekt kan du återanvända en eller flera av dina befintliga installationsfiler, vilket gör de efterföljande React-projektna mycket snabbare att ställa in.
Du kan till och med skapa en uppsättning av specialbyggda React-startmallar och värd dem på GitHub. Det skulle då vara ett enkelt fall att klona ett startprojekt och springa npm init för att installera de nödvändiga Node.js-modulerna.
React-projektet för denna handledning finns att ladda ner, så du kan leka med det eller använda det som en mall för nya projekt.
Klicka på Hämta bilagan länk i den högra sidofältet för att komma åt projektets .zip-fil. När du har hämtat, ta ut det och öppna ett kommandoradsfönster. Se till att du är i my-första-komponenter-build katalog.
Ange följande kommandon för att installera och kompilera React-appen.
npm installera npm kör dev
Det första kommandot laddar ner alla Node.js-moduler som behövs för projektet, vilket tar en minut eller två. Det andra kommandot kompilerar React-appen och kör mini-webbservern och visar den i webbläsaren.
Prova att göra några ändringar i din React-app. Varje gång du sparar ändringar, kommer din app att kompileras och webbläsarfönstret uppdateras automatiskt för att återspegla den nya versionen av din app.
När du vill bygga ditt projekt för distribution, kör bara följande kommando.
npm kör byggnad
Under hela handledningsserien har vi tittat på flera sätt att du kan närma dig att konfigurera React apps, var och en kräver gradvis fler installationsuppgifter framför. Men den långsiktiga fördelen är att du har mycket mer kontroll och flexibilitet över exakt hur projektet är upprättat.
När du har behärskat inställningen React tror jag att du kommer att hitta utveckla appar mycket roligt. Jag skulle gärna höra dina kommentarer. Låt mig veta vad du planerar att bygga nästa med React!
