Nastavenie projektu React pomocou Create React App

React je jednou z najpopulárnejších JavaScriptových knižníc na vývoj front-endových aplikácií. Je to open-source knižnica, ktorú pôvodne vyvinul Facebook. React sa rýchlo stal populárnym na vytváranie rýchlych aplikácií pomocou JSX – programovacia paradigma, ktorá kombinuje JavaScript so syntaxou podobnou HTML.

V minulosti bolo nastavenie projektu React zložitým procesom. Vyžadovalo si to manuálnu konfiguráciu nasledujúcich komponentov:

• Zostavovací systém
• Transpiler kódu (prevádza modernú syntax na kód čitateľný pre prehliadač)
• Základná adresárová štruktúra projektu

Našťastie sú tieto dni už dávno preč, a to vďaka Create React App. Je to skvelý nástroj, ktorý automatizuje všetky tieto kroky. Create React App sa stará o transpiláciu kódu, linting, testovanie a zostavovacie systémy. Okrem toho prichádza so serverom, ktorý podporuje hot reloading, čo znamená obnovovanie webových stránok pri vykonaní zmien. Všetko toto sa samozrejme deje v rámci organizovanej adresárovej štruktúry.

Skrátka, nemusíte prechádzať manuálnou prácou s konfiguráciou zostavovacích systémov ako Webpack, alebo transpilera ako Babel. Keďže sa nemusíte starať o toľko vecí, môžete sa plne sústrediť na front-endový vývoj. Create React App vám umožní začiť s Reactom s minimálnou prípravou.

V tomto návode ukážeme, ako používať Create React App a spustiť základnú aplikáciu React. Môže slúžiť ako základ pre akýkoľvek budúci projekt aplikácie.

Požiadavky

Na vykonanie krokov predvedených v tomto návode budete musieť mať vopred nakonfigurovaný nasledujúci softvér.

• • Správne nakonfigurovaný Ubuntu server. Môžete postupovať podľa krokov konfigurácie Ubuntu servera na CloudSigma.
  • Nainštalovanú najnovšiu verziu Node.js. Tu je podrobný návod na inštaláciu Node.js na Ubuntu.

Krok 1: Vytvorenie vyhradeného adresára pre projekt npm

Pre balíky Node.js je predvoleným správcom balíkov npm. Na vytvorenie vyhradeného adresára projektu použijeme npm. Bude obsahovať dôležité súbory ako package.json, ktoré ukladajú všetky metadáta o projekte a ďalšie moduly závislostí Node.js. JSON je štandardný formát zdieľania dát založený na objektoch JavaScriptu. Pozrite si tento návod, ak sa chcete o JSON dozvedieť viac.

Najprv vytvorte vyhradený adresár:

Ďalej povieme npm, aby inicioval vývojové prostredie vo vnútri súboru. Vytvorí to súbor package.json potrebný pre projekt. Zmeňte aktuálny adresár:

Spustite príkaz npm init:

Upozorňujeme, že ak chcete, aby bol tento adresár súčasťou repozitára git, odporúča sa ho najprv nastaviť. Inicializačný skript ho automaticky deteguje a všetko podľa toho nakonfiguruje. Po dokončení by mal byť v adresári súbor package.json. Skontrolujte ho pomocou textového editora:

Krok 2: Vytvorenie projektu React pomocou Create React App

V tomto kroku vyvoláme Create React App na vytvorenie nášho ukážkového projektu React. Tento skript skopíruje všetko potrebné do nového adresára spolu so všetkými závislosťami. Správca balíkov npm prichádza aj s nástrojom npx. Používa sa na spúšťanie spustiteľných balíkov. Použijeme ho na spustenie skriptu Create React App bez toho, aby sme projekt skutočne sťahovali.

Spustenie spustí create-react-app v zadanom adresári. Spustí tiež príkazy npm install na inštaláciu závislostí. Pre jednoduchosť použitia budeme používať názov cloudsigma-react-react-tutorial. Spustite nasledujúci príkaz:

Na konci procesu uvidíte nasledujúce upozornenie. Je to správa o úspechu, ak inštalácia prebehla úspešne. Informuje tiež o umiestnení, kde bol projekt vytvorený.

