Å starte et nytt React-prosjekt er veldig komplisert, med så mange byggeverktøy. Den bruker mange avhengigheter, konfigurasjonsfiler og andre krav som Babel, Webpack, ESLint før du skriver en enkelt linje med React-kode. Create React App CLI-verktøyet fjerner all den kompleksiteten og gjør React-appen enkel. For dette må du installere pakken ved hjelp av NPM, og deretter kjøre noen enkle kommandoer for å få et nytt React-prosjekt.

De lag-reager-app er et utmerket verktøy for nybegynnere, som lar deg lage og kjøre React-prosjekt veldig raskt. Den tar ingen konfigurasjon manuelt. Dette verktøyet pakker inn alle nødvendige avhengigheter som Webpack , Babel for selve React-prosjektet, og da må du fokusere kun på å skrive React-kode. Dette verktøyet setter opp utviklingsmiljøet, gir en utmerket utvikleropplevelse og optimerer appen for produksjon.

Krav

Create React-appen vedlikeholdes av Facebook og kan fungerer på alle plattform , for eksempel macOS, Windows, Linux osv. For å lage et React Project ved å bruke create-react-app, må du ha installert følgende ting i systemet ditt.

1. Nodeversjon >= 8.10
2. NPM-versjon >= 5.6

La oss sjekke gjeldende versjon av Node og NPM i systemet.

Kjør følgende kommando for å sjekke Node-versjonen i ledeteksten.

 $ node -v 

Kjør følgende kommando for å sjekke NPM-versjonen i ledeteksten.

 $ npm -v 

Installasjon

Her skal vi lære hvordan vi kan installere React ved å bruke CRA verktøy. For dette må vi følge trinnene som er gitt nedenfor.

Installer React

Vi kan installere React ved å bruke npm-pakkebehandling ved å bruke følgende kommando. Det er ingen grunn til å bekymre seg for kompleksiteten til React-installasjonen. Create-react-app npm-pakkebehandleren vil administrere alt som trengs for React-prosjektet.

 C:Usersjavatpoint> npm install -g create-react-app 

Opprett et nytt React-prosjekt

Når React-installasjonen er vellykket, kan vi opprette et nytt React-prosjekt ved å bruke create-react-app-kommandoen. Her velger jeg 'reactproject'-navn for prosjektet mitt.

 C:Usersjavatpoint> create-react-app reactproject 

MERK:Vi kan kombinere de to ovennevnte trinnene i en enkelt kommando ved å brukenpx. npx er et pakkeløperverktøy som kommer med npm 5.2 og nyere versjon.

 C:Usersjavatpoint> npx create-react-app reactproject 

Kommandoen ovenfor vil ta litt tid å installere React og lage et nytt prosjekt med navnet 'reactproject.' Nå kan vi se terminalen som nedenfor.

Skjermbildet ovenfor forteller at React-prosjektet er opprettet med suksess på systemet vårt. Nå må vi starte serveren slik at vi får tilgang til applikasjonen i nettleseren. Skriv inn følgende kommando i terminalvinduet.

 $ cd Desktop $ npm start 

NPM er en pakkebehandling som starter serveren og får tilgang til applikasjonen på standardserveren http://localhost:3000 . Nå får vi følgende skjermbilde.

Deretter åpner du prosjektet i Code editor. Her bruker jeg Visual Studio Code. Prosjektets standardstruktur ser ut som bildet nedenfor.

I React-applikasjonen er det flere filer og mapper i rotkatalogen. Noen av dem er som følger:

node_modules:Den inneholder React-biblioteket og eventuelle andre tredjepartsbiblioteker som trengs.offentlig:Den har de offentlige eiendelene til søknaden. Den inneholder index.html der React vil montere applikasjonen som standard på elementet.src:Den inneholder filene App.css, App.js, App.test.js, index.css, index.js og serviceWorker.js. Her er App.js-filen alltid ansvarlig for å vise utdataskjermen i React.package-lock.json:Den genereres automatisk for alle operasjoner der npm-pakken endrer enten node_modules-treet eller package.json. Den kan ikke publiseres. Den vil bli ignorert hvis den finner et annet sted i stedet for toppnivåpakken.package.json:Den inneholder ulike metadata som kreves for prosjektet. Det gir informasjon til npm, som gjør det mulig å identifisere prosjektet samt håndtere prosjektets avhengigheter.README.md:Den gir dokumentasjonen for å lese om React-emner.

React Environment Setup

Nå åpner du src >> App.js fil og gjør endringer som du vil vise på skjermen. Etter å ha gjort ønskede endringer, lagre filen. Så snart vi lagrer filen, kompilerer Webpack koden på nytt, og siden oppdateres automatisk, og endringer reflekteres på nettleserskjermen. Nå kan vi lage så mange komponenter vi vil, importere den nyopprettede komponenten i App.js fil, og den filen vil bli inkludert i vår hovedfil index.html fil etter kompilering av Webpack.

Deretter, hvis vi vil lage prosjektet for produksjonsmodus, skriv inn følgende kommando. Denne kommandoen vil generere produksjonsbygget, som er best optimalisert.

 $ npm build