Geek tričko zdarma Geek tričko zdarma
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde

Lekce 1 - Úvod do React

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Vítejte u první lekce on-line kurzu o JavaScript (JS) knihovně React / React.js V dnešním tutoriálu si knihovnu nejdříve představíme a následně si v ní zkusíme vytvořit i svou první jednoduchou aplikaci.

Úvod do React

React.js

React je JS open-source knihovna od společnosti Facebook pro tvorbu uživatelského rozhraní (UI). Na rozdíl od různých kompletních frameworků (např. Angular) se tedy soustředí na jednu specifickou oblast a pokud se na ní podíváme z hlediska klasické MVC architektury, tvoří právě a pouze view, tedy vrstvu pohledu, která prezentuje data uživateli. A pravděpodobně jste si všimli, že v současné době je jednou z nejoblíbenějších a nejžádanějších knihoven s velkou komunitou vývojářů.

Vlastnosti

Na úvod je také důležité říct něco o aspektech této knihovny a o vlastnostech aplikací v ní vytvořených. Základním stavební kámen zde tvoří tzv. komponenty (components), což jsou různé znovupoužitelné HTML elementy se zapouzdřenou funkcionalitou, jejichž skládáním vzniká komplexní UI aplikace. Tyto komponenty pak mají své vlastnosti (props) a zpravují svůj vnitřní stav (state). Tento deklarativní způsob práce s daty aplikace vede k více předvídatelnému chování i lehčímu ladění a to může být právě jeden z důvodů, proč je tato knihovna tak populární. Také si díky tomu dobře rozumí s dalšími podobně zaměřenými knihovnami jako je např. Redux.

Využití

Jelikož React je specificky zaměřenou knihovnou, používá se v praxi v rámci tvorby aplikací v kombinaci s dalšími knihovnami se značně rozdílným přístupem i různou architekturou. React se pak v rámci těchto použití vždy stará o vykreslení UI. Pro lepší představu si uveďme několik příkladů:

  • Časté využití je tvorba tzv. single-page aplikací (SPA)
  • Další možností je použití Reactu pro vykreslování webových stránek na straně serveru (server-side rendering), kde se používá např. v kombinaci s knihovnou Next.js v serverovém prostředí Node.js
  • Dále ho můžeme využít např. v kombinaci s knihovnou Gatsby v rámci vykreslování statický webových stránek orientovaných na obsah, kde se sází především na rychlost před-vykresleného HTML a CSS
  • V neposlední řadě bychom neměli opomenout projekt React Native pro tvorbu nativních mobilních aplikací pomocí JS a Reactu

Sami vidíte, že možností je spousta. Já bych se v rámci tohoto seriálu chtěl hlavně zaměřit na knihovnu React jako takovou a další funkcionalitu doplnit použitím pouze čistého JS. Také se tedy pro jednoduchost budeme orientovat na prostředí webových aplikací.

Požadavky

Než se pustíme do samotné práce s knihovnou React, je potřeba ještě zmínit vyžadované znalosti, které by jste měli mít, a také nástroje, se kterými budeme pracovat. Ke všem máme zde na síti kurzy, takže pokud něco z toho náhodou neznáte, absolvujte prosím nejdříve příslušný kurz.

Znalosti

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Určitě jste již postřehli, že jako programovací jazyk budeme používat JavaScript. A tím je myšlen převážně čistý JS plus samozřejmě funkcionalita z knihovny React. Navíc budeme používat i nejnovější vychytávky z ES6+, "nové" verze JavaScriptu. Jinak v rámci tvorby webového UI se dozajista neobejdete bez znalosti HTML a CSS.

Nástroje a IDE

V první řadě uvedu, že později v tutoriálu budeme pro jednoduší tvorbu aplikací používat nástroje spjaté s Node.js, což znamená, že je potřeba ho mít nainstalované.

Dále bych pro začátečníky doporučil používat nějaké rozumné IDE, např. WebStorm nebo textový editor s pokročilými funkcemi jako je Visual Studio Code. To vám obecně při programování velice usnadní práci.

Nyní bychom měli mít k dispozici vše, co potřebuje pro tvorbu naší první aplikace. Tak hurá na to! ;)

První React aplikace

Začneme tedy s tvorbou opravdu jednoduché webové aplikace za použití knihovny React a co je vhodnější než osvědčené "Hello World"? :)

index.html

Jelikož se tedy jedná o webovou stránku, vytvoříme standardní soubor index.html a do něj napíšeme nás kód:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Hello World!</title>

    <!-- Načtení React.js -->
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
</head>

