Nastavení projektu React pomocí Create React App

React je jednou z nejpopulárnějších JavaScriptových knihoven pro vývoj front-endových aplikací. Je to open-source knihovna, kterou původně vyvinul Facebook. React se rychle stal populárním pro vytváření rychlých aplikací s JSX – programovacím paradigmatem, které kombinuje JavaScript se syntaxí podobnou HTML.

V minulosti bylo nastavení projektu v Reactu složitým procesem. Vyžadovalo to ruční konfiguraci následujících komponent:

• Sestavovací systém
• Transpiler kódu (převádí moderní syntaxi do kódu čitelného pro prohlížeče)
• Základní adresářová struktura projektu

Naštěstí jsou tyto dny již dávno pryč, a to díky Create React App. Je to skvělý nástroj, který všechny tyto kroky automatizuje. Create React App se stará o transpilaci kódu, linting, testování a sestavovací systémy. Navíc je dodáván se serverem, který podporuje hot reloading, což znamená obnovování webových stránek při provádění změn. To vše samozřejmě probíhá v rámci organizované adresářové struktury.

Zkrátka není třeba procházet ruční prací s konfigurací sestavovacích systémů jako Webpack, nebo transpilerů jako Babel. S méně věcmi, o které se musíte starat, se můžete plně soustředit na front-endový vývoj. Create React App vám umožní začít s Reactem s minimální přípravou.

V tomto návodu si ukážeme, jak používat Create React App a zprovoznit základní aplikaci v Reactu. Může sloužit jako základ pro jakýkoli budoucí projekt aplikace.

Požadavky

Chcete-li provést kroky popsané v tomto návodu, budete muset mít předem nakonfigurovaný následující software.

• • Správně nakonfigurovaný Ubuntu server. Můžete postupovat podle kroků konfigurace serveru Ubuntu na CloudSigma.
  • Nejnovější verze Node.js nainstalována. Zde je podrobný návod na instalaci Node.js na Ubuntu.

Krok 1: Vytvoření vyhrazeného adresáře projektu npm

Pro balíčky Node.js je npm výchozím správcem balíčků. Použijeme npm k vytvoření vyhrazeného adresáře projektu. Ten bude obsahovat důležité soubory jako package.json, které ukládají všechna metadata o projektu a další moduly závislostí Node.js. JSON je standardní formát sdílení dat založený na objektech JavaScriptu. Podívejte se na tento návod, pokud se chcete o JSON dozvědět více.

Nejprve vytvořte vyhrazený adresář:

Dále řekneme npm, aby inicializoval vývojové prostředí uvnitř souboru. Tím se vytvoří package.json soubor potřebný pro projekt. Změňte aktuální adresář:

Spusťte příkaz npm init command:

Upozorňujeme, že pokud chcete, aby byl tento adresář součástí git repozitáře, doporučujeme jej nejprve nastavit. Inicializační skript jej automaticky detekuje a podle toho vše nakonfiguruje. Po dokončení by se v adresáři měl nacházet soubor package.json. Zkontrolujte jej pomocí textového editoru:

Krok 2: Vytvoření projektu React pomocí Create React App

V tomto kroku vyvoláme Create React App, abychom vytvořili náš ukázkový projekt React. Tento skript zkopíruje vše potřebné do nového adresáře spolu se všemi závislostmi. Správce balíčků npm je také dodáván s nástrojem npx. Ten se používá ke spouštění spustitelných balíčků. Použijeme jej ke spuštění skriptu Create React App, aniž bychom projekt skutečně stahovali.

Spuštění provede příkaz create-react-app v určeném adresáři. Spustí také příkazy npm install pro instalaci závislostí. Pro snadnější použití použijeme název cloudsigma-react-react-tutorial. Spusťte následující příkaz:

Na konci procesu uvidíte následující oznámení. Jedná se o zprávu o úspěchu, pokud instalace proběhla úspěšně. Informuje také o umístění, kde byl projekt vytvořen.

