Magazín KPI
Časopis Katedry počítačov a informatiky FEI TUKE
kpi

ReactJS

ReactJS je softvérový rámec umožňujúci používateľom tvorbu interaktívnych používateľských rozhraní. Tieto používateľské rozhrania sú spúšťané priamo u klienta v internetovom prehliadači a s výpočtovou logikou na strane servera (backend) komunikujú prostredníctvom REST služieb. ReactJS pracuje s programovacím jazykom JavaScript.

ReactJS logo.

Začíname

Štruktúra projektu

V koreňovom adresári vášho webového servera vytvorte priečinok s názvom react. V tomto priečinku sa bude nachádzať celý náš ReactJS projekt. Štruktúru je možné vidieť na obrázku:

Štruktúra projektu ReactJS.

  • app — tu sa budú nachádzať zdrojové kódy našej ReactJS aplikácie.
  • node_modules — v tomto priečinku budú umiestnené jednotlivé balíčky nainštalované pomocou nástroja NPM.
  • public — bude obsahovať súbory dostupné cez webový server ako CSS a HTML, vygenerované skripty v jazyku JavaScript (public/js), obrázky a iné.

Vytvorte si aj tieto priečinky a podpriečinky tak, ako je to zobrazené v štruktúre vyššie. Jednotlivé súbory nie je potrebné vytvárať nakoľko sa im budeme detailne venovať v pokračovaní tohto článku.

index.html

Na začiatku musíme vytvoriť jednoduchý HTML súbor ktorý sa načíta v prehliadači po zadaní adresy nášho webového servera. V priečinku react/public vytvorte súbor index.html s nasledujúcim obsahom:

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/javascript" src="js/bundle.js"></script>
  </body>
</html>

V tomto HTML súbore sa okrem klasickej HTML štruktúry nachádzajú referencie na potrebné knižnice jazyka JavaScript ako aj referencia na samotný zdrojový kód aplikácie (js/bundle.js). Okrem toho si všimnime aj HTML element <div id="content"></div> . Do vnútra tohto elementu sa bude vykresľovať (“renderovať”) všetko potrebné z našej ReactJS aplikácie.

Inštalácia

Existuje viacero spôsobov ako je možné nainštalovať ReactJS:

  1. V hlavnom HTML súbore je možné zahrnúť (include) všetky potrebné závislosti pomocou služieb CDN. Príklad takejto inštalácie je uvedený v dokumentácii. Jednotlivé závislosti sú uložené na vzdialených serveroch tretích strán.
  2. Pripojiť jednotlivé závislosti lokálne v hlavnom HTML súbore. Všetky potrebné súbory sú uložené na serveri.
  3. Nainštalovať závislosti pomocou balíčkového manažéra NPM.

Najlepším spôsobom je z mojich skúseností inštalácia pomocou manažéra NPM. Preto sa aj v tomto článku budeme venovať tomuto spôsobu inštalácie. Toto riešenie prináša viaceré výhody ako napríklad:

  1. Všetky potrebné závislosti sú uložené lokálne.
  2. Nové balíčky je možné jednoducho doinštalovať.
  3. Aktualizácia jednotlivých balíčkov je jednoduchá.
  4. Zjednodušuje prácu v tíme (napríklad so systémom GIT).

Inštalácia pomocou NPM

Pre plnohodnotnú prácu s balíčkovým manažérom NPM si nainštalujte najnovšiu verziu NodeJS a NPM z oficiálnej stránky alebo podľa návodu. Následne, v koreňovom priečinku (/react) vášho projektu si vytvorte súbor s názvom package.json s nasledujúcim obsahom:

{
  "name": "react-tutorial",
  "version": "1.0.0",
  "description": "Super mega aplikácia",
  "main": "index.js",
  "scripts": {
    "dev": "webpack -d --watch",
    "build": "webpack -p"
  },
  "author": "Jaroslav Pulik",
  "license": "ISC",
  "dependencies": {
    "react": "^15.1.0",
    "react-dom": "^15.1.0"
  }
}

V tomto súbore sú definované všetky potrebné závislosti (dependencies) pre náš projekt. Na základe tohto súboru balíčkový systém NPM vie, aké balíčky je potrebné nainštalovať alebo aktualizovať. Ďalej v položke main je definovaný hlavný JS súbor od ktorého budu závisieť ostatné komponenty. Ostatné položky nie je potrebné komentovať nakoľko je ich význam jasný na prvý pohľad. Detailný popis jednotlivých položiek a ďalších možností je možné nájsť v oficiálnej dokumentácii.