<body>
    <!-- Kořen naší komponentové struktury -->
    <div id="root"></div>

    <!-- JS kód naší aplikace za použití knihovny React -->
    <script>
        // Definice React komponenty
        class HelloWorld extends React.Component {
            render() { // Vykreslení komponenty
                // Vykreslení vrátí element <h1> s textem "Hello World"
                return React.createElement('h1', null, 'Hello World!');
            }
        }

        // Vykreslení instance komponenty do HTML struktury
        ReactDOM.render(
            React.createElement(HelloWorld), // Vytvoření komponenty
            document.getElementById('root')  // Připojení do kořene aplikace
        );
    </script>
</body>

</html>

A to je vše přátelé. Když teď otevřete soubor přímo ve webovém prohlížeči, uvidíte na stránce jeden velký nadpis <h1>Hello World!</h1>.

Kód jsem pro Vás rovnou i zdokumentoval. Jak jsem psal již v úvodu, základem všeho jsou komponenty a princip sestavení stránky je velice jednoduchý:

  1. Načteme JS knihovnu React do stránky. Ta je zde uložena na on-line úložišti, proto jsme nic nemuseli stahovat
  2. Vytvoříme kořen (vstupní bod) naší komponentové struktury
  3. Pomocí nástrojů z knihovny React vytvoříme vlastní komponentu pro nadpis
  4. Vykreslíme komponentu do našeho kořene na stránce

JSX

Ovšem to není vše z dnešní lekce. Také se vám tak nelíbí ta poměrně nepraktická kombinace HTML a JS s nutností psát všude dlouhý název funkce React.createElement()? Je pravda, že název té funkce by se dal zkrátit např. pomocí uložení const e = React.createElement();, ale to stále není ono...

Nejlepší by bylo nějakým způsobem efektivně zkombinovat daný JS kód s HTML a přesně o tom je také JSX (JavaScript + XML)! To nám totiž umožňuje psát HTML přímo do JS a to ne jako klasický string, ale opravdu jako HTML. A navíc si s ním React opět hezky rozumí a celkově nám to tak zjednoduší vytváření HTML elementů i samotných komponent.

Samozřejmě takováto kombinace nebude už jen tak fungovat přímo v prohlížeči, který toto chování zkrátka nepodporuje. To ale neznamená, že si nemůžeme vzít na pomoc další knihovny jako např. Babel, který nám zajistí překlad našeho JSX do podoby srozumitelné prohlížeči a to dokonce přímo při načtení stránky.

index.html

Pojďme si tento princip ukázat na předchozí jednoduché aplikaci, kterou snadno předěláme na použití JSX. Kód v souboru index.html pak bude vypadat následovně:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Hello World!</title>

    <!-- Načtení React.js -->
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>

    <!-- Načtení Babel překladače pro JSX -->
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
    <!-- Kořen naší komponentové struktury -->
    <div id="root"></div>

    <!-- Babel kód naší aplikace s podporou JSX a za použití knihovny React -->
    <script type="text/babel">
        // Definice React komponenty
        class HelloWorld extends React.Component {
            render() { // Vykreslení komponenty
                return <h1>Hello, world!</h1>;
            }
        }

        // Vykreslení instance komponenty do HTML struktury
        ReactDOM.render(
            <HelloWorld />, // Vytvoření komponenty
            document.getElementById('root')  // Připojení do kořene aplikace
        );
    </script>
</body>

</html>

No není to o moc hezčí? :) A stejně jako před tím, stačí otevřít soubor přímo ve webovém prohlížeči a hned uvidíme výsledek.

Zdrojové kódy v tomto článku nejsou vhodné pro produkční prostředí kvůli nutnosti neustálého překladu JSX a verzím knihovny React určeným pouze pro vývojové prostředí.

To je z dnešního úvodního tutoriálu vše. Příště, v lekci , si ukážeme ještě lepší konstrukci aplikací s použitím JSX a také začneme s tvorbu další webové aplikace za použití React knihovny. Prozradím, že půjde o jednoduchou kalkulačku ;)


 

 

Článek pro vás napsal Jindřich Máca
Avatar
Jak se ti líbí článek?
5 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. :-)
Všechny články v sekci
React
Aktivity (3)

 

 

Komentáře

Avatar
Lako
Člen
Avatar
Lako:2. března 11:00

Když se nad tím poxastavím, tak místo jednoho elementu h1 jsme museli natáhnout 2 JavaScriptové knihovny, vytvořit skript a teprve tam celkem oklikou sepsat kýžený h1...

Pochopitelně chápu, že react není k psaní hello worldů a ve složitější aplikaci se tahle ceremonie vyplatí.

 
Odpovědět 2. března 11:00
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na Lako
Jindřich Máca:2. března 14:05

Ano, to je pravda, ale tohle má sloužit čistě jako demonstrativní příklad. :)

 
Odpovědět  +1 2. března 14:05
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Martin Kejzlar:26. července 16:41

Díky za článek.

 
Odpovědět  +1 26. července 16:41
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.