Spustenie nového projektu React je veľmi komplikované, s toľkými nástrojmi na zostavovanie. Používa mnoho závislostí, konfiguračných súborov a ďalších požiadaviek, ako je Babel, Webpack, ESLint pred napísaním jedného riadku kódu React. Nástroj Create React App CLI odstraňuje všetky tieto zložitosti a robí aplikáciu React jednoduchou. Na to musíte nainštalovať balík pomocou NPM a potom spustiť niekoľko jednoduchých príkazov, aby ste získali nový projekt React.

The create-react-app je vynikajúci nástroj pre začiatočníkov, ktorý vám umožní vytvoriť a spustiť projekt React veľmi rýchlo. Nevyžaduje žiadnu manuálnu konfiguráciu. Tento nástroj zabalí všetky požadované závislosti, ako napr Webpack , Babel pre samotný projekt React a potom sa musíte sústrediť iba na písanie kódu React. Tento nástroj nastavuje vývojové prostredie, poskytuje vynikajúce skúsenosti pre vývojárov a optimalizuje aplikáciu pre produkciu.

Požiadavky

Aplikáciu Create React spravuje Facebook a môže fungovať na akomkoľvek plošina , napríklad macOS, Windows, Linux atď. Ak chcete vytvoriť projekt React pomocou aplikácie create-react-app, musíte mať vo svojom systéme nainštalované nasledujúce veci.

1. Verzia uzla >= 8.10
2. Verzia NPM >= 5.6

Pozrime sa na aktuálnu verziu Uzol a NPM v systéme.

Spustite nasledujúci príkaz a skontrolujte verziu uzla v príkazovom riadku.

 $ node -v 

Spustite nasledujúci príkaz a skontrolujte verziu NPM v príkazovom riadku.

 $ npm -v 

Inštalácia

Tu sa dozvieme, ako môžeme nainštalovať React pomocou CRA nástroj. Na to musíme postupovať podľa krokov uvedených nižšie.

Nainštalujte React

React môžeme nainštalovať pomocou správcu balíkov npm pomocou nasledujúceho príkazu. Zložitosti inštalácie Reactu sa netreba obávať. Správca balíkov create-react-app npm bude spravovať všetko, čo je potrebné pre projekt React.

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

Vytvorte nový projekt React

Keď je inštalácia React úspešná, môžeme vytvoriť nový projekt React pomocou príkazu create-react-app. Tu vyberiem názov „reactproject“ pre svoj projekt.

 C:Usersjavatpoint> create-react-app reactproject 

POZNÁMKA:Vyššie uvedené dva kroky môžeme spojiť do jedného príkazu pomocounpx. npx je nástroj na spúšťanie balíkov, ktorý sa dodáva s verziou npm 5.2 a vyššou.

 C:Usersjavatpoint> npx create-react-app reactproject 

Vyššie uvedený príkaz bude chvíľu trvať, kým sa nainštaluje React a vytvorí sa nový projekt s názvom 'reactproject.' Teraz vidíme terminál ako nižšie.

Vyššie uvedená obrazovka hovorí, že projekt React je úspešne vytvorený v našom systéme. Teraz musíme spustiť server, aby sme mali prístup k aplikácii v prehliadači. V okne terminálu zadajte nasledujúci príkaz.

 $ cd Desktop $ npm start 

NPM je správca balíkov, ktorý spúšťa server a pristupuje k aplikácii na predvolenom serveri http://localhost:3000. Teraz dostaneme nasledujúcu obrazovku.

Potom otvorte projekt v editore kódu. Tu používam Visual Studio Code. Predvolená štruktúra nášho projektu vyzerá ako na obrázku nižšie.

V aplikácii React je v koreňovom adresári niekoľko súborov a priečinkov. Niektoré z nich sú nasledovné:

node_modules:Obsahuje knižnicu React a akékoľvek ďalšie potrebné knižnice tretích strán.verejné:Vlastní verejný majetok aplikácie. Obsahuje index.html, kde React štandardne pripojí aplikáciu k prvku.src:Obsahuje súbory App.css, App.js, App.test.js, index.css, index.js a serviceWorker.js. Tu je súbor App.js vždy zodpovedný za zobrazenie výstupnej obrazovky v React.package-lock.json:Generuje sa automaticky pre všetky operácie, kde balík npm upravuje strom node_modules alebo package.json. Nedá sa zverejniť. Ak nájde iné miesto ako balík najvyššej úrovne, bude sa ignorovať.package.json:Obsahuje rôzne metadáta potrebné pre projekt. Poskytuje informácie npm, čo umožňuje identifikovať projekt, ako aj zvládnuť závislosti projektu.README.md:Poskytuje dokumentáciu na čítanie o témach React.

React Environment Setup

Teraz otvorte src >> App.js súbor a vykonajte zmeny, ktoré chcete zobraziť na obrazovke. Po vykonaní požadovaných zmien uložiť súbor. Hneď ako súbor uložíme, Webpack prekompiluje kód a stránka sa automaticky obnoví a zmeny sa prejavia na obrazovke prehliadača. Teraz môžeme vytvoriť toľko komponentov, koľko chceme, importovať novovytvorený komponent do App.js súbor a tento súbor bude zahrnutý do nášho hlavného index.html súbor po kompilácii pomocou Webpack.

Ďalej, ak chceme vytvoriť projekt pre produkčný režim, zadajte nasledujúci príkaz. Tento príkaz vygeneruje produkčnú zostavu, ktorá je najlepšie optimalizovaná.

 $ npm build