Sådan konfigureres et React-program fra bunden i 36 lette trin.

Foto af Cesar Carlevarino Aragon på Unsplash
* optag skrabe * "Hej, mit navn er $ {brugernavn}, og du spekulerer sikkert på, hvordan jeg endte her ..."

Min gæt er følgende. Du fik en million idé til startup eller pludselig entusiasme til at prøve det nye spændende React-koncept og var nødvendigt for hurtigt at spin op en app, og du havde en af ​​to grunde til at søge efter denne guide:

  • Måske var du for hård på diskpladsen til at have create-react-app installeret hver kendt npm-pakke og en køkkenvask til dit pæne lille projekt.
  • Måske på den anden side lovede tanken om at skulle konfigurere din build på egen hånd sådan tedium og kedsomhed, at du var ved at droppe det helt og gå stirre i spejlet og se dit hår vokse. I det mindste ville det være sjovere.

Jeg har været der selv. Derfor besluttede jeg at blinke en guide til at oprette en moderne og kvikk React-app. Der vil være ganske mange enkle trin tilsat memes og gifs.

Fuld offentliggørelse: Jeg gør dette for at lære mere ved at dele det, jeg allerede ved. Så hvis du ved, at noget, jeg har gjort her, er død forkert eller kan gøres bedre, så fortæl mig det i kommentarafsnittet, og jeg vil opdatere i overensstemmelse hermed ... eller rapportere dig for misbrug

Denne vejledning antager:

  • Du har en computer
  • Den computer, der har node og npm installeret
  • Du har kendskab til terminalkommandoer og JavaScript

Spænd sikkerhedsselen!

TL; DR:

  1. Klon denne repo: https://github.com/timmaloshtan/react-just-add-water
  2. npm i; npm start
  3. Udvikl din reaktionsapp

1. Bust din foretrukne CLI, og skriv følgende kommandoer:

mkdir dit-projekt
cd dit-projekt
tryk på index.html

BEMÆRK: mkdir opretter et bibliotek med et givet navn, cd trin ind i det, berøring opretter en fil med et givet navn. Har du lyst til en hacker allerede?

2. Åbn din foretrukne kodeditor, og udfyld den indeks.html. Du kan gemme en masse kalorier ved at gøre det, hvis du bruger uddrag i VS-kode. Bare skriv! og slå "Tab" -knappen:

Spar dat energi!

3. Opret den første JavaScript-fil. Kør disse kommandoer i din terminal:

mkdir src
tryk på src / index.js

BEMÆRK: Hvis du antager, at du er i projektets hovedmappe, opretter dette src undermappe.

4. Skriv noget JavaScript der:

5. Hvis du vil køre vores nyligt oprettede Javascript på vores side, skal du tilføje et scriptelement mellem kroppens tags på din side:

På dette stadium ser din projektstruktur sådan ud:

din-projekt
| -src
  | -index.js
| -index.html

og gør dette:

Nu vil du ikke sidde fast ved at skrive al din JavaScript i en fil eller tilføje scripts til hver .js-fil. Så du er nødt til at samle det sammen. Lad os gå fra enkel markering og scripts til at installere din modulbundter og konfigurere den.

6. Initialiser npm-projekt ved at køre denne kommando og følge instruktionerne:

npm init

BEMÆRK: Den vil have oprettet package.json-fil til dig for at beskrive dit projekt og beholde listen over dets afhængigheder.

7. Opret .npmrc-fil og konfigurer den på en måde, som dine installationer kun genererer package-lock.json, når du beder den om at gøre det:

berør .npmrc

BEMÆRK: package-lock.json sikrer, at du installerer de samme versioner af dine afhængigheder hver gang for konsistens.

BEMÆRK: Hvis du følger med, vil du bemærke, at der oprettes en masse filer, der slutter med rc. Normalt konfigurerer de deres tilsvarende værktøjer: .babelrc, .eslintrc osv.

8. Installer webpack lokalt ved at køre:

npm i -D webpack

BEMÆRK: -D-flag gemmer det i dit projekts afhængighed

Hvis du prøver at køre det nu ved at indtaste:

node_modules / .bin / webpack

får du en anmeldelse:

9. Bliv enig, og lad dem gøre deres ting.

10. Til sidst bliver du træt af at skrive node_moduler / .bin / ... hver gang. Gør det lidt mere brugbart ved at tilføje npm-scripts i din package.json. Opdater scripts egenskab i overensstemmelse hermed:

Når du først har konfigureret din build, vil du være i stand til at udløse den ved at køre:

npm run build

11. Opret den frygtede webpack.config.js:

tryk på webpack.config.js

BEMÆRK: Denne fil eksporterer en konfiguration, som webpack bruger til at bygge dit bundt.

12. Fortæl det, hvor du skal indtaste din app for at begynde at opbygge en afhængighedsgraf, og hvor du kan placere det resulterende bundt:

13. Det er også praktisk at kommandere webpack til at generere html-fil i dit bundt enten fra standardskabelonen eller den, du leverer. Vi bruger html-webpack-plugin til det:

npm i -D html-webpack-plugin

