Att starta ett nytt React-projekt är mycket komplicerat, med så många byggverktyg. Den använder många beroenden, konfigurationsfiler och andra krav som Babel, Webpack, ESLint innan du skriver en enda rad med React-kod. Create React App CLI-verktyget tar bort all komplexitet och gör React-appen enkel. För detta måste du installera paketet med NPM och sedan köra några enkla kommandon för att få ett nytt React-projekt.

De skapa-reagera-app är ett utmärkt verktyg för nybörjare, som låter dig skapa och köra React-projekt mycket snabbt. Den tar ingen konfiguration manuellt. Detta verktyg omsluter alla nödvändiga beroenden som Webpack , Babel för själva React-projektet och då behöver du fokusera på att bara skriva React-kod. Det här verktyget ställer in utvecklingsmiljön, ger en utmärkt utvecklarupplevelse och optimerar appen för produktion.

Krav

Create React-appen underhålls av Facebook och kan fungerar på alla plattform , till exempel macOS, Windows, Linux, etc. För att skapa ett React Project med create-react-app måste du ha installerat följande saker i ditt system.

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

Låt oss kontrollera den aktuella versionen av Nod och NPM i systemet.

Kör följande kommando för att kontrollera nodversionen i kommandotolken.

 $ node -v 

Kör följande kommando för att kontrollera NPM-versionen i kommandotolken.

 $ npm -v 

Installation

Här kommer vi att lära oss hur vi kan installera React med hjälp av CRA verktyg. För detta måste vi följa stegen nedan.

Installera React

Vi kan installera React med hjälp av npm-pakethanteraren genom att använda följande kommando. Det finns ingen anledning att oroa sig för komplexiteten i React-installationen. Create-react-app npm-pakethanteraren kommer att hantera allt som behövs för React-projektet.

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

Skapa ett nytt React-projekt

När React-installationen är framgångsrik kan vi skapa ett nytt React-projekt med kommandot create-react-app. Här väljer jag 'reactproject'-namn för mitt projekt.

 C:Usersjavatpoint> create-react-app reactproject 

NOTERA:Vi kan kombinera ovanstående två steg i ett enda kommando med hjälp avnpx. npx är ett paketlöpareverktyg som kommer med npm 5.2 och senare version.

 C:Usersjavatpoint> npx create-react-app reactproject 

Kommandot ovan kommer att ta lite tid att installera React och skapa ett nytt projekt med namnet 'reactproject'. Nu kan vi se terminalen som nedan.

Skärmen ovan visar att React-projektet har skapats framgångsrikt på vårt system. Nu måste vi starta servern så att vi kan komma åt applikationen i webbläsaren. Skriv följande kommando i terminalfönstret.

 $ cd Desktop $ npm start 

NPM är en pakethanterare som startar servern och kommer åt programmet på standardservern http://localhost:3000 . Nu kommer vi att få följande skärm.

Öppna sedan projektet i kodredigeraren. Här använder jag Visual Studio Code. Vårt projekts standardstruktur ser ut som bilden nedan.

I React-applikationen finns det flera filer och mappar i rotkatalogen. Några av dem är följande:

node_modules:Den innehåller React-biblioteket och alla andra tredjepartsbibliotek som behövs.offentlig:Den innehar applikationens offentliga tillgångar. Den innehåller index.html där React monterar applikationen som standard på elementet.src:Den innehåller filerna App.css, App.js, App.test.js, index.css, index.js och serviceWorker.js. Här är App.js-filen alltid ansvarig för att visa utdataskärmen i React.package-lock.json:Det genereras automatiskt för alla operationer där npm-paketet modifierar antingen node_modules-trädet eller package.json. Den kan inte publiceras. Den kommer att ignoreras om den hittar någon annan plats i stället för toppnivåpaketet.package.json:Den innehåller olika metadata som krävs för projektet. Det ger information till npm, vilket gör det möjligt att identifiera projektet samt hantera projektets beroenden.README.md:Den tillhandahåller dokumentationen för att läsa om React-ämnen.

React Environment Setup

Öppna nu src >> App.js fil och gör ändringar som du vill visa på skärmen. Efter att ha gjort önskade ändringar, spara filen. Så snart vi sparat filen, kompilerar Webpack om koden, och sidan kommer att uppdateras automatiskt och ändringarna återspeglas på webbläsarens skärm. Nu kan vi skapa så många komponenter vi vill, importera den nyskapade komponenten inuti App.js fil och den filen kommer att inkluderas i vår huvudsida index.html fil efter kompilering av Webpack.

Därefter, om vi vill göra projektet för produktionsläget, skriv följande kommando. Detta kommando kommer att generera produktionsbygget, som är bäst optimerat.

 $ npm build