Krok 3: Použití React-Scripts

Nyní si stručně představíme různé react-skripty které byly nainstalovány během instalace.

• • Spustíme test skript pro spuštění testovacího kódu.
  • Skript build vytvoří minifikovanou verzi našeho projektu (pro produkční prostředí).
  • A nakonec skript eject nabízí úplnou kontrolu nad přizpůsobením.

Nejprve zkontrolujte obsah adresáře projektu React:

Zde je popis jednotlivých souborů:

• • node_modules/: Tento adresář obsahuje všechny externí JavaScriptové knihovny, které bude aplikace používat. Jen zřídkakdy je nutné zde něco upravovat.
  • public/: Obsahuje základní soubory HTML, JSON a obrázky. Slouží jako kořenový adresář projektu.
  • src/: Tento adresář obsahuje JavaScriptové kódy Reactu pro náš projekt. Zde strávíme většinu času. Podrobněji tento adresář prozkoumáme v další části průvodce.
  • .gitignore: Je to soubor, který popisuje, které adresáře bude git ignorovat, například adresář node_modules. Obecně je lepší vyloučit adresáře, které obsahují velké soubory nebo hostují soubory protokolů, které není nutné zahrnovat do správy verzí. V tomto případě bude obsahovat také některé adresáře specifické pro React.
  • README.md: Je to markdown soubor obsahující spoustu užitečných informací o Create React App. Obsahuje například přehled příkazů a odkazy pro pokročilou konfiguraci. Prozatím s ním nemáme co do činění. Jak však bude projekt postupovat, budete do něj přidávat další dokumentaci o projektu.

Soubory package.json a package-lock.json jsou používány nástrojem npm. Při spuštění počátečního příkazu npx se vytvořil základní projekt. Po instalaci dalších závislostí se vytvořil soubor package-lock.json. npm používá package-lock.json k zajištění toho, aby balíčky odpovídaly přesným verzím. Tímto způsobem, pokud si váš projekt nainstaluje někdo jiný, získá také identické závislosti. Vzhledem k tomu, že se vytváří a spravuje automaticky, málokdy na něj musíte sahat.

Poslední soubor, o kterém si musíme promluvit, je package.json. Obsahuje metadata o projektu. Metadata mohou například zahrnovat název projektu, číslo verze a závislosti. Obsahuje také skripty, které můžete použít ke spuštění projektu. Podívejte se na obsah souboru package.json :

Je to soubor JSON s různými objekty. Podívejte se na objekt scripts. Obsahuje čtyři různé skripty:

• • start
  • build
  • test
  • eject

Tyto skripty jsou seřazeny podle své důležitosti. Skript start spustí lokální vývojový server. Dále si podrobněji vysvětlíme, jak můžete použít zbytek skriptů.

• • Skript Build

Pro spuštění npm skriptu je struktura příkazu následující:

Pro spuštění skriptu build použijte následující příkaz:

Spustí se proces kompilace kódů do použitelného balíčku. Po dokončení zkontrolujte výstupní adresář:

Všimněte si, že je k dispozici nový adresář build/. Obsahuje minifikovanou a optimalizovanou verzi ostatních souborů. Doporučuje se přidat jej do souboru .gitignore, protože jej můžeme kdykoli vygenerovat pomocí skriptu build.

• • Skript Test

Skript test je jedním z těch skriptů, které pro spuštění přes npm nevyžadují parametr run. Nicméně i s ním bude fungovat správně. Po spuštění tento skript spustí testovací nástroj s názvem Jest. Tento nástroj vyhledá jakýkoliv soubor projektu s příponou .spec.js nebo test.js a tyto soubory spustí.

Následující příkaz npm spustí skript test :

Ve výstupu je třeba si všimnout několika věcí. Pamatujete si, že testovací nástroj hledá pouze soubory se specifickými příponami? V tomto případě existuje pouze jedna testovací sada (pouze jeden soubor s .test.js příponu). Obsahuje pouze jeden test. Jest dokáže automaticky detekovat testy v hierarchii kódu, takže můžete testy libovolně vnořovat do adresáře.

