Zahájení nového projektu React je velmi komplikované, s tolika nástroji pro tvorbu. Před napsáním jediného řádku kódu React používá mnoho závislostí, konfiguračních souborů a dalších požadavků, jako je Babel, Webpack, ESLint. Nástroj Create React App CLI odstraňuje všechny tyto složitosti a zjednodušuje aplikaci React. Chcete-li to provést, musíte nainstalovat balíček pomocí NPM a poté spustit několik jednoduchých příkazů, abyste získali nový projekt React.

The create-react-app je vynikající nástroj pro začátečníky, který vám umožní vytvořit a spustit projekt React velmi rychle. Nevyžaduje žádnou ruční konfiguraci. Tento nástroj zabalí všechny požadované závislosti jako Webpack , Babel pro samotný projekt React a pak se musíte soustředit pouze na psaní kódu React. Tento nástroj nastavuje vývojové prostředí, poskytuje vynikající vývojářské prostředí a optimalizuje aplikaci pro produkci.

Požadavky

Aplikaci Create React spravuje Facebook a může fungovat na jakémkoli plošina , například macOS, Windows, Linux atd. Chcete-li vytvořit projekt React pomocí create-react-app, musíte mít ve svém systému nainstalované následující věci.

1. Verze uzlu >= 8.10
2. Verze NPM >= 5.6

Pojďme zkontrolovat aktuální verzi Uzel a NPM v systému.

Spusťte následující příkaz a zkontrolujte verzi uzlu na příkazovém řádku.

 $ node -v 

Spusťte následující příkaz a zkontrolujte verzi NPM na příkazovém řádku.

 $ npm -v 

Instalace

Zde se naučíme, jak můžeme nainstalovat React pomocí CRA nástroj. K tomu musíme postupovat podle níže uvedených kroků.

Nainstalujte React

React můžeme nainstalovat pomocí správce balíčků npm pomocí následujícího příkazu. Není třeba se obávat složitosti instalace Reactu. Správce balíčků create-react-app npm bude spravovat vše, co je potřeba pro projekt React.

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

Vytvořte nový projekt React

Jakmile je instalace React úspěšná, můžeme vytvořit nový projekt React pomocí příkazu create-react-app. Zde si pro svůj projekt vyberu název „reactproject“.

 C:Usersjavatpoint> create-react-app reactproject 

POZNÁMKA:Výše uvedené dva kroky můžeme spojit v jediném příkazu pomocínpx. npx je nástroj pro spouštění balíčků, který je dodáván s verzí npm 5.2 a vyšší.

 C:Usersjavatpoint> npx create-react-app reactproject 

Výše uvedený příkaz bude nějakou dobu trvat, než nainstalujete React a vytvoříte nový projekt s názvem 'reactproject.' Nyní vidíme terminál jako níže.

Výše uvedená obrazovka říká, že projekt React je v našem systému úspěšně vytvořen. Nyní musíme spustit server, abychom měli přístup k aplikaci v prohlížeči. V okně terminálu zadejte následující příkaz.

 $ cd Desktop $ npm start 

NPM je správce balíčků, který spouští server a přistupuje k aplikaci na výchozím serveru http://localhost:3000 . Nyní se nám zobrazí následující obrazovka.

Dále otevřete projekt v editoru kódu. Zde používám Visual Studio Code. Výchozí struktura našeho projektu vypadá jako na obrázku níže.

V aplikaci React je v kořenovém adresáři několik souborů a složek. Některé z nich jsou následující:

node_modules:Obsahuje knihovnu React a jakékoli další potřebné knihovny třetích stran.veřejnost:Drží veřejný majetek aplikace. Obsahuje index.html, kde React standardně připojí aplikaci k prvku.src:Obsahuje soubory App.css, App.js, App.test.js, index.css, index.js a serviceWorker.js. Zde je soubor App.js vždy zodpovědný za zobrazení výstupní obrazovky v Reactu.package-lock.json:Generuje se automaticky pro všechny operace, kde balíček npm upravuje strom node_modules nebo package.json. Nelze jej zveřejnit. Pokud najde jiné místo než balíček nejvyšší úrovně, bude ignorován.package.json:Obsahuje různá metadata potřebná pro projekt. Poskytuje informace do npm, což umožňuje identifikovat projekt a také zvládnout závislosti projektu.README.md:Poskytuje dokumentaci ke čtení o tématech React.

React nastavení prostředí

Nyní otevřete src >> App.js soubor a proveďte změny, které chcete zobrazit na obrazovce. Po provedení požadovaných změn Uložit soubor. Jakmile soubor uložíme, Webpack znovu zkompiluje kód a stránka se automaticky obnoví a změny se projeví na obrazovce prohlížeče. Nyní můžeme vytvořit tolik komponent, kolik chceme, importovat nově vytvořenou komponentu dovnitř App.js a tento soubor bude zahrnut do našeho hlavního index.html soubor po kompilaci pomocí Webpack.

Dále, pokud chceme vytvořit projekt pro produkční režim, zadejte následující příkaz. Tento příkaz vygeneruje produkční sestavení, které je nejlépe optimalizováno.

 $ npm build