Lekce 3 - První React komponenta - Hello World

V minulé lekci, Vytvoření React projektu, jsme vytvořili React projekt pro první jednoduchou aplikaci pomocí Node.js.

V dnešním React tutoriálu začneme s tvorbou naší první React aplikace. A jaký projekt je pro začátek vhodnější, než osvědčené "Hello World"? Projekt již máme připravený a otevřený. Vrhněme se tedy na jeho úpravu.

Hello world v React

Vytvoříme aplikaci, která do stránky vloží nadpis <h1> s textem Ahoj světe!. Bude vypadat takto:

Vytvoření komponenty HelloWorld

Jak jsme si již v kurzu uvedli, základem všeho v React jsou komponenty. Proto i náš pozdrav na stránce definujeme jako komponentu.

Vytvoření souboru s komponentou

Prvně si pro ni ve složce src/ vytvoříme samostatný soubor HelloWorld.js.

Vytvoření funkce komponenty

Již víme, že komponenty v React definujeme pomocí funkcí. V souboru HelloWorld.js tedy deklarujeme novou funkci HelloWorld():

function HelloWorld() {
    return <h1>Ahoj světe!</h1>
}

export default HelloWorld;

Návratová hodnota funkce

Funkce vrací výsledné HTML komponenty k vykreslení. V našem případě to je kód <h1>Hello, world!</h1>. Jak vidíme, kolem HTML kódu nejsou žádné uvozovky. Přitom jsme stále v JavaScriptu. Právě tento zápis nám umožňuje JSX

V JSX musí být celý HTML kód komponenty vždy obalen jediným elementem (zde <h1>). Pokud bychom tedy chtěli, aby kromě nadpisu vykreslila něco dalšího, bylo by potřeba vložit celý tento obsah např. do elementu <div>. Pokud píšeme HTML kód na více řádku, je jej potřeba vložit celý ještě do závorek (). Ale to si vše ukážeme u složitějších projektů.

Export/import komponent

React komponenty využívají modulární syntaxi JavaScriptu (příkazy export a import). Tím se vyhneme nepřehlednému načítání komponent do aplikace pomocí tagů <script>. Poslední řádek funkci (komponentu) exportuje a tím ji bude možné importovat a vložit v hlavním souboru aplikace.

Soubor uložíme pomocí klávesové zkratky Ctrl + S.

Vložení komponenty do stránky

Nová React aplikace vždy obsahuje již jednu komponentu App, reprezentující celou aplikaci. My naší komponentu HelloWorld vložíme jednoduše do ní.

Přesuneme se do souboru src/App.js, který upravíme do následující podoby:

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

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

export default App;

Odmazali jsme zbytečný kód výchozí React stránky s točícím se logem a místo něj jsme na začátku souboru naimportovali naši komponentu příkazem:

import HelloWorld from './HelloWorld.js';

Do HTML struktury aplikace jsme potom komponentu vložili jako element <HelloWorld>.

Soubor uložíme.

Otevření stránky v prohlížeči

Okno prohlížeče máme již otevřené, uložením změn v souborech se stránka i automaticky obnovila. Pokud jste jej náhodou zavřeli, stačí otevřít prohlížeč a zadat adresu localhost:3000. Na stránce vidíme jeden velký nadpis <h1>Ahoj světe!</h1>:

Pokud výsledek v prohlížeči nevidíte, zkontrolujte, že máte aplikaci spuštěnou příkazem npm start ve složce s projektem, jak jsme si to již ukazovali. Pokud vám vypisuje React chyby, zkontrolujte, že jste oba upravované soubory uložili.

Komponenta se vložila na dané místo a vykreslila se podle HTML kódu, který funkce vrací. Ukázali jsme si tak důležité principy, které nám pomohou v dalších, interaktivnějších aplikacích.

Alternativní zápisy React komponent

Na závěr si ukažme několik alternativních zápisů, které lze také k vytvoření React komponent použít. Některé jsou historické a setkáte se s nimi ve starších projektech, některé vycházejí jednoduše z toho, že JavaScript má více syntaxe pro různé akce.

Export/import

Alternativně bychom mohli funkci exportovat již při jejím vytváření a ušetřit si řádek s exportem pod ní. Vypadala by pak takto:

export default function HelloWorld() {
    return <h1>Ahoj světe!</h1>
}

Tento zápis nám také umožňuje exportovat funkci bez klíčového slova default:

export function HelloWorld() {
    return <h1>Ahoj světe!</h1>
}

Nedefaultní export se používá spíše pro soubory s více identifikátory (my zde máme jen jednu funkci). Při importu komponenty v App.js bychom pak museli navíc uvést složené závorky, které se používají pro uvádění více identifikátorů:

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

React komponenty jako arrow funkce =>

Funkci také můžeme definovat jako arrow funkci:

const HelloWorld = () => {
    return <h1>Ahoj světe!</h1>
}

export default HelloWorld;

Vytvoření React komponenty pomocí třídy class

Ve starších projektech se můžete setkat s vytvořením komponenty pomocí třídy class. Třída pak dědí z React.Component a HTML kód komponenty vrací metoda render():

import React from 'react';

export default class HelloWorld extends React.Component {

    render() {
        return <h1>Ahoj světe!</h1>;
    }

}

A jak by to vypadalo bez JSX?

Bez JSX bychom museli HTML elementy v JavaScriptu vytvářet ručně a to podobně, jako jsme to dělali doposud. Slouží k tomu funkce React.createElement(). Kód by vypadal takto:

import React from 'react';

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

Je vidět, že JSX je mnohem přehlednější.

Všechny tyto zápisy jsou ekvivalentní. My se budeme v kurzu držet prvního zápisu, který jsme si ukázali, protože odpovídá tomu, jak příkaz Create React App založí komponentu App. Je možné, že se v praxi dostanete k projektu, který používá jiné konvence a tam budete samozřejmě pokračovat v zápisu, který je v projektu již použit, aby zůstal konzistentní.

Spuštění projektů ke stažení

V příloze vybraných lekcí naleznete vždy vzorový projekt ke stažení pro případ, že vám něco nefugovalo. Můžete si tak snadno najít chybu. Jelikož knihovny React mají cca 200 MB, nedistribuují se React aplikace se složkou node_modules/.

Pro spuštění staženého projektu je tedy potřeba prvně otevřít jeho složku (zde helloworld/) v příkazovém řádku pomocí klávesy Shift a pravého tlačítka myši, jak to již umíme. Následně je třeba ve složce zavolat příkaz npm install:

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

Tímto se v aplikaci znovu vytvoří složka node_modules/ a do ní se stáhnou všechny balíčky, které jsou definované v souboru package.json. Aplikaci pak spustíme příkazem:

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

Příkaz npm start je alias k příkazu npm run start, fungují tedy obě varianty. Právě run je příkaz, který se reálně spustí.

Příště, v lekci Vlastnosti v React - Props, si vysvětlíme koncept vlastností props. Ukážeme si, jak se vlastnosti zadávají v HTML kódu, načítají v komponentě a destrukturalizují.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.