Krok 3: Použitie React-Scripts

Teraz si stručne predstavíme rôzne react-scripts, ktoré boli nainštalované počas inštalácie.

• • Spustíme test skript na spustenie testovacieho kódu.
  • Skript build vytvorí minifikovanú verziu nášho projektu (pre produkčné prostredie).
  • Nakoniec skript eject ponúka úplnú kontrolu nad prispôsobením.

Najprv skontrolujte obsah adresára projektu React:

Tu je popis jednotlivých súborov:

• • node_modules/: Tento adresár obsahuje všetky externé JavaScriptové knižnice, ktoré bude aplikácia používať. Málokedy je potrebné tu niečo upravovať.
  • public/: Obsahuje základné súbory HTML, JSON a obrázky. Slúži ako koreňový adresár projektu.
  • src/: Tento adresár obsahuje JavaScriptové kódy Reactu pre náš projekt. Tu strávime väčšinu času. Tento adresár podrobnejšie preskúmame v ďalšej časti príručky.
  • .gitignore: Je to súbor, ktorý popisuje, ktoré adresáre bude git ignorovať, napríklad adresár node_modules. Vo všeobecnosti je lepšie vylúčiť adresáre, ktoré obsahujú veľké súbory alebo hostujú logovacie súbory, ktoré nie je potrebné zahŕňať do správy verzií. V tomto prípade bude obsahovať aj niektoré adresáre špecifické pre React.
  • README.md: Je to markdown súbor obsahujúci množstvo užitočných informácií o Create React App. Obsahuje napríklad prehľad príkazov a odkazy na pokročilú konfiguráciu. Nateraz s ním nemáme nič spoločné. Postupom času však doň budete pridávať ďalšiu dokumentáciu o projekte.

Súbory package.json a package-lock.json používa npm. Pri spustení počiatočného príkazu npx sa vytvoril základný projekt. Po nainštalovaní ďalších závislostí sa vytvoril súbor package-lock.json. npm používa package-lock.json na zabezpečenie toho, aby balíky presne zodpovedali verziám. Týmto spôsobom, ak si váš projekt nainštaluje niekto iný, získa identické závislosti. Keďže sa vytvára a spravuje automaticky, málokedy sa ho musíte dotknúť.

Posledný súbor, o ktorom si musíme hovoriť, je package.json. Obsahuje metadáta o projekte. Metadáta môžu zahŕňať napríklad názov projektu, číslo verzie a závislosti. Obsahuje tiež skripty, ktoré môžete použiť na spustenie projektu. Pozrite si obsah súboru package.json file:

Je to súbor JSON s rôznymi objektmi. Pozrite sa na objekt scripts. Obsahuje štyri rôzne skripty:

• • start
  • build
  • test
  • eject

Tieto skripty sú zoradené podľa dôležitosti. Skript start spúšťa lokálny vývojový server. Ďalej si podrobnejšie vysvetlíme, ako môžete použiť zvyšné skripty.

• • Skript Build

Na spustenie npm skriptu je štruktúra príkazu nasledovná:

Na spustenie skriptu build použite nasledujúci príkaz:

Spustí sa proces kompilácie kódov do použiteľného balíka. Po dokončení skontrolujte výstupný adresár:

Všimnite si, že je k dispozícii nový adresár build/. Obsahuje minifikovanú a optimalizovanú verziu ostatných súborov. Odporúča sa pridať ho do súboru .gitignore, pretože ho môžeme kedykoľvek vygenerovať pomocou skriptu build script.

• • Skript Test

Skript test je jedným z tých skriptov, ktoré na spustenie cez npm nevyžadujú parameter run. Napriek tomu s ním bude fungovať správne. Po spustení tento skript spustí testovací nástroj s názvom Jest. Tester vyhľadá akýkoľvek súbor projektu s príponami .spec.js alebo test.js a tieto súbory spustí.

Nasledujúci príkaz npm spustí skript test script:

Vo výstupe si treba všimnúť niekoľko vecí. Pamätáte si, že testovací nástroj hľadá iba súbory so špecifickými príponami? V tomto prípade existuje iba jedna testovacia sada (iba jeden súbor s .test.js príponu). Obsahuje iba jeden test. Jest dokáže automaticky detegovať testy v hierarchii kódu, takže testy môžete ľubovoľne vnárať do adresára.

