Egy új React projekt indítása nagyon bonyolult, rengeteg összeállítási eszközzel. Számos függőséget, konfigurációs fájlt és egyéb követelményt használ, például Babel, Webpack, ESLint, mielőtt egy sor React kódot írna. A React App CLI létrehozása eszköz eltávolítja az összes bonyolultságot, és egyszerűvé teszi a React alkalmazást. Ehhez telepítenie kell a csomagot az NPM segítségével, majd futtassa néhány egyszerű parancsot, hogy új React projektet kapjon.

A Alkalmazás létrehozása-reagálása egy kiváló eszköz kezdőknek, amely lehetővé teszi a React projekt nagyon gyors létrehozását és futtatását. Nem igényel manuális konfigurációt. Ez az eszköz becsomagolja az összes szükséges függőséget, például Webpack , Bábel magának a React projektnek, és akkor csak a React kód írására kell összpontosítania. Ez az eszköz beállítja a fejlesztői környezetet, kiváló fejlesztői élményt biztosít, és optimalizálja az alkalmazást a termeléshez.

Követelmények

A Create React alkalmazást a Facebook és bármelyiken működhet felület , például macOS, Windows, Linux stb. Ha React Projectet szeretne létrehozni a create-react-app használatával, telepítenie kell a következő dolgokat a rendszerében.

1. Node verzió >= 8.10
2. NPM verzió >= 5.6

Nézzük meg az aktuális verziót Csomópont és NPM a rendszerben.

Futtassa a következő parancsot a csomópont verziójának ellenőrzéséhez a parancssorban.

 $ node -v 

Futtassa a következő parancsot az NPM-verzió ellenőrzéséhez a parancssorban.

 $ npm -v 

Telepítés

Itt megtudjuk, hogyan telepíthetjük a Reactot CRA eszköz. Ehhez az alábbi lépéseket kell követnünk.

Telepítse a Reactot

A Reactot az npm csomagkezelővel telepíthetjük a következő paranccsal. Nem kell aggódnia a React telepítésének bonyolultsága miatt. A Create-react-app npm csomagkezelő mindent kezel, ami a React projekthez szükséges.

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

Hozzon létre egy új React projektet

Miután a React telepítése sikeres volt, a create-react-app paranccsal új React projektet hozhatunk létre. Itt kiválasztom a „reactproject” nevet a projektemnek.

 C:Usersjavatpoint> create-react-app reactproject 

JEGYZET:A fenti két lépést egyetlen paranccsal kombinálhatjuk a használatávalnpx. Az npx egy csomag futtató eszköz, amely az npm 5.2-es és újabb verziójával érkezik.

 C:Usersjavatpoint> npx create-react-app reactproject 

A fenti paranccsal eltart egy ideig a React telepítése és egy új projekt létrehozása „reactproject” néven. Most a terminált az alábbiak szerint láthatjuk.

A fenti képernyő azt mutatja, hogy a React projekt sikeresen létrejött a rendszerünkön. Most el kell indítanunk a szervert, hogy elérhessük az alkalmazást a böngészőben. Írja be a következő parancsot a terminálablakba.

 $ cd Desktop $ npm start 

Az NPM egy csomagkezelő, amely elindítja a kiszolgálót, és a http://localhost:3000 alapértelmezett kiszolgálón éri el az alkalmazást. Most a következő képernyőt fogjuk kapni.

Ezután nyissa meg a projektet a Kódszerkesztőben. Itt a Visual Studio Code-ot használom. Projektünk alapértelmezett felépítése az alábbi képen látható.

A React alkalmazásban számos fájl és mappa található a gyökérkönyvtárban. Néhány közülük a következő:

node_modules:Tartalmazza a React könyvtárat és minden más szükséges, harmadik féltől származó könyvtárat.nyilvános:A pályázat közvagyonát birtokolja. Ez tartalmazza az index.html fájlt, ahol a React alapértelmezés szerint felcsatolja az alkalmazást az elemre.src:Tartalmazza az App.css, App.js, App.test.js, index.css, index.js és serviceWorker.js fájlokat. Itt mindig az App.js fájl felelős a kimeneti képernyő megjelenítéséért a React alkalmazásban.package-lock.json:Automatikusan generálódik minden olyan művelethez, ahol az npm csomag módosítja a node_modules fát vagy a package.json fájlt. Nem publikálható. A rendszer figyelmen kívül hagyja, ha a legfelső szintű csomag helyett más helyet talál.package.json:Különféle, a projekthez szükséges metaadatokat tartalmazza. Információkat ad az npm-nek, amely lehetővé teszi a projekt azonosítását, valamint a projekt függőségeinek kezelését.README.md:Ez biztosítja a dokumentációt a React témákról való olvasáshoz.

React Environment Setup

Most nyissa meg a src >> App.js fájlt, és hajtsa végre a képernyőn megjeleníteni kívánt módosításokat. A kívánt változtatások elvégzése után megment a fájl. Amint elmentjük a fájlt, a Webpack újrafordítja a kódot, és az oldal automatikusan frissül, a változások pedig megjelennek a böngésző képernyőjén. Most annyi komponenst hozhatunk létre, amennyit csak akarunk, és importálhatjuk az újonnan létrehozott komponenst a fájlba App.js fájlt, és ez a fájl szerepelni fog a főben index.html fájlt a Webpack általi fordítás után.

Ezután, ha a projektet éles módhoz akarjuk készíteni, írja be a következő parancsot. Ez a parancs generálja a legjobban optimalizált éles buildet.

 $ npm build