Jauna React projekta uzsākšana ir ļoti sarežģīta, jo tajā ir tik daudz veidošanas rīku. Pirms vienas React koda rindiņas rakstīšanas tas izmanto daudzas atkarības, konfigurācijas failus un citas prasības, piemēram, Babel, Webpack, ESLint. Create React App CLI rīks novērš visas šīs sarežģītības un padara React lietotni vienkāršu. Lai to izdarītu, jums ir jāinstalē pakotne, izmantojot NPM, un pēc tam palaidiet dažas vienkāršas komandas, lai iegūtu jaunu React projektu.

The izveidot-reaģēt-lietotni ir lielisks rīks iesācējiem, kas ļauj ļoti ātri izveidot un palaist React projektu. Tas neveic nekādu konfigurāciju manuāli. Šis rīks iesaiņo visas nepieciešamās atkarības, piemēram Tīmekļa pakotne , Bābele pašam React projektam, un tad jums jākoncentrējas tikai uz React koda rakstīšanu. Šis rīks iestata izstrādes vidi, nodrošina izcilu izstrādātāja pieredzi un optimizē lietotni ražošanai.

Prasības

Lietotni Create React uztur Facebook un var strādāt ar jebkuru platforma , piemēram, macOS, Windows, Linux u.c. Lai izveidotu React projektu, izmantojot lietotni Create-React-app, sistēmā ir jābūt instalētai tālāk norādītajām lietām.

1. Mezgla versija >= 8.10
2. NPM versija >= 5.6

Ļaujiet mums pārbaudīt pašreizējo versiju Mezgls un NPM sistēmā.

Palaidiet šo komandu, lai komandu uzvednē pārbaudītu mezgla versiju.

 $ node -v 

Palaidiet šo komandu, lai pārbaudītu NPM versiju komandu uzvednē.

 $ npm -v 

Uzstādīšana

Šeit mēs uzzināsim, kā mēs varam instalēt React, izmantojot CRA rīks. Lai to izdarītu, mums ir jāveic tālāk norādītās darbības.

Instalējiet React

Mēs varam instalēt React, izmantojot npm pakotņu pārvaldnieku, izmantojot šo komandu. Nav jāuztraucas par React instalēšanas sarežģītību. Create-react-app npm pakotņu pārvaldnieks pārvaldīs visu, kas nepieciešams React projektam.

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

Izveidojiet jaunu React projektu

Kad React instalēšana ir veiksmīga, mēs varam izveidot jaunu React projektu, izmantojot komandu create-react-app. Šeit es savam projektam izvēlos “reactprojekta” nosaukumu.

 C:Usersjavatpoint> create-react-app reactproject 

PIEZĪME:Mēs varam apvienot divas iepriekš minētās darbības vienā komandā, izmantojotnpx. Npx ir pakotnes palaišanas rīks, kas tiek piegādāts ar npm 5.2 un jaunāku versiju.

 C:Usersjavatpoint> npx create-react-app reactproject 

Iepriekš minētā komanda prasīs zināmu laiku, lai instalētu React un izveidotu jaunu projektu ar nosaukumu 'reactproject'. Tagad mēs varam redzēt termināli, kā norādīts zemāk.

Iepriekš redzamais ekrāns norāda, ka React projekts mūsu sistēmā ir veiksmīgi izveidots. Tagad mums ir jāstartē serveris, lai mēs varētu piekļūt lietojumprogrammai pārlūkprogrammā. Termināļa logā ierakstiet šādu komandu.

 $ cd Desktop $ npm start 

NPM ir pakotņu pārvaldnieks, kas startē serveri un piekļūst lietojumprogrammai noklusējuma serverī http://localhost:3000. Tagad mēs iegūsim šādu ekrānu.

Pēc tam atveriet projektu koda redaktorā. Šeit es izmantoju Visual Studio kodu. Mūsu projekta noklusējuma struktūra izskatās kā zemāk redzamajā attēlā.

Programmas React saknes direktorijā ir vairāki faili un mapes. Daži no tiem ir šādi:

node_modules:Tajā ir React bibliotēka un visas citas nepieciešamās trešo pušu bibliotēkas.publiski:Tajā ir lietojumprogrammas publiskie īpašumi. Tajā ir ietverts indekss.html, kur React pēc noklusējuma pievienos lietojumprogrammu elementam.src:Tajā ir faili App.css, App.js, App.test.js, index.css, index.js un serviceWorker.js. Šeit fails App.js vienmēr ir atbildīgs par izvades ekrāna rādīšanu programmā React.package-lock.json:Tas tiek ģenerēts automātiski visām darbībām, kurās npm pakotne modificē koku node_modules vai pack.json. To nevar publicēt. Tas tiks ignorēts, ja tas atradīs citu vietu, nevis augstākā līmeņa pakotni.package.json:Tajā ir dažādi metadati, kas nepieciešami projektam. Tas sniedz informāciju npm, kas ļauj identificēt projektu, kā arī apstrādāt projekta atkarības.README.md:Tas nodrošina dokumentāciju, lai lasītu par React tēmām.

React vides iestatīšana

Tagad atveriet src >> App.js failu un veiciet izmaiņas, kuras vēlaties parādīt ekrānā. Pēc vēlamo izmaiņu veikšanas, saglabāt fails. Tiklīdz mēs saglabājam failu, Webpack atkārtoti kompilē kodu, un lapa tiks automātiski atsvaidzināta, un izmaiņas tiek atspoguļotas pārlūkprogrammas ekrānā. Tagad mēs varam izveidot tik daudz komponentu, cik vēlamies, importēt jaunizveidoto komponentu iekšā App.js failu, un šis fails tiks iekļauts mūsu galvenajā index.html failu pēc Webpack kompilēšanas.

Pēc tam, ja mēs vēlamies izveidot projektu ražošanas režīmam, ierakstiet šo komandu. Šī komanda ģenerēs ražošanas būvējumu, kas ir vislabāk optimizēts.

 $ npm build