At starte et nyt React-projekt er meget kompliceret, med så mange byggeværktøjer. Den bruger mange afhængigheder, konfigurationsfiler og andre krav såsom Babel, Webpack, ESLint, før den skriver en enkelt linje React-kode. Create React App CLI-værktøj fjerner al den kompleksitet og gør React-appen enkel. Til dette skal du installere pakken ved hjælp af NPM, og derefter køre et par enkle kommandoer for at få et nyt React-projekt.

Det opret-reager-app er et fremragende værktøj for begyndere, som giver dig mulighed for at oprette og køre React-projekt meget hurtigt. Det tager ikke nogen konfiguration manuelt. Dette værktøj pakker alle de nødvendige afhængigheder som Webpack , Babel til selve React-projektet, og så skal du fokusere på kun at skrive React-kode. Dette værktøj sætter udviklingsmiljøet op, giver en fremragende udvikleroplevelse og optimerer appen til produktion.

Krav

Create React-appen vedligeholdes af Facebook og kan virker på enhver platform , for eksempel macOS, Windows, Linux osv. For at oprette et React Project ved hjælp af create-react-app skal du have installeret følgende ting i dit system.

1. Nodeversion >= 8.10
2. NPM-version >= 5.6

Lad os tjekke den aktuelle version af Node og NPM i systemet.

Kør følgende kommando for at kontrollere Node-versionen i kommandoprompten.

 $ node -v 

Kør følgende kommando for at kontrollere NPM-versionen i kommandoprompten.

 $ npm -v 

Installation

Her skal vi lære, hvordan vi kan installere React vha CRA værktøj. Til dette skal vi følge trinene som angivet nedenfor.

Installer React

Vi kan installere React ved hjælp af npm-pakkehåndtering ved at bruge følgende kommando. Der er ingen grund til at bekymre sig om kompleksiteten af ​​React-installationen. Create-react-app npm-pakkemanageren vil administrere alt, hvad der er nødvendigt for React-projektet.

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

Opret et nyt React-projekt

Når React-installationen er vellykket, kan vi oprette et nyt React-projekt ved hjælp af create-react-app kommandoen. Her vælger jeg 'reactproject' navn til mit projekt.

 C:Usersjavatpoint> create-react-app reactproject 

BEMÆRK:Vi kan kombinere ovenstående to trin i en enkelt kommando ved hjælp afnpx. npx er et pakkeløberværktøj, der leveres med npm 5.2 og nyere version.

 C:Usersjavatpoint> npx create-react-app reactproject 

Ovenstående kommando vil tage noget tid at installere React og oprette et nyt projekt med navnet 'reactproject.' Nu kan vi se terminalen som nedenfor.

Ovenstående skærm fortæller, at React-projektet er oprettet med succes på vores system. Nu skal vi starte serveren, så vi kan få adgang til applikationen i browseren. Skriv følgende kommando i terminalvinduet.

 $ cd Desktop $ npm start 

NPM er en pakkehåndtering, som starter serveren og får adgang til applikationen på standardserveren http://localhost:3000. Nu får vi følgende skærmbillede.

Åbn derefter projektet i Kodeeditor. Her bruger jeg Visual Studio Code. Vores projekts standardstruktur ser ud som på billedet nedenfor.

I React-applikationen er der flere filer og mapper i rodmappen. Nogle af dem er som følger:

node_modules:Den indeholder React-biblioteket og eventuelle andre nødvendige tredjepartsbiblioteker.offentlig:Det besidder ansøgningens offentlige aktiver. Den indeholder index.html, hvor React vil montere applikationen som standard på elementet.src:Den indeholder filerne App.css, App.js, App.test.js, index.css, index.js og serviceWorker.js. Her er App.js-filen altid ansvarlig for at vise outputskærmen i React.package-lock.json:Den genereres automatisk for alle operationer, hvor npm-pakken ændrer enten node_modules-træet eller package.json. Det kan ikke offentliggøres. Den vil blive ignoreret, hvis den finder et andet sted i stedet for pakken på øverste niveau.package.json:Den indeholder forskellige metadata, der kræves til projektet. Det giver information til npm, som gør det muligt at identificere projektet samt håndtere projektets afhængigheder.README.md:Det giver dokumentationen til at læse om React-emner.

React Environment Setup

Åbn nu src >> App.js fil og foretag ændringer, som du vil have vist på skærmen. Efter at have foretaget de ønskede ændringer, Gemme filen. Så snart vi gemmer filen, genkompilerer Webpack koden, og siden opdateres automatisk, og ændringer afspejles på browserskærmen. Nu kan vi oprette så mange komponenter, som vi vil, importere den nyoprettede komponent inde i App.js fil, og den fil vil blive inkluderet i vores hoved index.html fil efter kompilering af Webpack.

Dernæst, hvis vi vil lave projektet til produktionstilstanden, skal du skrive følgende kommando. Denne kommando vil generere produktionsopbygningen, som er bedst optimeret.

 $ npm build