Okrem toho Jest nespustí test len raz a neskončí. Pokračuje v spúšťaní testu v termináli. Ak sa v zdrojovom kóde vykonali nejaké zmeny, testy sa spustia znova. Jest tiež umožňuje obmedziť, ktoré testy sa majú spustiť. Napríklad stlačením klávesu 0 môžete Jestu povedať, aby otestoval iba tie súbory, ktoré boli zmenené. S rastúcim počtom testovacích sád táto možnosť šetrí veľa času. Ak chcete ukončiť spúšťač testov Jest, stlačte q.

• • Skript Eject

Skript eject skopíruje všetky závislosti a konfiguračné súbory do projektu, čo vám poskytne plnú kontrolu nad kódom. Týmto krokom však projekt odstránite z integrovaného nástrojového reťazca Create React App. Po spustení už neexistuje spôsob, ako to vrátiť späť.

Výhodou Create React App je, že vás zbaví bremena početných konfigurácií. Sprevádzkovanie akejkoľvek modernej JavaScriptovej aplikácie vyžaduje množstvo nástrojov pracujúcich v súčinnosti. Create React App spracuje všetky konfigurácie za vás, takže vysunutie (eject) projektu znamená, že potom musíte všetko robiť manuálne.

Jednou z výrazných nevýhod Create React App je, že keďže spravuje všetky konfigurácie sám, neponúka plnú prispôsobiteľnosť projektu. Pre väčšinu projektov to nie je problém. Ak však chcete získať plnú kontrolu nad projektom, budete musieť kód vysunúť (eject). Po vysunutí nebudete môcť aktualizovať na nové verzie Create React App. Všetky vylepšenia musíte spravovať manuálne.

Krok 4: Spustenie servera

Teraz spustíme lokálny server a spustíme projekt vo webovom prehliadači. Na spustenie servera máme k dispozícii ďalší skript. Jeho spustenie nevyžaduje príkaz npm run príkaz. Po spustení skript naštartuje lokálny server, spustí kód projektu, spustí sledovač (watcher) a počúva zmeny v kóde. Zmeny sa priamo zobrazujú v prehliadači. Nasledujúci príkaz spustí server:

Výstup zobrazí URL adresu na návštevu projektu v prehliadači. Zobrazí tiež rôzne informácie o spustenom projekte. Otvorte URL adresu v prehliadači:

Ako ukazuje výstup, Create React App používa port 3000 na obsluhu projektu. Ak sa port už používal, Create React App použije ďalší voľný port. Ak máte nakonfigurovaný firewall, musí povoliť prevádzku na port 3000 (alebo port, ktorý nahlási Create React App). Viac o správe firewallu UFW sa dozviete tu.

Ak chcete ukončiť server, stlačte Ctrl+C v okne terminálu. Tým sa ukončí spustený proces (inštancia servera).

Krok 5: Úprava domovskej stránky

Ďalej sa naučíme, ako upravovať kódy uložené v adresári public/. Obsahuje základnú HTML stránku a slúži ako koreň projektu. Aj keď ho v budúcnosti možno nebudete musieť ďalej upravovať, slúži ako základ projektu.

Najprv spustite server pomocou npm, potom prejdite do adresára public/ :

Adresár bude obsahovať súbory ako favicon.ico, logo192.png, logo512.png, atď. Ide o ikony, ktoré by používateľ navštevujúci webovú stránku videl na svojej karte, v prehliadači alebo v telefóne. Prehliadač automaticky vyberie ikonu správnej veľkosti. Časom ich nahradíte ikonami vhodnými pre váš projekt. Nateraz ich necháme tak.

Súbor manifest.json obsahuje štruktúrovanú sadu metadát. Popisuje projekt, uvádza dostupné ikony a ďalšie informácie.

Súbor robots.txt obsahuje informácie pre webové vyhľadávače. Webové vyhľadávače prechádzajú (“crawl”) po celom webe a indexujú stránky pre vyhľadávače. Súbor netreba upravovať, pokiaľ na to nemáte konkrétny dôvod. Môžete napríklad chcieť, aby určité URL adresy s konkrétnym obsahom neboli ľahko prístupné. Pridajte umiestnenie do robots.txta vyhľadávače ho nebudú indexovať.

