3. diel - Prvý React komponent - Hello World

V minulej lekcii, Vytvorenie React projektu, sme vytvorili React projekt pre prvú jednoduchú aplikáciu pomocou Node.js.

V dnešnom React tutoriále začneme s tvorbou našej prvej React aplikácie. A aký projekt je na začiatok vhodnejší než osvedčené „Hello World“? Projekt už máme pripravený a otvorený. Vrhneme sa teda na jeho úpravu.

Hello world v React

Vytvoríme aplikáciu, ktorá do stránky vloží nadpis <h1> s textom Hello world!. Bude vyzerať takto:

Vytvorenie komponentu HelloWorld

Ako sme si už v kurze uviedli, základom všetkého v React sú komponenty. Preto aj náš pozdrav na stránke definujeme ako komponent.

Vytvorenie súboru s komponentom

Najprv si preň v priečinku src/ vytvoríme samostatný súbor HelloWorld.js.

Vytvorenie funkcie komponentu

Už vieme, že komponenty v React definujeme pomocou funkcií. V súbore HelloWorld.js teda deklarujeme novú funkciu HelloWorld():

function HelloWorld() {
    return <h1>Hello world!</h1>
}

export default HelloWorld;

Návratová hodnota funkcie

Funkcia vracia výsledné HTML komponenty na vykreslenie. V našom prípade to je kód <h1>Hello world!</h1>. Ako vidíme, okolo HTML kódu nie sú žiadne úvodzovky. Pritom sme stále v JavaScripte. Práve tento zápis nám umožňuje JSX

V JSX musí byť celý HTML kód komponentu vždy obalený jediným elementom (tu <h1>). Ak by sme teda chceli, aby okrem nadpisu vykreslil aj niečo ďalšie, bolo by potrebné vložiť celý tento obsah napr. do elementu <div>. Pokiaľ píšeme HTML kód na viac riadkov, je potrebné vložiť ho celý ešte do zátvoriek (). Ale to si všetko ukážeme pri zložitejších projektoch.

Export/import komponentov

React komponenty využívajú modulárnu syntax JavaScriptu (príkazy export a import). Tým sa vyhneme neprehľadnému načítaniu komponentov do aplikácie pomocou tagov <script>. Posledný riadok funkciu (komponentu) exportuje a tým ju bude možné importovať a vložiť v hlavnom súbore aplikácie.

Súbor uložíme pomocou klávesovej skratky Ctrl + S.

Vloženie komponentu do stránky

Nová React aplikácia vždy obsahuje už jeden komponent App reprezentujúci celú aplikáciu. My náš komponent HelloWorld vložíme jednoducho doňho.

Presunieme sa do súboru src/App.js, ktorý upravíme do nasledujúcej podoby:

import './App.css';
import HelloWorld from './HelloWorld.js';

function App() {
  return (
    <div className="App">
         <HelloWorld />
    </div>
  );
}

export default App;

Odmazali sme zbytočný kód východiskovej React stránky s točiacim sa logom a namiesto neho sme na začiatku súboru naimportovali náš komponent príkazom:

import HelloWorld from './HelloWorld.js';

Do HTML štruktúry aplikácie sme potom komponent vložili ako element <HelloWorld>.

Súbor uložíme.

Otvorenie stránky v prehliadači

Okno prehliadača máme už otvorené, uložením zmien v súboroch sa stránka aj automaticky obnovila. Pokiaľ ste ho náhodou zavreli, stačí otvoriť prehliadač a zadať adresu localhost:3000. Na stránke vidíme jeden veľký (<h1>) nadpis Hello world!:

Ak výsledok v prehliadači nevidíte, skontrolujte, že máte aplikáciu spustenú príkazom npm start v priečinku s projektom, ako sme si to už ukazovali. Ak vám vypisuje React chyby, skontrolujte, že ste oba upravované súbory uložili.

Komponent sa vložil na dané miesto a vykreslil sa podľa HTML kódu, ktorý funkcia vracia. Ukázali sme si tak dôležité princípy, ktoré nám pomôžu v ďalších, interaktívnejších aplikáciách.