Po vytvorení súboru package.json môžeme inštaláciu komponentov zahájiť pomocou príkazu: npm install z príkazového riadku (konzola). Po vykonaní úspešnej inštalácie by ste mali vidieť strom nainštalovaných závislostí:

Po vykonaní príkazu NPM INSTALL

JSX a ES6

JSX je špeciálna syntax pre jazyk JavaScript používaná v ReactJS. Nie je nutnosťou používať túto syntax, je to však odporúčané, nakoľko prináša mnohé vylepšenia a zjednodušenia v čitateľnosti, ako aj vo vývoji samotného kódu. Z týchto dôvodov budeme túto syntax používať aj v našom projekte. Zdrojové súbory písané touto syntaxou budú mať príponu .jsx. Podrobný popis jednotlivých konštrukcií syntaxe JSX môžete nájsť na stránke “JSX in Depth”.

ES6 (ECMAScript 6) je nový štandard jazyka JavaScript. Zjednodušuje starú syntax a prináša aj nové konštrukcie a zvyšuje rýchlosť jazyka JavaScript. Medzi hlavné novinky patrí napríklad možnosť vytvárať triedy tak, ako to poznáme z objektových programovacích jazykov. Porovnanie starého a nového štandardu je pekne popísané na tejto stránke. Hlavným problémom štandardu ES6 však ostáva to, že ho súčasné moderné webové prehliadače zatiaľ úplne nepodporujú. Tomuto problému sa je možné vyhnúť kompilovaním ES6 kódu do staršej ES5 syntaxe napríklad pomocou nástroja Babel. Vďaka tomu môžeme písať aplikácie v novom štandarde už dnes a v budúcnosti, keď syntax ES6 budú priamo podporovať internetové prehliadače, budeme pripravení.

Babel si nainštalujte pomocou príkazu:

npm i babel-loader babel-preset-es2015 babel-preset-react -S

Tento príkaz je potrebné zadať z príkazového riadka v koreňovom priečinku nášho projektu (/react). O samotné spúštanie nástroja Babel a preklad sa už postará nižšie popísaný nástroj Webpack.

Pre správne fungovanie nástroja Babel je ešte potrebné vytvoriť súbor .babelrc v hlavnom adresári projektu (/react) s nasledujúcim obsahom:

{
  "presets" : ["es2015", "react"]
}

Webpack

Po inštalácii jednotlivých komponentov ich potrebujeme spolu s našimi zdrojovými kódmi (ktoré sa budú nachádzať v priečinku app) nejako “dať dokopy” tak, aby nám vo výsledku stačilo v hlavnom HTML súbore vložiť iba jeden JS súbor (bundle.js). A práve na to slúži nástroj Webpack. Nainštalujte si Webpack podľa návodu. Jednoduchá filozofia tohto nástroja je zobrazená na obrázku nižšie, ktorý som si dovolil prevziať z oficiálnej stránky nástroja:

Webpack - Princíp činnosti