Jest navíc nespustí test pouze jednou a neukončí se. Pokračuje v běhu testu v terminálu. Pokud byly ve zdrojovém kódu provedeny nějaké změny, spustí testy znovu. Jest také umožňuje omezit, které testy se mají spustit. Například stisknutím 0 můžete Jestu říct, aby otestoval pouze ty soubory, které byly změněny. Jak se testovací sady rozrůstají, tato možnost ušetří spoustu času. Chcete-li ukončit testovací nástroj Jest, stiskněte q.

• • Skript Eject

Skript eject zkopíruje všechny závislosti a konfigurační soubory do projektu, což vám poskytne plnou kontrolu nad kódem. Tímto krokem však projekt odeberete z integrovaného nástrojového řetězce Create React App. Jakmile jej spustíte, nelze to vrátit zpět.

Výhodou Create React App je, že vás zbaví břemene složitých konfigurací. Sestavení jakékoli moderní JavaScriptové aplikace vyžaduje spoustu společně pracujících nástrojů. Create React App spravuje všechny konfigurace za vás, takže eject projektu znamená, že poté budete muset vše dělat ručně.

Jednou znatelnou nevýhodou Create React App je, že protože spravuje všechny konfigurace sám, nenabízí plné přizpůsobení projektu. Pro většinu projektů to není problém. Pokud však chcete převzít plnou kontrolu nad projektem, budete muset provést eject kódu. Jakmile jej vysunete, nebudete moci aktualizovat na nové verze Create React App. Všechna vylepšení budete muset spravovat ručně.

Krok 4: Spuštění serveru

Nyní spustíme lokální server a spustíme projekt ve webovém prohlížeči. Ke spuštění serveru máme po ruce další skript. Jeho spuštění nevyžaduje npm run příkaz. Po spuštění skript nastartuje lokální server, spustí kód projektu, spustí sledování (watcher) a naslouchá změnám v kódu. Změny se přímo zobrazují v prohlížeči. Následující příkaz spustí server:

Výstup zobrazí URL adresu pro návštěvu projektu v prohlížeči. Zobrazí také různé informace o běžícím projektu. Otevřete tuto URL adresu v prohlížeči:

As the output shows, Create React App uses port 3000 pro obsluhu projektu. Pokud se port již používá, Create React App použije další dostupný port. Pokud máte nakonfigurovaný firewall, musí povolit provoz na portu 3000 (nebo na portu, který nahlásí Create React App). Více informací o správě firewallu UFW se dozvíte zde.

To exit the server, press Ctrl+C v okně terminálu. Tím se ukončí běžící proces (instance serveru).

Krok 5: Úprava domovské stránky

Dále se naučíme, jak upravovat kódy uložené v public/ adresáři. Obsahuje základní HTML stránku a slouží jako kořen projektu. I když jej v budoucnu možná nebudete muset dále upravovat, slouží jako základ projektu.

Nejprve spusťte server pomocí npm, poté přejděte do public/ adresáře:

Adresář bude obsahovat soubory jako favicon.ico, logo192.png, logo512.png, atd. Jedná se o ikony, které uživatel navštěvující webovou stránku uvidí na své záložce, v prohlížeči nebo v telefonu. Prohlížeč automaticky vybere tu se správnou velikostí. Časem je nahradíte ikonami vhodnými pro váš projekt. Prozatím je necháme být.

Soubor manifest.json obsahuje strukturovanou sadu metadata. Popisuje projekt, uvádí dostupné ikony a další.

Soubor robots.txt obsahuje informace pro web crawlers. Weboví roboti “procházejí” World Wide Web, indexují stránky pro vyhledávače. Soubor není nutné upravovat, pokud k tomu nemáte konkrétní důvod. Můžete například chtít, aby určité URL adresy vedoucí ke konkrétnímu obsahu nebyly snadno dostupné. Přidejte toto umístění do robots.txta nebude indexován vyhledávači.

