NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

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:

Základy React

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:

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):

Kontextové menu v průzkumníku Windows - Základy React

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říkaz npx může spustit libovolný npm balíček, aniž bychom tento balíček instalovali.
  • cd - change directory změní aktuální složku
  • npm - 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:

Založení nového React projektu - Základy React

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:

Spuštění React projektu - Základy React

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:

React App
localhost:3000

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):

Základy React

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 je index.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 komponentu App.
    • 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.

Předchozí článek
Úvod do React
Všechny články v sekci
Základy React
Přeskočit článek
(nedoporučujeme)
První React komponenta - Hello World
Článek pro vás napsal Jindřich Máca
Avatar
Uživatelské hodnocení:
425 hlasů
Autor se věnuje převážně webovým technologiím, ale má velkou zálibu ve všem vědeckém, nejen ze světa IT. :-)
Aktivity