Bruk Opprett React App

Hva du skal skape

React har raskt blitt et populært rammeverk for å skape både klientside og server-sidevisninger. Det var en høyere barriere for oppføring med verktøy sammen med litt frustrasjon med JavaScript-tretthet fra samfunnet. Opprett-reagere-appen ble opprettet for å løse disse frustrasjonene.

Starter

Du vil først sørge for at du har Node installert på systemet ditt. Du må minst ha Node versjon 4 installert, men de anbefaler at du har versjon 6 for raskere nedlasting og bedre diskbruk. Du kan også bruke nvm til å bytte mellom Node-versjoner. 

Etter at du har installert Knutepunkt, vil du åpne favorittkommandolinjeværktøjet og installere Create-React-appen globalt, slik at du kan utføre den hvor som helst på systemet ditt. 

npm installere-g create-react-app

Hvordan lage din første app

Du vil først åpne kommandolinjen og navigere eller opprette en katalog hvor du skal gjøre din utvikling. Deretter skal vi opprette appen ved å kjøre Opprett-reager-app-tut-pluss-reager-app. Dette vil utføre cli-verktøyet for å lage vår tuts-plus-reagere-app. 

Når CLI-verktøyet er fullført, vil du bli tatt med til en oppsummeringsskjerm som vil gi deg beskjed om hvor appen er opprettet og vise deg en liste over kommandoer du kan bruke.

Deretter vil du ønske å navigere til vår nye app ved å kjøre cd tuts-plus-reagere-app.

Starter appen

Du kan kjøre appen lokalt ved å kjøre npm start. Når appen starter, blir du automatisk navigert til http: // localhost: 3000 / i nettleseren din og se din nye React-applikasjon. 

Appen bruker webpakk til å kjøre en lokal dev-server. Det er en klokkefunksjon, så når du gjør endringer i React-koden og lagre, vil du se endringene automatisk vises i nettleseren. 

Hvis du gjør feil med koden, vil du se disse feilene eller advarslene dukker opp i nettleseren.

Kode Stiler og Testing

ESLint er inkludert for å sikre at koden din følger vanlige kodestiler. Dette vil hjelpe deg med å sikre at koden din er konsekvent, noe som er spesielt nyttig når det er flere bidragsytere til et prosjekt. Jeg vil foreslå å bruke den hvis du er ny til å reagere så vel som å lære gode React og JavaScript koding stiler. 

Hvis du er kjent med å skrive tester for koden din, er Jest inkludert for å kjøre tester. Jest er et testramme som er opprettet og vedlikeholdt av Facebook, skaperne av React. For å utføre testene dine, utfør npm test i kommandolinjeverktøyet ditt. Dette vil kjøre testene og deretter starte en vaktmester til å utføre testene dine når produksjonskoden endres. Det finnes en eksisterende testfil som du kan legge til i src / App.test.js.

Implementere appen din

Når du er ferdig med å gjøre alle dine endringer, er det på tide å få appen din utplassert. Alt du trenger å gjøre er å utføre npm kjøre bygge i app-katalogen din. Dette vil bruke Babel til å transpilere React-koden til kode som nettleseren forstår. Det vil også redusere koden din for å sikre at du har den beste ytelsen i nettleseren.

Brukerhåndboken

Hvis du bestemmer deg for å fortsette å bruke Create-React-appen, foreslår jeg at du sparer tid på å lese gjennom brukerhåndboken. Den har mye nyttig informasjon om andre visningsrelaterte emner som å legge til CSS stilark, importere andre komponenter, importere bilder og skrifter, og andre. Den har også informasjon om webutviklingspraksis som å bruke HTTPS, koble til en tilbakekobling av noden, skape progressive webprogrammer og mer. 

Det er også noen omfattende dokumentasjon på testing og distribusjon av søknaden din.

Glad Hacking

Jeg håper du nå kan se hvor enkelt det er å lage et React-program ved hjelp av create-react-app-prosjektet. Jeg håper dette bidrar til å redusere inngangsbarrieren og kommer i gang med React. Jeg vet at du skal nyte det!