Súbor index.html je koreňom našej aplikácie. Pri každom prístupe k aplikácii sa poskytuje tento súbor. Toto je súbor, ktorý vidíte na obrazovke. Poďme sa naň rýchlo pozrieť. Otvorte ho v textovom editore:

Je to dosť krátky súbor. Všimnite si, že v nie je žiadny obrázok ani slová<body>. React zostavuje tento obsah pomocou vlastného enginu a vkladá ho pomocou JavaScriptu. React však potrebuje vedieť, kam má kód vložiť. Súbor index.html slúži na tento účel.

Zmeňme <title> na Moja React aplikácia:

Potom súbor uložte a zatvorte editor. Teraz skontrolujte webovú stránku v prehliadači:

Ako môžete vidieť, názov karty sa zmenil na Moja React aplikácia. Ak sa nezmenil automaticky, znova načítajte stránku stlačením F5 alebo Ctrl+R.

Vráťme sa späť do textového editora. Všetky projekty React musia začínať od koreňového prvku. Na jednej stránke ich môže byť viac ako jeden. Aspoň jeden je však povinný. Hovorí Reactu, kam má umiestniť všetky vygenerované HTML kódy. V našom súbore index.html, nájdite umiestnenie prvku <div id="root">. Je to <div>, ktorý bude React používať pre budúce zmeny. Skúste zmeniť hodnotu id z root na base:

 

 

Potom znova načítajte stránku v prehliadači. Nezobrazí sa žiadny obsah. Ako ukazuje Web Developer Tools vo Firefoxe, vyhodí to chybu:

Vráťte sa do textového editora a zmeňte hodnotu id späť na root:

Krok 6: Zmeny značky nadpisu a štýlovania

Doteraz sme spustili lokálny server a vykonali malé zmeny v koreňovom HTML súbore. Teraz budeme pracovať s komponentmi Reactu umiestnenými v adresári src/ . Vykonáme zmeny v kóde CSS a JavaScriptu. Zmeny sa automaticky aplikujú pomocou hot reloadingu.

Ak bol server zastavený, spustite ho pomocou npm. Potom sa pozrite na obsah adresára src/ :

Nachádza sa tu viacero súborov JavaScriptu a CSS. Prejdeme si ich jeden po druhom.

• ServiceWorker.js

Je to dôležitý súbor, ak chcete vytvárať progresívne webové aplikácie. Tento service worker ponúka rôzne funkcie, ako sú push notifikácie, offline ukladanie do vyrovnávacej pamäte atď. Nateraz ho necháme tak.

• SetupTests.js and App.test.js

Ako napovedá názov týchto súborov, používajú sa na testovanie súborov. Vždy, keď sme spustili skript test pomocou npm, spustil tieto súbory. Súbor setupTests.js obsahuje niekoľko vlastných expect metód.

Pozrime sa na App.test.js. Otvorte ho v textovom editore:

Obsahuje základný test, ktorý hľadá frázu learn react v dokumente. Ak máte otvorenú kartu prehliadača, túto frázu môžete vidieť na stránke. Na rozdiel od iných unit testov sú testy Reactu odlišné. Keďže komponenty môžu obsahovať vizuálne informácie, ako je markup (a logiku na manipuláciu s dátami), tradičné unit testovanie nefunguje jednoducho. V tomto ohľade sa testovanie Reactu lepšie popisuje ako forma funkčného alebo integračného testovania.

• CSS Files

K dispozícii sú rôzne súbory so štýlmi: App.css, index.css, a logo.svg. Na štýlovanie v Reacte môžete použiť viacero metód. Najjednoduchším spôsobom je písať čisté CSS, pretože nie je potrebná žiadna dodatočná konfigurácia.

CSS môžete importovať priamo do komponentu. To umožňuje rozdeliť CSS súbory tak, aby sa vzťahovali len na jednotlivé komponenty. V skutočnosti neoddeľujete CSS od JavaScriptu. Skôr zoskupujete všetky relevantné súčasti (CSS, JavaScript, obrázky a markup) dohromady.