Webpack jednoducho vezme všetky vopred definované súbory (JS, CSS, atď.) a zlúči ich do jedného jediného pre každý z typov. Na definovanie týchto pravidiel slúži súbor webpack.config.js. Vytvorte si tento súbor v koreňovom priečinku (/react) nášho projektu s nasledujúcim obsahom:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'public/js');
var APP_DIR = path.resolve(__dirname, 'app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module : {
    loaders : [
      {
        test : /.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  }
};

module.exports = config;

Detailný opis jednotlivých riadkov je možné nájsť v oficiálnej dokumentácii. Pre naše potreby je podstatné vedieť, že všetky súbory s príponou .jsx z priečinka app budú automaticky prekonvertované a zlúčené do výsledného súboru bundle.js v priečinku react/public/js.

Pre spustenie nástroja Webpack je potrebné z príkazového riadku zadať príkaz:

webpack -d --watch

pre testovanie a sledovanie zmien v zdrojových súboroch (automatická kompilácia pri zmene) alebo príkaz

webpack -p

pre vytvorenie “minified” (verzia bez zbytočného formátovania, bielych znakov, …) verzie výsledného JS súboru.

Ak máte všetko správne nainštalované a nastavené, mali by ste vidieť niečo podobné: Zapnutý nástroj Webpack

Komponenty (components)

Celá webová aplikácia sa v ReactJS skladá z komponentov. Jednotlivé komponenty si môžeme predstaviť ako kocky lega, ktoré vzájomne prepájame za účelom dosiahnutia požadovaného výsledku (funkčnej aplikácie). Každý z komponentov je možné použiť viackrát. Komponent môže predstavovať nástenku (tvorenú príspevkami), samotné príspevky, komentáre, tlačidlá, alebo hocičo iné, v čom je implementovaná vlastná funkcionalita a chceme ju využiť v aplikácii opakovane.

Stav komponentov (state)

Každý z komponentov má svoj stav. Ak sa zmení nejaká premenná, s ktorou pracuje daný komponent, znamená to aj zmenu stavu tohto komponentu. Práve táto vlastnosť patrí medzi veľké výhody rámca ReactJS. Ak totiž dôjde k zmene vlastností nejakého vnoreného komponentu, nie je nutné prepočítavať a znovu vykresľovať všetky nadradené komponenty ale zmeny sa vykonajú iba v tých komponentoch, v ktorých je to nevyhnutné. Vďaka tomu patrí ReactJS medzi najrýchlejšie softvérové rámce vo svojej kategórii.

Životný cyklus komponentov (lifecycle)

Každý komponent prechádza vlastným životným cyklom. Životný cyklus komponentu predstavuje dobu od jeho inicializácie až po jeho zobrazenie. Jednotlivé fázy životného cyklu každého z komponentov reprezentujú preddefinované metódy. Detailný popis všetkých metód a vlastností jednotlivých fáz životného cyklu komponentov je možné nájsť v oficiálnej dokumentácii. Postupnosť metód od inicializácie komponentu až po jeho vykreslenie je ilustračne zobrazená na obrázku (zdroj):

ReactJS - Životný cyklus komponentov.

Pokiaľ teda chceme vykonať nejakú vlastnú funkcionalitu napríklad po inicializácii komponentu do počiatočného stavu a zároveň pred jeho vykreslením, môžeme na to použiť funkciu componentWillMount:

componentWillMount() {
    // Vlastný kód
}

Prvý komponent

Náš prvý komponent bude úplne jednoduchý. Jediné, čo bude jeho úlohou, je vypísať na obrazovku svetoznáme slová “Hello World”. Vytvorte si súbor Hello.jsx v priečinku react/app s nasledujúcim obsahom:

// Hello.jsx
import React from 'react';

class Hello extends React.Component {

    render() {
        return <div>Hello World</div>;
    }

};

export default Hello;

Na to, aby bolo možné spustiť vykonávanie komponentu Hello, je potrebné vytvoriť hlavný súbor aplikácie (index.jsx), ktorý bude slúžiť ako inicializačný. V tomto súbore bude iba jedna metóda - render() v ktorej zavoláme hlavný komponent aplikácie a určíme komponent HTML (<div id="content"></div>), do ktorého sa má náš Hello komponent vykresliť. Vytvorte súbor index.jsx v priečinku app s nasledujúcim obsahom:

// index.jsx
import React from 'react';
import { render } from 'react-dom';

import Hello from './Hello.jsx';

render(
    <Hello />,
    document.getElementById('content')
);

Ak máte spustený Webpack, pri zmene kódu sa automaticky vygeneruje nový súbor bundle.js. V prípade ak už Webpack nemáte spustený, spustite ho príkazom:

webpack -d --watch

Po znovu-načítaní webovej stránky (súbor react/public/index.html) by ste mali vidieť na obrazovke výpis “Hello World”.

Vlastnosti komponentov (props)

V prípade ak potrebujeme medzi komponentmi vzájomne komunikovať, resp. odovzdať nejakú správu z jedného komponentu do iného, je to možné zabezpečiť pomocou parametrov (props od anglického properties). Skúsme teda poslať parameter name komponentu Hello tak, aby sa na obrazovku vypísalo “Hello Jaroslav” namiesto “Hello World”.

V súbore index.jsx teda zadáme pri inicializácii komponentu Hello parameter name nasledujúcim spôsobom:

// index.jsx
import React from 'react';
import { render } from 'react-dom';

import Hello from './Hello.jsx';

render(
    <Hello name="Jaroslav" />,
    document.getElementById('content')
);

Tým sme úspešne poslali parameter name s hodnotou Jaroslav do komponentu Hello. V komponente Hello pristupujeme k jednotlivým props pomocou this.props.nazov_parametra. Pre zobrazenie mena upravíme komponent Hello nasledujúcim spôsobom:

// Hello.jsx
import React from 'react';

class Hello extends React.Component {

    render() {
        return <div>Hello {this.props.name}</div>;
    }

};

export default Hello;

Po znovu-načítaní webovej stránky by ste mali vidieť na obrazovke výpis “Hello Jaroslav”.

Dosť bolo teórie!

Nech to je pekné - Material UI

Material UI logo

Material UI je softvérový rámec pre jednoduché a rýchle vytvorenie responzívnych používateľských rozhraní. Dizajn rámca Material UI je založený na populárnom dizajnovom jazyku Material Design od spoločnosti Google. Material UI nám umožňuje využívať mnohé vopred pripravené ReactJS komponenty ako tlačidlá, menu, ikony, karty atď. Ukážka jednotlivých komponentov je dostupná v dokumentácií projektu.

Material UI si do nášho projektu nainštalujte spustením nasledujúceho príkazu:

npm install react-tap-event-plugin material-ui -S

Nech to má dušu - demo dáta

JSONPlaceholder

Nakoľko cieľom tohto článku je zasvätiť vás do tajov softvérového rámca ReactJS, nebudeme sa zaťažovať tvorbou vlastného REST API servera (backend). Na internete existuje množstvo riešení práve pre prípady testovania a prototypovania REST API klientov. Pre naše potreby je vhodné API dostupné na adrese .

Poďme kódiť

Ako prvé musíme upraviť inicializačný komponent (react/app/index.jsx) tak aby zahŕňal potrebné závislosti pridaním týchto importov:

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

Ďalej je nutné obaliť náš komponent Hello do komponentu MuiThemeProvider, ktorý poskytne potrebné závislosti všetkým vnoreným komponentom v našej aplikácii. Výsledný kód vyzerá nasledovne:

// index.jsx
import React from 'react';
import { render } from 'react-dom';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import Hello from './Hello.jsx';

render(
    <MuiThemeProvider muiTheme={getMuiTheme()}>
        <Hello />
    </MuiThemeProvider>,
    document.getElementById('content')
);

Pre rýchlu skúšku a ukážku môžeme upraviť aj samotný komponent Hello tak, aby zobrazoval napríklad Material UI tlačidlo:

// Hello.jsx
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

class Hello extends React.Component {

    render() {
        return <RaisedButton label="Stlač ma" />;
    }

};

export default Hello;

Všimnime si, že predtým, ako sme mohli použiť komponent RaisedButton, sme museli importovať tento komponent z knižnice Material UI:

import RaisedButton from 'material-ui/RaisedButton';

Ak všetko správne funguje, po znovu-načítaní stránky by ste mali vidieť tlačidlo Stlač ma: Material UI tlačidlo

Nový komponent

Super, takže v tomto bode by ste už mali rozumieť základným princípom a pravidlám rámca ReactJS. Naším ďalším krokom bude vytvorenie nového komponentu nazvaného Grid. Prečo práve Grid? Pretože v ňom využijeme komponent Grid List knižnice Material UI.

V nasledujúcich krokoch vytvoríme nový komponent, implementujeme doň Grid List z Material UI a naplníme ho demo údajmi. Tak poďme na to!

  1. Vytvorte si nový komponent s názvom Grid v priečinku react/app/ (react/app/Grid.jsx) a prekopírujte doň obsah komponentu Hello.jsx. Následne tento komponent osekáme o nepotrebné záležitosti a premenujeme ho tak, aby názov komponentu zodpovedal názvu súboru. Váš nový komponent Grid.jsx by mal mať nasledujúci obsah:

    // Grid.jsx
    import React from 'react';
    
    class Grid extends React.Component {
    
        render() {
            return <div></div>;
        }
    
    };
    
    export default Grid;
    
  2. Importujeme nevyhnutné závislosti pre správne fungovanie komponentu Grid List:

    import {GridList, GridTile} from 'material-ui/GridList';
    import IconButton from 'material-ui/IconButton';
    import Subheader from 'material-ui/Subheader';
    import StarBorder from 'material-ui/svg-icons/toggle/star-border';
    
  3. V hlavnom súbore (index.jsx) inicializujeme komponent Grid hneď pod komponentom Hello:

    // index.jsx
    import React from 'react';
    import { render } from 'react-dom';
    import getMuiTheme from 'material-ui/styles/getMuiTheme';
    import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
    
    import Hello from './Hello.jsx';
    import Grid from './Grid.jsx';
    
    render(
    
            <div>
    
    
            </div>
        ,
        document.getElementById('content')
    );
    

    Pozn.: Ak by ste teraz znovu načítali našu webovú stránku, nemali by ste zatial vidieť žiadne zmeny.

  4. Aktualizujme funkciu render() tak, aby bola pripravená na vykreslenie komponentu Grid List (tento kód bol prebraný z dokumentácie komponentu a mierne upravený pre naše potreby):

    render() {
            return <div>
    
                    Photos
                    {this.state.data.map((tile) => (
                        <GridTile
                            key={tile.id}
                            title={tile.title}
                            subtitle={<span>URl: <b>{tile.url}</b></span>}
                            actionIcon={}
                        >
                            <img src="{tile.thumbnailUrl}" />
    
                    ))}
    
            </div>;
        }
    

    Všimnime si, že v tele komponentu GridList sa v cykle map() vykonáva vykreslenie jeho jednotlivých častí. Tento cyklus je vykonávaný nad poľom objektov umiestnených v premennej this.state.data. Ako už bolo spomenuté v tomto článku, každý komponent má svoj vlastný stav a ak sa zmení stav komponentu, dochádza k jeho znovu-vykresleniu. V aktuálnom stave komponentu teda máme nejakú premennú data v ktorej sú umiestnené všetky údaje potrebné pre vykreslenie nášho komponentu GridList. V nasledujúcom kroku je teda nevyhnutné túto premennú zadefinovať a naplniť demo údajmi.

  5. Jednotlivé atribúty stavu komponentu môžeme inicializovať v konštruktore nášho komponentu nasledujúcim spôsobom:

    constructor(props) {
            super(props);
            this.state = {
                data: []
            };
        }
    

    V tomto bode iba definujeme, že naša premenná data bude reprezentovať pole objektov.

  6. Ďalším krokom je naplnenie poľa data údajmi, ktoré získame z našho REST API. Na to môžme využiť funkciu componentWillMount() ktorá nám zabezpečí zavolanie AJAX požiadavky ešte pred samotným vykreslením dát:

    componentWillMount() {
            $.ajax({
                url: this.props.url,
                dataType: 'json',
                cache: false,
                success: function(data) {
                    this.setState({data: data});
                }.bind(this),
                error: function(xhr, status, err) {
                    console.error(this.props.url, status, err.toString());
                }.bind(this)
            });
        }
    

    Verím, že jednotlivé riadky vyššie uvedeného kódu sú dostatočne zrozumiteľné a nie je ich potrebné bližšie vysvetľovať. Ak by si chcel niekto bližšie naštudovať túto problematiku, môže tak urobiť v dokumentácii.

  7. Pozorný čitateľ si iste všimne, že v našej AJAX požiadavke sa nachádza aj premenná this.props.url. My sme však zatiaľ pri inicializácii komponentu v hlavnom súbore (index.jsx) žiadne parametre nedefinovali. Poďme to teda napraviť. V súbore index.jsx pridajte do inicializácie komponentu Grid nasledujúcu URL:

    http://jsonplaceholder.typicode.com/photos?albumId=1
    

    Súbor index.jsx by mal teraz vyzerať nasledujúco:

    // index.jsx
    import React from 'react';
    import { render } from 'react-dom';
    import getMuiTheme from 'material-ui/styles/getMuiTheme';
    import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
    
    import Hello from './Hello.jsx';
    import Grid from './Grid.jsx';
    
    render(
    
            <div>
    
    
            </div>
        ,
        document.getElementById('content')
    );
    

Náš komponent je teraz pripravený na použitie, jednoducho sme si vytvorili novú premennú definujúcu stav komponentu, ktorú sme následne pri inicializácii komponentu naplnili demo údajmi z nášho REST API. Pre istotu sem uvádzam celý kód komponentu Grid, ak by náhodou niekomu nebolo niečo jasné:

// Grid.jsx
import React from 'react';
import {GridList, GridTile} from 'material-ui/GridList';
import IconButton from 'material-ui/IconButton';
import Subheader from 'material-ui/Subheader';
import StarBorder from 'material-ui/svg-icons/toggle/star-border';

class Grid extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
    }

    componentWillMount() {
        $.ajax({
            url: this.props.url,
            dataType: 'json',
            cache: false,
            success: function(data) {
                this.setState({data: data});
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    }

    render() {
        return <div>
            <GridList
                cellHeight={200}
            >
                <Subheader>Photos</Subheader>
                {this.state.data.map((tile) => (
                    <GridTile
                        key={tile.id}
                        title={tile.title}
                        subtitle={<span>URl: <b>{tile.url}</b></span>}
                        actionIcon={<IconButton><StarBorder color="white" /></IconButton>}
                    >
                        <img src={tile.thumbnailUrl} />
                    </GridTile>
                ))}
            </GridList>
        </div>;
    }

};

export default Grid;

Po znovu-načítaní našej stránky by ste mali vidieť komponent GridList naplnený našími dátami: Funkčný Grid List komponent

Posledné úpravy

Čo robiť v prípade, ak by sme chceli aby sa napríklad po kliknutí na niektorú z “dlaždíc” v komponente GridList vykonala nejaká akcia? Môžeme si to ukázať na jednoduchom príklade.

ReactJS má podporu pre najrôznejšie udalosti ako napríklad, kliknutie na nejaký komponent, stlačenie klávesy, ukázanie kurzorom na nejaký komponent a mnoho iných. V našom príklade využijeme udalosť onClick.

V komponente Grid.jsx pridajte metódu handleTileClick(). Túto metódu budeme volať po kliknutí na ktorúkoľvek “dlaždicu”.

handleTileClick() {
    alert("Klik!");
}

Následne stačí v metóde render() v komponente GridTile pridať jeden riadok definujúci udalosť a akciu, ktorá sa má vykonať ako reakcia na túto udalosť. V našom prípade je to udalosť onClick a reakciou je volanie metódy handleTileClick().

onClick={this.handleTileClick.bind(this)}

Ak teraz znovu načítate stránku a kliknete na ľubovoľnú dlaždicu, malo by sa objaviť vyskakovacie okno s textom “Klik!”.

Ak by ste chceli vykonať špecifickú akciu pre každú dlaždicu, napríklad namiesto všeobecného textu “Klik!” vypísať vo vyskakovacom okne titulok tejto dlaždice, je to možné vykonať pomocou jednoduchých parametrov funkcie tak, ako to poznáme z bežných programovacích jazykov. Kód by mal potom vyzerať nasledovne:

// Grid.jsx
import React from 'react';
import {GridList, GridTile} from 'material-ui/GridList';
import IconButton from 'material-ui/IconButton';
import Subheader from 'material-ui/Subheader';
import StarBorder from 'material-ui/svg-icons/toggle/star-border';

class Grid extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
    }

    componentWillMount() {
        $.ajax({
            url: this.props.url,
            dataType: 'json',
            cache: false,
            success: function(data) {
                this.setState({data: data});
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    }

    handleTileClick(tile) {
        alert(tile.title);
    }

    render() {
        return <div>
            <GridList
                cellHeight={200}
            >
                <Subheader>Photos</Subheader>
                {this.state.data.map((tile) => (
                    <GridTile
                        key={tile.id}
                        title={tile.title}
                        subtitle={<span>URl: <b>{tile.url}</b></span>}
                        actionIcon={<IconButton><StarBorder color="white" /></IconButton>}
                        onClick={this.handleTileClick.bind(this, tile)}
                    >
                        <img src={tile.thumbnailUrl} />
                    </GridTile>
                ))}
            </GridList>
        </div>;
    }

};

export default Grid;

Zobrazenie vyskakovacieho okna - ReactJS

Ako pokračovať ďalej?

V tomto tutoriále by bolo možné pokračovať ešte veľmi dlho, ak by som chcel pokryť všetky funkcie a popísať celú mágiu rámca ReactJS. Myslím si však, že na pochopenie základných princípov fungovania rámca ReactJS je tento tutoriál viac ako postačujúci. Je tu možno trocha viac teórie ako by sa vám páčilo, no bez poriadných teoretických základov nie je možné pochopiť niektoré skryté nástrahy, ktoré sa iste obiavia ak sa budete tejto technológii venovať aj v budúcnosti. Odporúčam vám poriadne si prejsť oficiálnu dokumentáciu a tutoriál na oficiálnych stránkach rámca ReactJS. Verím že som vám poskytol dostatočne kvalitný “odrazový mostík” pre začatie vlastných projektov v softvérovom rámci ReactJS.

Na záver mi už ostáva len popriať vám veľa zdaru pri osvojovaní si tejto, bezpochyby veľmi zaujímavej technológie.

Linkovať