Lekce 2 - Vytvoření React projektu
V minulé lekci, Úvod do React, jsme si představili knihovnu React a popsali její základní vlastnosti.
V dnešním React tutoriálu si vytvoříme svou první
React aplikaci pomocí nástroje npm
. Vysvětlíme si, jak se
spouští, a popíšeme si její vnitřní strukturu.
React aplikace obsahují více souborů, dílčích knihoven a nastavení (např. překladače Babel pro podporu JSX). Proto se nevytvářejí ručně, ale generují pomocí příkazu Create React App. Pro spuštění tohoto příkazu potřebujeme prostředí Node.js.
Node.js
Node.js je prostředí umožňující spouštět javascriptové aplikace mimo webový prohlížeč. Aplikace tak mohou mít přístup k lokálním souborům a tak např. vygenerovat nový React projekt. Node.js se často používá také na tvorbu serverové části webových aplikací. Jeho výhodou je, že dokáže zpracovat velké množství současných připojení, což je užitečné zejména pro obsluhu různých služeb s různou dobou odezvy. Node.js navíc umožňuje instalovat javascriptové balíčky, čímž můžeme do svých React projektů jednoduše přidávat další knihovny. A my již víme, že React se velmi často používá s více knihovnami.
Instalace Node.js
Pokud Node.js ještě nemáme nainstalované, stáhneme si instalátor pro náš operační systém z https://nodejs.org/ a nainstalujeme podle pokynů instalátoru:
V kurzu si zmíníme jen základní ovládání Node.js, které potřebujeme pro práci s React projekty. Pokud se chcete o Node.js dozvědět více, přejděte na samostatný kurz Node.js.
Příkazový řádek
Pomocí Node.js nyní spustíme příkaz Create React App v naší složce s projekty (to je jakákoli složka, kde chceme mít uložené React projekty). Ve Windows jsou hned tři aplikace, které nám umožňují příkazy spouštět:
- Příkazový řádek - nejstarší
- PowerShell
- Terminal - nejnovější, mix dvou výše uvedených
Jednu z těchto aplikací potřebujeme spustit a přejít do naší složky s projekty. To nejjednodušeji uděláme kliknutím pravým tlačítkem myši na naší složku s projekty v průzkumníku Windows za držení klávesy Shift. Výsledkem bude zobrazení kontextového menu, kde bude díky držení Shift navíc volba Otevřít zde okno Power Shell (Win 10) nebo Otevřít v aplikaci Terminal (Win 11):
Po kliknutí na volbu se spustí okno příkazového řádku:
Windows PowerShell PS C:\Users\sdrac\Dropbox>
Obsah i vzhled konzole se bude lišit v závislosti na
operačním systému. Důležité je, aby cesta končila složkou, ve které si
přejeme projekt založit (v ukázce výše bude projekt vytvořen ve složce
Dropbox/
). Pro projekt se vytvoří nová samostatná složka.
Balíčkovací systémy npm
a npx
Společně s Node.js jde ruku v ruce i balíčkovací ekosystém npm. Je přímo součástí standardní instalace Node.js, takže i vy ho nyní již máte k dispozici. Ovládá se právě pomocí příkazové řádky nebo i v rámci IDE.
Není žádnou novinkou, že většina programovacích jazyků má svého správce knihoven a ve světě JavaScriptu je to právě npm. Pomocí něho můžeme obecně vytvářet projekty, instalovat i spravovat závislosti (pro nás React) ve svých projektech, ale také sdílet a distribuovat svůj javascriptový kód.
K vytvoření a spuštění React projektu budeme potřebovat tři příkazy:
npx
- node package execute spouští balíčky npm. Příkaznpx
může spustit libovolný npm balíček, aniž bychom tento balíček instalovali.cd
- change directory změní aktuální složkunpm
- node package manager spravuje všechny balíčky a moduly pro Node.js a umožní nám projekt spustit.
Vytvoření projektu
V příkazovém řádku spustíme v naší složce příkaz npx
s těmito parametry:
Windows PowerShell PS C:\Users\sdrac\Dropbox> npx create-react-app@^5.0.1 helloworld
Příkaz si můžete zkopírovat z lekce a do příkazového řádku jej vložit pravým tlačítkem myši.
Uvedením parametru @^5.0.1
vynutíme určitou verzi příkazu
Create React App (tato vytvoří projekt s React verze 18). Tím si zajistíte,
že budete používat tu stejnou verzi React, pro kterou je kurz v současné
době odladěný. Parametr helloworld
je potom název nového React
projektu, který si přejeme vytvořit.
Nyní počkáme na dokončení instalace, což bude chvíli trvat:
Přechod do složky
Jakmile skript doběhne, vytvoří se nám ve složce s projekty nová
složka helloworld/
a v ní spoustu dalších souborů a složek.
Zůstaneme v příkazovém řádku a do této složky přejdeme pomocí
příkazu cd
:
Windows PowerShell PS C:\Users\sdrac\Dropbox> cd helloworld
Spuštění projektu
Pro spuštění projektu stačí uvnitř složky s projektem
(helloworld/
) zadat příkaz npm start
:
Ten nám tedy spustí naši aplikaci v rámci lokálního serveru,
standardně na adrese http://localhost:3000/
. Rovnou ji také
otevře ve výchozím prohlížeči. Výsledek hned po instalaci by měl vypadat
nějak takto:
To, co jsme nainstalovali, je kompletní základ React aplikace poháněný lokálním serverem a s podporou kontinuálního překladu JSX. Ten nám mimo jiné nabízí možnost sestavit finální verzi aplikace pro produkční prostředí.
Server navíc během svého běhu hlídá změny v souborech aplikace a pokud se něco změní, automaticky aplikaci znovu načte. Nám tedy stačí pouze upravovat kód a instantně uvidíme výsledky našich změn přímo v prohlížeči.
K zastavení serveru v příkazovém řádku můžeme pak použít klávesovou zkratku Ctrl + C.
Visual Studio Code
V kurzu budeme používat editor s pokročilými funkcemi - Visual Studio Code. Ještě větší možnosti pak poskytuje IDE WebStorm, které je však placené. Oba tyto nástroje nám při programování velice usnadní práci. Pokud žádný z nich nemáte nainstalovaný, nainstalujte si jej prosím nyní.
Struktura React projektu
Složku helloworld/
si nyní otevřeme ve VS Code (klikneme na
ni pravým tlačítkem myši v Průzkumníku Windows a zvolíme možnost
Otevřít v Code):
Projekt má několik podsložek a souborů, které si nyní popíšeme. Pro nás důležité soubory a složky jsou vypsané tučně:
- 📁
node_modules/
- Nainstalované nástroje pro naší aplikaci, které si ukládá npx (Node.js). - 📁
public/
- Složka pro umisťování veřejně dostupných zdrojů jako jeindex.html
a dále např. obrázky apod.index.html
- HTML dokument s elementem#root
, do kterého se vloží hlavní komponenta.
- 📁
src/
- Zdrojový kód, aplikace má zatím jednu komponentuApp
.App.css
- CSS styly.App.js
- Kód hlavní komponenty aplikace, s tou budeme za chvíli pracovat.index.js
- Soubor, který zavádí React komponentu naší aplikace do HTML struktury....
- Další, pro nás momentálně nepodstatné soubory naší aplikace, které je možné i promazat.
package.json
- Definuje, jaké balíčky v jakých verzích aplikace používá.README.md
- Dokumentace aplikace.
V příští lekci, První React komponenta - Hello World, si vytvoříme první React komponentu
HelloWorld
, která do stránky vloží nadpis
<h1>
.
Měl jsi s čímkoli problém? Zdrojový kód vzorové aplikace je ke stažení každých pár lekcí. Zatím pokračuj dál, a pak si svou aplikaci porovnej se vzorem a snadno oprav.