Otvorte App.css v textovom editore:

Je to štandardný CSS súbor bez špeciálnych CSS preprocesorov. Ak chcete, môžete ich pridať neskôr. Create React App sa snaží byť neutrálny a zároveň ponúkať solídne predvolené prostredie.

Urobme zmenu a pozrime sa na ňu v akcii. Zmeňte hodnotu farby-pozadia na modrú:

Skontrolujte zmenu v prehliadači:

• • Index.js

Teraz je čas vykonať zmeny v kóde React JavaScriptu. Otvorte index.js pomocou textového editora:

Na vrchu importuje React, ReactDOM, index.css, App, a serviceWorker. Importovaním React, získavame kód potrebný na konverziu JSX na JavaScript. ReactDOM je kód, ktorý spája náš kód React so základným prvkom ( index.html, napríklad). Pozrite sa na nasledujúci riadok:

Inštruuje React, aby našiel id s označením root a vložil tam kódy React. <App/> je koreňový prvok a všetko ostatné sa od neho vetví.

Všimnite si, že sme importovali aj CSS súbory (ako index.css) ale v skutočnosti sme s nimi nič neurobili. Importovaním vlastne hovoríme nástroju Webpack prostredníctvom skriptov React, aby zahrnul CSS kódy do finálneho skompilovaného balíka. V opačnom prípade sa CSS štýly nezobrazia.

• App.js

Ďalej sa pozrieme na App.js. Otvorte ho v textovom editore:

 

Pozrime sa, ako zmena jeho obsahu ovplyvní náš projekt. Zmeňte obsah <p>tagu:

Potom súbor uložte a skontrolujte zmeny v prehliadači:

Voila! Urobili ste svoje prvé úpravy komponentu React!

Je tu ešte jedna vec, ktorú si treba všimnúť. Pozrite sa na prvok <img>:

Všimnite si, že logo sa odovzdáva v zložených zátvorkách. Vždy, keď odovzdávate atribúty (ktoré nie sú reťazce ani čísla), musia byť odovzdané v zložených zátvorkách. React ich potom bude považovať za JavaScriptové objekty namiesto reťazcov.

V tomto prípade aplikácia v skutočnosti neimportuje obrázok. Namiesto toho ide o odkaz na obrázok. Keď Webpack zostaví projekt, umiestni obrázok na príslušné miesto. Môžeme to overiť v prehliadači. Otvorte Nástroje pre vývojárov vo Firefoxe:

Webpack chce priradiť jedinečné cesty k súborom pre všetky obrázky. Takže aj keď boli obrázky importované s rovnakým názvom, budú mať rôzne cesty.

Step 7: Project Building

V tomto kroku sa naučíme, ako skompilovať projekt do balíka pripraveného na nasadenie. Spusťte terminál a spustite skript build projektu:

Kompilátor vytvorí vyhradený adresár build/kam umiestni výstup. Ak chcete vidieť, čo proces kompilácie robí, otvorte index.html súbor z build/adresára:

Ako môžete vidieť, všetky kódy sú skompilované a minifikované do najmenšieho použiteľného stavu. Čitateľnosť nie je dôležitá, keďže nejde o kód určený pre verejnosť. Minifikované kódy zaberajú menej miesta, pričom si zachovávajú všetky svoje funkcie. Na rozdiel od jazykov, kde sú biele znaky veľmi dôležité (napríklad Python), webové jazyky (HTML, CSS a JavaScript) nevyžadujú správne medzery na to, aby ich prehliadač interpretoval.

Záverečné myšlienky

V tejto príručke sme úspešne predviedli, ako vytvoriť aplikáciu React. Ukázali sme si tiež niektoré základné konfigurácie pomocou nástrojov na zostavenie JavaScriptu bez zložitých technických detailov. Toto je kľúčová hodnota, ktorú Create React App ponúka. Nemusíte vedieť všetko, aby ste mohli začať s Reactom. Môžete vynechať zložité kroky zostavenia a sústrediť sa výhradne na kód Reactu.

Tu sme tiež predviedli, ako spustiť, otestovať a zostaviť projekt React. Tieto príkazy sú kľúčové pre projekty všetkých veľkostí.

Príjemnú prácu s počítačom!