En komplet vejledning med kedelplade - fra nul til helt

Når vi begynder at lære React, skal vi for at lave vores projekter lave en kedelplade fra bunden eller bruge nogle leveret af samfundet. Næsten alle tidspunkter er det create-react-appen, som vi bruger til at oprette en app uden build-konfiguration. Eller vi laver bare vores egen enkle kedelplade fra bunden.

Herfra kommer det i tankerne: hvorfor ikke lave en kedelplade med alle afhængigheder, som jeg altid bruger, og lade den være klar? Samfundet tænkte også på den måde, så nu har vi flere samfundsoprettede kedelplader. Nogle er mere komplekse end andre, men de har altid det samme mål at spare den maksimale tid.

Denne artikel vil lære dig, hvordan du kan opbygge din egen kedelplade fra bunden med de vigtigste afhængigheder, der bruges i React-samfundet i dag. Vi bruger nogle af de moderne funktioner, der er mest almindelige i disse dage, og derfra kan du tilpasse det, som du vil.

Kedelpladen oprettet af denne artikel vil være tilgængelig her!

Kom godt i gang

Først og fremmest vil vi oprette en mappe til at starte vores kedelplade. Du kan navngive det, hvad du vil, jeg vil navngive min reaktionsbolt.

Åbn din terminal, og opret den sådan:

mkdir reaktionsbolt

Gå nu til din oprettede mappe, og skriv følgende kommando:

npm start -y

NPM opretter en package.json-fil til dig, og alle de afhængigheder, du installerede og dine kommandoer, vil være der.

Nu skal vi oprette den grundlæggende mappestruktur til vores kedelplade. Det bliver sådan i øjeblikket:

reagere-bolt
    | --config
    | --src
    | --tests

Webpack

Webpack er den mest berømte modulbundter til JavaScript-applikationer i dag. Grundlæggende bundter det al din kode og genererer en eller flere bundter. Du kan lære mere om det her.

I denne kedelplade bruger vi den, så installer alle disse afhængigheder:

npm installation - gem-dev webpack webpack-cli webpack-dev-server webpack-fletning html-webpack-plugin ren-webpack-plugin img-loader url-loader fil-loader

Nu i vores konfigurationsmappe vil vi oprette en anden mappe kaldet webpack, derefter oprette 5 filer i den webpack-mappe.

Opret en fil kaldet paths.js. Inde i denne fil bliver målmappen for alle dine outputfiler.

Inde i den, læg al denne kode:

Opret nu en anden fil kaldet regler.js, og anbring følgende kode der:

Derefter opretter vi 3 filer til:

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

Grundlæggende har vi i vores webpack.common.babel.js-fil konfigureret vores indgangs- og outputkonfiguration og inkluderet samt de nødvendige plugins. I filen webpack.dev.babel.js har vi indstillet tilstanden til udvikling. Og i vores webpack.prod.babel.js-fil har vi indstillet tilstanden til produktion.

Efter dette i vores rodmappe vil vi oprette den sidste webpack-fil, der hedder webpack.config.js, og lægge følgende kode:

Vores webpack-config er klar, så nu arbejder vi på andre dele af kedelpladen med Babel, ESLint, Prettier osv.

Babel

Jeg tror, ​​at næsten alle, der arbejder med React, sandsynligvis har hørt om Babel, og hvordan denne enkle transpiler hjælper vores liv. Hvis du ikke ved, hvad det er, Babel er det dybest set en transpiler, der konverterer din JavaScript-kode til almindelig gammel ES5 JavaScript, der kan køre i enhver browser.

Vi vil bruge en masse Babel-plugins, så i vores rodmappe skal du installere:

npm installation - gemme-dev @ babel / kerne @ babe / cli @ babel / node @ babel / plugin-forslag-klasse-egenskaber @ babel / plugin-forslag-objekt-resten-spredning @ babel / plugin-syntax-dynamisk- import @ babel / plugin-syntax-import-meta @ babel / plugin-transform-async-til-generator @ babel / plugin-transform-runtime @ babel / preset-env @ babel / preset-react @ babel / register @ babel / runtime babel-eslint babel-jest babel-loader babel-core@7.0.0-bridge.0

Efter dette opretter vi en fil i vores rodmappe kaldet .babelrc, og inde i den fil, vil vi sætte følgende kode:

Nu er vores projekt udarbejdet af Babel, og vi kan bruge den næste generations JavaScript-syntaks uden problemer.

ESLint

Det mest anvendte værktøj til fnugningsprojekter i dag er ESLint. Det er virkelig nyttigt at finde visse klasser af bugs, såsom dem, der er relateret til variabelt omfang, tildeling til ikke-oplyste variabler osv.

Først skal du installere følgende afhængigheder:

npm installation - gem-dev eslint eslint-config-airbnb eslint-config-prettier eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-pænere eslint-plugin-react

