Share
React har tidligere vært kjent for å være vanskelig å komme i gang med å lage apper, da du virkelig måtte forstå hvordan man konfigurerer byggverktøy manuelt. Dette er selv før du skriver en enkelt linje med React-kode.
Verktøyet create-react-app hjelper med dette problemet enormt, ettersom det gjør at noen kan lage en fullstendig fungerende React-app uten å kreve noen kunnskap om hvordan man konfigurerer byggverktøyene. Virkeligheten er at create-react-appen vil fungere bra for de fleste apper, spesielt hvis du er ny for å reagere.
Når du får mer erfaring med React, kan det hende du har visse krav til appene dine som trenger tilpasset konfigurasjon av oppsettfilene. I dette tilfellet trenger du å kunne sette opp React build-verktøy manuelt, da opprettingsreaktor-appen skjuler disse fra deg som standard.
I denne opplæringen viser jeg deg hvordan du konfigurerer en React-app ved å konfigurere byggverktøy manuelt når vi går. Dette vil forhåpentligvis gi deg selvtilliten til å fortsette og eksperimentere med mer komplekse oppsett.
Selv om det kan virke litt skremmende i begynnelsen, vil du nyte alle fordelene med å ha full kontroll over hver enkelt konfigurasjonsinnstilling. Og du kan bestemme hvilke verktøy som følger med i appen din, som kan variere fra prosjekt til prosjekt. Denne tilnærmingen lar deg også enkelt innlemme nye byggeverktøy som de kommer med (som de ofte gjør).
Er du klar til å lage din første React-app helt fra begynnelsen? La oss gjøre det.
For å demonstrere hvordan du konfigurerer en React-app via manuell konfigurasjon av byggverktøyene, bygger vi det samme, veldig enkelt, Reager app fra tidligere opplæringsprogrammer i denne serien.
Start med å opprette en mappe som heter my-første-komponenter-build, og åpne deretter et kommandolinjevindu som peker på denne mappen.
Type npm init å lage en package.json fil. Denne filen inneholder all informasjon om verktøyene som brukes til å bygge appen din, samt tilhørende innstillinger. Godta alle standardinnstillingene og bare fortsett å treffe Tast inn (rundt ti ganger) til fullført.
Hvis du aksepterte alle standardene, package.json vil se slik ut:
"navn": "min-først-komponenter-bygge", "versjon": "1.0.0", "beskrivelse": "", "main": "index.js", "scripts" : "echo \" Feil: ingen test oppgitt \ "&& avslutte 1", "forfatter": "", "lisens": "ISC"
Vi må nå legge til React and ReactDOM-skriptene i prosjektet vårt. Vi gjør dette via npm, pakkebehandling for Node.js.
Inne i samme kommandolinjekatalog, skriv inn:
npm installere - save reagerer dom
Dette installerer både React and ReactDom, pluss eventuelle avhengigheter som kreves av de to modulene. Du vil legge merke til at vi nå har en ny node_modules katalog som er hvor modulene er lagt til.
Hvis du tar en titt på package.json fil, en ny avhengig Egenskapen er lagt til med informasjon om nodemodulene vi installerte.
"avhengigheter": "reagere": "^ 15.6.1", "reagere dom": "^ 15.6.1"
Dette skjedde fordi vi spesifiserte --lagre alternativ i vår npm installasjon kommando. Dette varslet npm at vi ønsket å holde oversikt over våre installerte prosjektavhengigheter. Dette er viktig hvis vi ønsker å dele prosjektet vårt.
Vanligvis fordi node_modules mappen er så stor, du vil ikke prøve å dele dette direkte. I stedet deler du prosjektet ditt uten node_modules mappe. Så, når noen laster ned prosjektet, er alt de trenger å gjøre, å skrive npm installasjon å duplisere oppsettet direkte fra package.json.
Merk: I npm 5.x blir installerte moduler automatisk lagret til package.json. Du trenger ikke lenger å spesifisere --lagre alternativ.
Inne i my-første-komponenter-build mappe, opprett en ny src mappe, og legg til en index.js filen til den. Vi kommer tilbake til dette senere da vi begynner å lage vår React-app, når vi har konfigurert prosjektoppsettfilene.
Legg til en index.html-fil i samme mappe med følgende kode:
Opprett en React App manuelt, ved hjelp av Build Tools
Vi ønsker å kunne kompilere vår app ned til en enkelt JavaScript-fil, og også bruke JSX og ES6 klasser og moduler. For å gjøre dette må vi installere Webpack og Babel-moduler via npm.
La oss installere Babel først. Skriv inn følgende i kommandolinjevinduet:
npm installere - save-dev babel-core babel-loader babel-preset-env babel-preset-reagere
Dette installerer alle modulene som trengs for Babel for å kompilere ES6 og JSX-kode ned til standard JavaScript.
La oss nå installere Webpack, igjen via kommandolinjen:
npm installere - save-dev html-webpack-plugin webpack webpack-dev-server
Dette installerer alle modulene som trengs for Webpack, en lokal webserver, og lar oss styre Webpack for å lage en dynamisk index.html fil i offentlig mappe basert på den vi la til src mappe. Vi kan også legge til en dynamisk referanse til den medfølgende JavaScript-filen i HTML-filen hver gang appen er bygget.
Etter at disse nye modulene er installert, vil din package.json filen vil nå se slik ut:
"avhengigheter": "reagere": "^ 15.6.1", "reaksjonsdom": "^ 15.6.1", "devDependencies": "babel-core": "^ 6.25.0", "babel -laster ":" ^ 7.1.0 "," babel-preset-env ":" ^ 1.5.2 "," babel-forhåndsinnstilt-reagere ":" ^ 6.24.1 "," html-webpack-plugin " ^ 2.28.0 "," webpack ":" ^ 3.0.0 "," webpack-dev-server ":" ^ 2.5.0 "
Denne gangen blir imidlertid Webpack og Babel-avhengighetene lagret til package.json som dev avhengigheter.
Dette betyr at disse spesielle modulene trengs under utviklingsfasen (dvs. På den annen side er avhengighetene (for eksempel React, og ReactDOM) kreves i løpet av kjøretid, og det vil bli inkludert direkte sammen med vår egendefinerte appkode.
For å få Webpack til å bygge vår app og pakke den inn i en enkelt fil, må vi konfigurere innstillinger. Inne i roten din app mappe, opprett webpack.config.js, som brukes til å lagre Webpack-spesifikke bygginnstillinger.
Vi trenger Webpack for å gjøre tre ting:
Innsiden webpack.config.js, Legg til:
Accentsconagua
var sti = krever ('sti'); var HtmlWebpackPlugin = krever ('html-webpack-plugin'); module.exports = entry: './src/index.js', output: path: path.resolve (__ dirname, 'public'), filnavn: 'build.js', modul: rules: [test : /\.(js)$/, bruk: 'babel-loader'], plugins: [ny HtmlWebpackPlugin (mal: 'src / index.html')]Ikke bekymre deg for mye om syntaksen som brukes her; bare forstå oversikten over hva som skjer.
Alt vi gjør, er å eksportere et JavaScript-objekt med visse egenskaper som styrer hvordan Webpack bygger vår app. De inngang Egenskapen angir utgangspunktet for vår React app, som er index.js. Deretter produksjon Egenskapen definerer utgangsstien og filnavnet for den medfølgende JavaScript-filen.
Når det gjelder selve byggeprosessen, vil vi at Webpack skal passere alle JavaScript-filer gjennom Babel-kompilatoren for å transformere JSX / ES6 til standard JavaScript. Vi gjør dette via modul eiendom. Det angir bare et vanlig uttrykk som kjører Babel-transformasjoner bare for JavaScript-filer.
For å fullføre Babeloppsettet må vi legge til en oppføring i package.json fil for å spesifisere hvilke Babel-transformasjoner vi vil utføre på våre JavaScript-filer. Åpne opp package.json og legg til en babel eiendom:
"babel": "presets": ["env", "reagere"],
Dette vil kjøre to transformasjoner på hver JavaScript-fil i vårt prosjekt. De env transformasjon vil konvertere ES6 JavaScript til standard JavaScript som er kompatibelt med alle nettlesere. Og reagere transformasjon vil kompilere JSX kode ned til createElement () funksjonsanrop, som er helt gyldig JavaScript.
Nå, tilbake til vår webpack.config.js fil.
Den siste eiendommen vi har er plugins, som inneholder spesielle operasjoner vi ønsker utført under byggeprosessen. I vårt tilfelle trenger vi Webpack til å lage en index.html fil som inneholder en referanse til den medfølgende JavaScript-filen. Vi viser også en eksisterende index.html fil (den vi opprettet tidligere) for å bli brukt som en mal for å lage den endelige bunten index.html fil.
La oss nå legge til en manus eiendom til package.json. Forresten, kan du legge til så mange skript som du liker å utføre ulike oppgaver. For nå vil vi bare kunne kjøre Webpack, så inn package.json slette "test" skript og erstatt det med:
"skript": "build": "webpack",,
Før vi tester byggeprosessen, la vi legge til en React-komponent til index.js så vi har noe å gjengi.
Import React, Component fra 'reagere'; importere ReactDOM fra 'react-dom'; klassen App utvider komponent render () return () ReactDOM.render (Hei Verden!
, document.querySelector ('#app'));
Dette burde se veldig godt kjent nå hvis du har fulgt sammen med de tidligere opplæringene i denne serien.
Fra kommandolinjen, kjør:
npm kjøre bygge
Etter en liten stund, bør du se en ny offentlig mappe opprettet inne my-første-komponenter-build, inneholder index.html og index.js. Åpne opp index.html for å se utgangen av testreaktappen vår.
Legg merke til at den medfølgende JavaScript-filen er lagt til for oss, og testkomponenten blir gjengitt til riktig DOM-element.
Når du begynner å gjøre flere endringer i appen din, lærer du snart at det er ganske kjedelig å manuelt redigere en fil, lagre den, kjør byggekommandoen, og last deretter opp nettleservinduet for å se endringene.
Heldigvis kan vi bruke Webpack-miniserveren som vi installerte tidligere for å automatisere denne prosessen. Legg til et annet skript til package.json slik at egenskapen 'skript' ser slik ut:
"skript": "build": "webpack", "dev": "webpack-dev-server --open",
Kjør nå:
npm kjøre dev
Etter noen sekunder ser du en ny nettleserfane som er åpen når webappen kjører. Nettadressen peker nå på en lokal server i stedet for å peke på en bestemt lokal fil. Gjør en mindre endring til index.js i src mappe og lagre. Legg merke til at appen din oppdateres automatisk i nettleseren, nesten umiddelbart for å gjenspeile de nye endringene.
Webpack vil nå overvåke filene i appen din for endringer. Når noen endringer er gjort, og lagret, vil Webpack kompilere appen din og automatisk laste inn nettleservinduet med de nye oppdateringene.
Merk: Webpack-serveren vil ikke gjenoppbygge appen din som sådan, men det lagrer endringer i en cache, og derfor kan den oppdatere nettleseren så fort. Dette betyr at du ikke vil se oppdateringene som er reflektert i offentlig mappe. Faktisk kan du slette denne mappen helt når du bruker Webpack-serveren.
Når du trenger å bygge appen din, kan du bare kjøre npm kjøre bygge å opprette offentlig mappe igjen (om nødvendig) og utgav app-filene dine, klar til distribusjon.
For fullstendighet, la oss legge til de to enkle komponentene vi har brukt i tidligere opplæringsprogrammer.
Legg til to nye filer i roteprosjektmappen som heter MyFirstComponent.js og MySecondComponent.js til hovedappmappen. I MyFirstComponent.js, legg til følgende kode:
Import React, Component fra 'reagere'; klasse MyFirstComponent utvider komponent render () return (this.props.number: Hei fra React!
) eksporter standard MyFirstComponent;
Og i MySecondComponent.js, Legg til:
Import React, Component fra 'reagere'; klasse MySecondComponent utvider komponent render () return (this.props.number: Min andre reaksjonskomponent.
) eksporter standard MySecondComponent;
For å bruke disse komponentene i vår app, oppdater index.js til følgende:
Import React, Component fra 'reagere'; importere ReactDOM fra 'react-dom'; importer MyFirstComponent fra './MyFirstComponent'; importer MySecondComponent fra '. /MySecondComponent'; klassen App utvider komponent render () return () ReactDOM.render (Mine første reaktorkomponenter!
, document.querySelector ('#app'));
Dette gir samme resultat som vi har sett før, unntatt denne gangen ved å sette opp React-appen 100% manuelt.
Når du har gått gjennom denne bruksanvisningen en gang og opprettet konfigurasjonsoppsettfiler, er dette den eneste gangen du trenger å gjøre dette helt fra grunnen av. For fremtidige prosjekter kan du gjenbruke en eller flere av dine eksisterende installasjonsfiler, slik at etterfølgende React-prosjekter blir mye raskere å sette opp.
Du kan til og med lage et sett med spesialbygde React-startmaler, og vert dem på GitHub. Det ville da være et enkelt tilfelle av kloning av et startprosjekt og kjøring npm init å installere de nødvendige Node.js-modulene.
React-prosjektet for denne opplæringen er tilgjengelig for nedlasting, slik at du kan leke med det eller bruke det som en mal for nye prosjekter.
Klikk på Last ned vedlegg lenke i høyre sidefelt for å få tilgang til prosjektet .zip-fil. Når du er lastet ned, pakker du ut det og åpner et kommandolinjevindu. Pass på at du er i my-første-komponenter-build katalog.
Skriv inn følgende kommandoer for å installere og kompilere React-appen.
npm installere npm kjøre dev
Den første kommandoen laster ned alle Node.js-modulene som trengs for prosjektet, som tar et minutt eller to. Den andre kommandoen vil kompilere React-appen og kjøre mini-webserveren, og vise den i nettleseren.
Prøv å gjøre noen endringer i React-appen din. Hver gang du lagrer endringer, blir appen din omkompilert, og nettleservinduet oppdateres automatisk for å gjenspeile den nye versjonen av appen din.
Når du vil bygge prosjektet for distribusjon, bare kjør følgende kommando.
npm kjøre bygge
Gjennom hele denne opplæringsserien har vi sett på flere måter du kan tilnærming til å sette opp React-apper, hver som gradvis krever flere oppsettoppgaver foran. Men den langsiktige fordelen er at du har langt mer kontroll og fleksibilitet over nøyaktig hvordan prosjektet er satt opp.
Når du har mestret å sette opp React, tror jeg at du vil finne utvikle apper mye moro. Jeg vil gjerne høre dine kommentarer. Gi meg beskjed om hva du planlegger å bygge neste med React!
