Het starten van een nieuw React-project is erg ingewikkeld, met zoveel bouwtools. Het gebruikt veel afhankelijkheden, configuratiebestanden en andere vereisten zoals Babel, Webpack, ESLint voordat het een enkele regel React-code schrijft. Create React App CLI-tool verwijdert al die complexiteiten en maakt de React-app eenvoudig. Hiervoor moet u het pakket installeren met behulp van NPM en vervolgens een paar eenvoudige opdrachten uitvoeren om een ​​nieuw React-project te krijgen.

De maak-reageer-app is een uitstekend hulpmiddel voor beginners, waarmee u zeer snel een React-project kunt maken en uitvoeren. Er is geen handmatige configuratie nodig. Deze tool verpakt alle vereiste afhankelijkheden, zoals Webpakket , Babel voor het React-project zelf en dan moet je je concentreren op het schrijven van alleen React-code. Deze tool zet de ontwikkelomgeving op, biedt een uitstekende ontwikkelaarservaring en optimaliseert de app voor productie.

Vereisten

De Create React-app wordt onderhouden door Facebook en kan op elk apparaat werken platform , bijvoorbeeld macOS, Windows, Linux, enz. Om een ​​React-project te maken met create-react-app, moet je de volgende dingen op je systeem hebben geïnstalleerd.

1. Knooppuntversie >= 8.10
2. NPM-versie >= 5.6

Laten we de huidige versie van Knooppunt En NPM in het systeem.

Voer de volgende opdracht uit om de knooppuntversie in de opdrachtprompt te controleren.

 $ node -v 

Voer de volgende opdracht uit om de NPM-versie te controleren via de opdrachtprompt.

 $ npm -v 

Installatie

Hier gaan we leren hoe we React kunnen installeren met behulp van CRA hulpmiddel. Hiervoor moeten we de onderstaande stappen volgen.

Installeer React

We kunnen React installeren met behulp van npm-pakketbeheerder door de volgende opdracht te gebruiken. U hoeft zich geen zorgen te maken over de complexiteit van de React-installatie. De create-react-app npm-pakketbeheerder beheert alles wat nodig is voor het React-project.

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

Maak een nieuw React-project

Zodra de React-installatie succesvol is, kunnen we een nieuw React-project maken met behulp van de opdracht create-react-app. Hier kies ik de naam 'reactproject' voor mijn project.

 C:Usersjavatpoint> create-react-app reactproject 

OPMERKING:We kunnen de bovenstaande twee stappen combineren in één enkele opdracht met behulp vannpx. De npx is een pakketrunner-tool die wordt geleverd met de versie npm 5.2 en hoger.

 C:Usersjavatpoint> npx create-react-app reactproject 

Het bovenstaande commando zal enige tijd nodig hebben om React te installeren en een nieuw project aan te maken met de naam 'reactproject'. Nu kunnen we de terminal zien zoals hieronder.

Het bovenstaande scherm geeft aan dat het React-project met succes op ons systeem is aangemaakt. Nu moeten we de server starten zodat we toegang hebben tot de applicatie in de browser. Typ de volgende opdracht in het terminalvenster.

 $ cd Desktop $ npm start 

NPM is een pakketbeheerder die de server start en toegang krijgt tot de applicatie op de standaardserver http://localhost:3000. Nu krijgen we het volgende scherm.

Open vervolgens het project in de Code-editor. Hier gebruik ik Visual Studio Code. De standaardstructuur van ons project ziet eruit zoals onderstaande afbeelding.

In de React-applicatie bevinden zich verschillende bestanden en mappen in de hoofdmap. Sommigen van hen zijn als volgt:

knooppunt_modules:Het bevat de React-bibliotheek en alle andere benodigde bibliotheken van derden.openbaar:Het beheert de publieke activa van de applicatie. Het bevat de index.html waar React de applicatie standaard op het element zal koppelen.src:Het bevat de bestanden App.css, App.js, App.test.js, index.css, index.js en serviceWorker.js. Hier is het App.js-bestand altijd verantwoordelijk voor het weergeven van het uitvoerscherm in React.pakket-lock.json:Het wordt automatisch gegenereerd voor alle bewerkingen waarbij het npm-pakket de node_modules-boom of package.json wijzigt. Het kan niet worden gepubliceerd. Het wordt genegeerd als het een andere plaats vindt dan het pakket op het hoogste niveau.pakket.json:Het bevat verschillende metadata die nodig zijn voor het project. Het geeft informatie aan npm, waardoor het project kan worden geïdentificeerd en de afhankelijkheden van het project kunnen worden afgehandeld.LEESMIJ.md:Het biedt de documentatie om over React-onderwerpen te lezen.

Reageeromgeving instellen

Open nu de src >> App.js bestand en breng de wijzigingen aan die u op het scherm wilt weergeven. Nadat u de gewenste wijzigingen heeft aangebracht, redden het bestand. Zodra we het bestand opslaan, compileert Webpack de code opnieuw en wordt de pagina automatisch vernieuwd en worden de wijzigingen weergegeven op het browserscherm. Nu kunnen we zoveel componenten maken als we willen, importeer de nieuw gemaakte component in het App.js bestand en dat bestand wordt opgenomen in ons hoofdbestand index.html bestand na compilatie door Webpack.

Als we vervolgens het project voor de productiemodus willen maken, typt u de volgende opdracht. Met deze opdracht wordt de productiebuild gegenereerd, die het beste kan worden geoptimaliseerd.

 $ npm build