Soubor index.html je kořenem naší aplikace. Kdykoli k aplikaci přistupujete, je to soubor, který se načte. Toto je soubor, který vidíte na obrazovce. Pojďme se na něj rychle podívat. Otevřete jej v textovém editoru:

Je to docela krátký soubor. Všimněte si, že v <body> nejsou žádné obrázky ani slova. React tento obsah vytváří pomocí vlastního jádra a vkládá jej pomocí JavaScriptu. React však potřebuje vědět, kam má kód vložit. Soubor index.html slouží k tomuto účelu.

Změňme <title> na Moje React aplikace:

Poté soubor uložte a zavřete editor. Nyní zkontrolujte webovou stránku v prohlížeči:

Jak vidíte, název karty se změnil na Moje React aplikace. Pokud se nezměnil automaticky, obnovte stránku stisknutím F5 nebo Ctrl+R.

Vraťme se zpět do textového editoru. Všechny projekty v Reactu musí začínat kořenovým prvkem. Na jedné stránce jich může být více než jeden. Alespoň jeden je však povinný. Říká Reactu, kam má umístit všechny vygenerované HTML kódy. V našem index.html, najděte umístění prvku <div id="root">. Je to <div>, který React použije pro budoucí změny. Zkuste změnit id hodnotu z root na base:

 

 

Poté stránku v prohlížeči obnovte. Nezobrazí se žádný obsah. Jak ukazují Vývojářské nástroje ve Firefoxu, dojde k chybě:

Vraťte se do textového editoru a změňte hodnotu id zpět na root:

Krok 6: Značka nadpisu a změny stylů

Dosud jsme spustili lokální server a provedli drobné změny v kořenovém HTML souboru. Nyní budeme pracovat s komponentami Reactu umístěnými v src/ adresáři. Provedeme změny v kódu CSS a JavaScriptu. Změny se automaticky projeví pomocí hot reloadingu.

Pokud byl server zastaven, spusťte jej pomocí npm. Poté se podívejte na obsah src/ adresáře:

Nachází se zde několik souborů JavaScriptu a CSS. Projdeme si je jeden po druhém.

• ServiceWorker.js

Je to důležitý soubor, pokud chcete vytvářet progresivní webové aplikace. Tento service worker nabízí různé funkce, jako jsou push oznámení, offline ukládání do mezipaměti atd. Prozatím jej necháme být.

• SetupTests.js and App.test.js

Jak napovídá název těchto souborů, slouží k testování souborů. Kdykoli jsme spustili skript test pomocí npm, spustil tyto soubory. Soubor setupTests.js obsahuje několik vlastních metod expect.

Pojďme se podívat na App.test.js. Otevřete jej v textovém editoru:

Obsahuje základní test, který hledá frázi learn react, aby byla přítomna v dokumentu. Pokud máte otevřenou kartu prohlížeče, můžete tuto frázi na stránce vidět. Na rozdíl od jiných jednotkových testů jsou testy v Reactu odlišné. Protože komponenty mohou obsahovat vizuální informace, jako je značkování (a logiku pro manipulaci s daty), tradiční jednotkové testování nefunguje snadno. V tomto ohledu lze testování v Reactu lépe popsat jako formu funkčního nebo integračního testování.

• Soubory CSS

K dispozici jsou různé soubory stylů: App.css, index.css a logo.svg. Pro stylování v Reactu můžete použít několik metod. Nejsnadnějším způsobem je psát čisté CSS, protože není vyžadována žádná další konfigurace.

CSS můžete importovat přímo do komponenty. To umožňuje rozdělit soubory CSS tak, aby se vztahovaly pouze na jednotlivé komponenty. Ve skutečnosti neoddělujete CSS od JavaScriptu. Spíše seskupujete všechny relevantní součásti (CSS, JavaScript, obrázky a značkování) dohromady.