14. Konfigurer den onde dreng:

Nu griber det dit index.html, tilslutter det bundt, du har oprettet til det, og udsender en fil med samme navn i vores build-mappe.

15. Da det genererede bundt indsættes automatisk, kan du slippe denne linje fra index.html:

Lær mere om dette plugin her.

BEMÆRK: Helt op til her forsøgte jeg at bryde build-processen ved at introducere moderne JS-funktioner som pilefunktioner og ES6-import i min kode. Men det ville ikke mislykkes. Viser sig, at webpack ikke som standard kræver en konfigurationsfil fra version 4. Men vi vil stadig tilføje en transpiler bare til læringsformål. Du lever, og du lærer!

Webpack bruger læssere til at omdanne filer fra noget til noget andet. Du skal indstille regler for dette med en testejendom, der anvender et regelmæssigt udtryk til et filnavn og bruge egenskab, der specificerer rækkefølgen af ​​indlæser, der skal anvendes.

16. Lad os installere babel-loader og relaterede pakker for at omdanne dine pilefunktioner, import, async / afventer, ødelægge osv. Til forhistorisk gobbledygook, som gamle browsere forstår.

npm i -D babel-loader @ babel / core @ babel / cli @ babel / runtime @ babel / plugin-forslag-klasse-egenskaber @ babel / preset-env @ babel / plugin-transform-runtime

17. Tilbage til webpack.config.js vi går:

18. Opret .babelrc-fil, og fortæl babel-loader, hvad du skal gøre med alle disse biblioteker:

berør .babelrc

Hvis du prøver at køre en bundtningsproces nu, vil du se en advarsel som denne:

Sagen er, at webpakke bruger en masse optimeringer afhængigt af det miljø, du arbejder i. Der er masser af standardindstillinger til både udviklings- og produktionstilstande. Med henblik på denne vejledning sørger vi for, at webpacken ved, hvilket miljø den arbejder i øjeblikket og opsætter dine dev-værktøjer i overensstemmelse hermed.

Det pågældende dev-værktøj er kildekort. Hvis du støder på en fejl i en minificeret kode uden dem, er du stort set færdig. Her er optagelser af dig, der finder ud af, hvad der foregår, når al din applikation er squished i en fil med et bogstavvariabelt navn og intet hvidafstand eller formatering:

Kildekort på den anden side giver dig kompartmentaliseret, enten inline eller ved filer, repræsentation af din kodebase for nem debugging.

19. Webpack leveres med en dedikeret udviklingsserver. Installer det ved at køre:

npm i -D webpack-dev-server

20. Føj devServer-egenskab til dit konfigurationsobjekt for at specificere serveropførsel:

21. Føj et script til package.json for at køre din udviklingsserver:

Nu med bare en enkel:

npm start

får du udviklingsserver med live genindlæsning, der kører på http: // localhost: 8080 /.

Pæn, hej?

22. Hvordan lader du webpack være opmærksom på værdien af ​​env? Enkel. Skift bare module.exports fra et objekt til en funktion, der tager env som et argument og returnerer et konfigurationsobjekt. Lad os se værdien af ​​devtool-egenskaber baseret på den:

Det er tid til at tage en lille pust i vejret for en opgørelse.

Dit projekttræ ser sådan ud nu:

din-projekt
| -node_modules
| -src
  | -index.js
| -.babelrc
| -.npmrc
| -index.html
| -package.json
| -webpack.config.js

Du kan skrive din kode ved hjælp af moderne JavaScript-funktioner, kompilere den til et bundt med kildekort for nem debugging og servere den med live reloads. Hvis du nu er glad for at bare tænke på JavaScript-browseren lokalt, skal du slå dig ud og springe resten af ​​guiden over.

Hvis din mor dog ikke rejste nogen quitter, lad os reagere på dette.

23. Installer react and react-dom:

npm i -S reagerer reaktionsdom

24. Føj en monteringsnode til din HTML-skabelon:

BEMÆRK: Den id kan være hvad du end vil. "App" -værdi er vilkårlig.

25. Rediger src / index.js for at gøre brug af React framework:

babel er meget forvirret lige nu med dig ved hjælp af at HTML-syntaks er .js-fil.

Din app er alle vokset op nu, og det er tid til at uddanne den om JSX. Det er bedre, hvis det lærer det fra dig end på gaderne.

26. Installer den tilsvarende babelforudindstilling:

npm i -D @ babel / preset-react

27. Føj det til .babelrc:

Og vi har allerede tilføjet en regel for filer med .jsx-udvidelse til webpack.config.js

28. Det er klart, at visuel komponent er vigtig, og vi vil sørge for at style vores app. Og der er også en kunstner i hver eneste af os ...

npm i -D node-sass css-loader sass-loader stil-loader

29. Tilføj en regel for .scss-moduler i din webpack.config.js:

BEMÆRK: Sørg for at bevare rækkefølgen af ​​læssere. Det er faktisk inverteret: først sass-loader indlæser Sass / SCSS-fil og kompilerer den til CSS, derefter løser css-loader importen, og til sidst tilføjer style-loader CSS til DOM ved at injicere et