Opret derefter en fil, der hedder .eslintrc, i vores rodmappe og anbring følgende kode der:

Prettier

Prettier er dybest set en kodeformater. Den analyserer din kode og udskriver den igen med sine egne regler, der tager højde for den maksimale linjelængde og indpakker kode, når det er nødvendigt.

Du skal bare installere det:

npm installation - gemme-dev pænere

Og i vores rodmappe skal du oprette en fil, der hedder .prettierrc, og læg følgende kode der:

Reagere

React er et open source JavaScript-applikationsbibliotek til at oprette brugergrænseflader. Det blev udviklet af Facebook og har et enormt samfund bag sig. Hvis du læser denne artikel, antager jeg, at du allerede kender React, men hvis du vil lære mere om den, kan du læse her.

Vi vil installere følgende afhængigheder:

npm installation - gem reagerer reaktions-dom cross-env

Og inde i vores src-mappe vil vi oprette en simpel HTML-filindeks.html og indsætte følgende kode:

Derefter skal vi oprette et simpelt React-projekt. Opret en index.js-fil som denne i vores src-mappe:

Inde i vores src-mappe vil vi have følgende struktur:

src
    | --actions
    | --components
    | --reducers
    | --reducers
    | --store

Opret en fil kaldet App.js i komponentmappen, og indsæt følgende kode:

Redux

Redux gør det nemt at administrere status for din applikation. En anden måde at se på dette er, at det hjælper dig med at administrere de data, du viser, og hvordan du reagerer på brugerhandlinger. I disse dage foretrækker mange mennesker andre muligheder som MobX eller bare selve setState, men jeg vil holde mig til Redux til denne kedelplade.

Først skal vi installere nogle afhængigheder:

npm installation - gem redux reaktion-redux redux-thunk

Derefter skal vi oprette vores Redux-butik og sætte en tilstand der. Opret en index.js-fil i vores butikmappe og anbring følgende kode der:

Opret nu en index.js i vores reduceringsmappe og sæt følgende kode:

Til sidst går vi til vores index.js i vores src-mappe og indpakker koden med og passerer vores butik som rekvisitter for at gøre den tilgængelig for vores applikation.

Det bliver sådan her:

Helt færdig. Vores Redux-butik er konfigureret og klar til kørsel.

Reacer router

React Router er standard routing-biblioteket til React. Grundlæggende holder det dit UI synkroniseret med URL'en. Vi bruger det i vores kedelplade, så installer det:

npm installation - gem reagerer-router-dom

Gå derefter til vores index.js i vores src-mappe og indpakk al koden der med .

Vores index.js i vores src-mappe det ender sådan:

Stylede komponenter

Stylede komponenter gør CSS let for alle, da det hjælper dig med at organisere dit React-projekt. Dets mål er at skrive flere små og genanvendelige komponenter. Vi bruger det, og hvis du vil lære mere om det, skal du læse her.

Først skal du installere det:

npm installation - gemme stylede komponenter

Derefter i vores App.js-fil i vores komponentmappe vil vi oprette en enkel titel ved hjælp af Stylede komponenter. Vores titel bliver sådan:

Og inde i vores fil er vi nødt til at importere stylede komponenter, så vores fil vil ende sådan:

Jest & React Testing Library

Jest er et open-source JavaScript-testbibliotek fra Facebook. Det gør det nemt at teste din ansøgning og giver os en masse information om, hvad der giver den rigtige output og hvad der ikke er. React Testing Library er en meget letvægtsløsning til test af React-komponenter. Grundlæggende er dette bibliotek en erstatning for enzym.

Hver applikation har brug for en slags test. Jeg vil ikke skrive test i denne artikel, men jeg vil vise dig, hvordan du kan konfigurere disse værktøjer til at begynde at teste dine applikationer.

Først installerer vi begge:

npm installation - gemme-dev jest-dom reager-test-bibliotek

Gå derefter til vores package.json og læg alt efter alt følgende:

Gå derefter til vores konfigurationsmappe, og indeni oprettede den en anden mappe kaldet test og inde i denne mappe skal du oprette 2 filer.

Opret først en fil kaldet jest.config.js og indsæt følgende kode:

Opret derefter en fil kaldet rtl.setup.js og indsæt følgende kode:

Helt færdig. Vores kedelplade er klar til at køre, og du kan bruge den nu.

Gå nu til vores file package.json og indsæt følgende kode:

Nu, hvis du kører kommandoen npm start og går til localhost: 8080, skulle vi se, at vores applikation fungerer fint!

Hvis du vil se min endelige kode, er kedelpladen oprettet med denne artikel tilgængelig her!

Jeg har nogle ideer til nogle funktioner, som jeg ville elske at medtage i kedelpladen, så vær venlig at bidrage!

Følg mig på Twitter!
Følg mig på GitHub!

Jeg leder efter en fjern mulighed, så hvis jeg har nogen, vil jeg gerne høre om det, så kontakt mig!