Alternatívne zápisy React komponentov

Na záver si ukážme niekoľko alternatívnych zápisov, ktoré je tiež možné na vytvorenie React komponentov použiť. Niektoré sú historické a stretnete sa s nimi v starších projektoch, niektoré vychádzajú jednoducho z toho, že JavaScript má viac syntaxe pre rôzne akcie.

Export/import

Alternatívne by sme mohli funkciu exportovať už pri jej vytváraní a ušetriť si riadok s exportom pod ňou. Vyzerala by potom takto:

export default function HelloWorld() {
    return <h1>Hello world!</h1>
}

Tento zápis nám tiež umožňuje exportovať funkciu bez kľúčového slova default:

export function HelloWorld() {
    return <h1>Hello world!</h1>
}

Nedefaultný export sa používa skôr pre súbory s viacerými identifikátormi (my tu máme len jednu funkciu). Pri importe komponentu v App.js by sme potom museli navyše uviesť zložené zátvorky, ktoré sa používajú na uvádzanie viacerých identifikátorov:

import { HelloWorld } from './HelloWorld.js';

React komponenty ako arrow funkcie =>

Funkciu tiež môžeme definovať ako arrow funkciu:

const HelloWorld = () => {
    return <h1>Hello world!</h1>
}

export default HelloWorld;

Vytvorenie React komponentu pomocou class

V starších projektoch sa môžete stretnúť s vytvorením komponentu pomocou triedy class. Trieda potom dedí z React.Component a HTML kód komponentu vracia metóda render():

import React from 'react';

export default class HelloWorld extends React.Component {

    render() {
        return <h1>Hello world!</h1>;
    }

}

A ako by to vyzeralo bez JSX?

Bez JSX by sme museli HTML elementy v JavaScripte vytvárať ručne a to podobne, ako sme to robili doteraz. Slúži na to funkcia React.createElement(). Kód by vyzeral takto:

import React from 'react';

export default function HelloWorld() {
    return React.createElement('h1', null, 'Hello world!');
}

Je vidieť, že JSX je oveľa prehľadnejšie.

Všetky tieto zápisy sú ekvivalentné. My sa budeme v kurze držať prvého zápisu, ktorý sme si ukázali, pretože zodpovedá tomu, ako príkaz Create React App založí komponent App. Je možné, že sa v praxi dostanete k projektu, ktorý používa iné konvencie a tam budete samozrejme pokračovať v zápise, ktorý je v projekte už použitý, aby zostal konzistentný.

Spustenie projektov na stiahnutie

V prílohe vybraných lekcií nájdete vždy vzorový projekt na stiahnutie pre prípad, že vám niečo nefugovalo. Môžete si tak ľahko nájsť chybu. Keďže knižnice React majú cca 200 MB, nedistribuujú sa React aplikácie s priečinkom node_modules/.

Na spustenie stiahnutého projektu je teda potrebné prvýkrát otvoriť jeho priečinok (tu helloworld/) v príkazovom riadku pomocou klávesu Shift a pravého tlačidla myši, ako už vieme. Následne je potrebné v priečinku zavolať príkaz npm install:

Windows PowerShell
PS C:\Users\sdrac\Dropbox\helloworld> npm install

Týmto sa v aplikácii znovu vytvorí priečinok node_modules/ a doňho sa stiahnu všetky balíčky, ktoré sú definované v súbore package.json. Aplikáciu potom spustíme príkazom:

Windows PowerShell
PS C:\Users\sdrac\Dropbox\helloworld> npm start

Príkaz npm start je alias k príkazu npm run start, fungujú teda oba varianty. Práve run je príkaz, ktorý sa reálne spustí.

Nabudúce, v lekcii Vlastnosti v React - Props, si vysvetlíme koncept vlastností props. Ukážeme si, ako sa vlastnosti zadávajú v HTML kóde, načítajú v komponente a deštrukturalizujú.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.