Otevřete App.css v textovém editoru:

Jedná se o standardní CSS soubor bez speciálních CSS preprocesorů. Pokud chcete, můžete je přidat později. Create React App se snaží být neutrální a zároveň nabízet skvělé výchozí prostředí.

Udělejme změnu a podívejme se na ni v akci. Změňte hodnotu background-color na blue:

Zkontrolujte změnu v prohlížeči:

• • Index.js

Nyní je čas provést změny v kódu React JavaScriptu. Otevřete index.js pomocí textového editoru:

Nahoře se importuje React, ReactDOM, index.css, App, a serviceWorker. Importováním React, získáváme kód potřebný k převodu JSX na JavaScript. ReactDOM je kód, který propojuje náš kód Reactu se základním prvkem ( index.html, například). Podívejte se na následující řádek:

Instruuje to React, aby našel id s označením root a vložil tam kódy Reactu. <App/> je kořenový prvek a vše ostatní se od něj větví.

Všimněte si, že jsme také importovali soubory CSS (jako index.css) ale ve skutečnosti jsme s nimi nic neudělali. Importováním vlastně říkáme Webpacku prostřednictvím skriptů Reactu, aby zahrnul kódy CSS do výsledného zkompilovaného balíčku. Jinak se styly CSS nezobrazí.

• App.js

Dále se podíváme na App.js. Otevřete jej v textovém editoru:

 

Podívejme se, jak změna jeho obsahu ovlivní náš projekt. Změňte obsah tagu <p>:

Poté soubor uložte a zkontrolujte změny v prohlížeči:

Voila! Provedli jste své první úpravy komponenty React!

Je tu ještě jedna věc, které si musíte všimnout. Podívejte se na prvek <img>:

Všimněte si, že logo se předává ve složených závorkách. Kdykoli se předávají atributy (které nejsou řetězce nebo čísla), musí být předány ve složených závorkách. React s nimi pak bude zacházet jako s objekty JavaScriptu namísto řetězců.

V tomto případě aplikace obrázek ve skutečnosti neimportuje. Místo toho se jedná o odkaz na obrázek. Když Webpack sestaví projekt, umístí obrázek na příslušné místo. Můžeme to ověřit v prohlížeči. Otevřete Vývojářské nástroje ve Firefoxu:

Webpack chce všem obrázkům přiřadit jedinečné cesty k souborům. Takže i když byly obrázky importovány se stejným názvem, budou mít různé cesty.

Step 7: Project Building

V tomto kroku se naučíme, jak zkompilovat projekt do balíčku připraveného k nasazení. Spusťte terminál a spusťte build skript projektu:

Kompilátor vytvoří vyhrazený adresář build/, kam umístí výstup. Chcete-li vidět, co proces kompilace dělá, otevřete index.html soubor ze složky build/:

Jak vidíte, všechny kódy jsou zkompilovány a minifikovány do nejmenšího použitelného stavu. Čitelnost není problém, protože se nejedná o kód určený pro veřejnost. Minifikované kódy zabírají méně místa a zároveň si zachovávají všechny své funkce. Na rozdíl od jazyků, kde jsou bílé znaky velmi důležité (například Python), webové jazyky (HTML, CSS a JavaScript) nevyžadují správné mezery, aby je prohlížeč mohl interpretovat.

Závěrečné myšlenky

V této příručce jsme úspěšně předvedli, jak vytvořit aplikaci React. Ukázali jsme si také některé základní konfigurace pomocí nástrojů pro sestavení JavaScriptu bez složitých technických detailů. To je hlavní hodnota, kterou Create React App nabízí. Abyste mohli začít s Reactem, nemusíte vědět všechno. Nemusíte se učit složité kroky sestavení a můžete se soustředit výhradně na kód Reactu.

Zde jsme také předvedli, jak spustit, otestovat a sestavit projekt React. Tyto příkazy jsou zásadní pro projekty všech velikostí.

Příjemnou práci s počítačem!