2. diel - Prvé aplikácie v React Native

V predchádzajúcej lekcii, React Native - Predstavenie frameworku , sme si popísali výhody mobilných aplikácií, inštaláciu NodeJS a Android Studia a pripravili si vývojové prostredie.

V dnešnom tutoriále si ukážeme inštaláciu React do Visual Studio Code a naučíme sa vytvoriť jednoduchú aplikáciu, na ktorej si vysvetlíme základy tvorby aplikácií za pomocou React Native.

Prvé aplikácie v React Native

Nainštalované Node.js a NPM z predošlej lekcie snáď máme. Otvoríme si príkazový riadok a navigujeme do zložky, kde budeme chcieť vytvoriť skúšobnú inštaláciu projektu. Pre zahájenie inštalácie napíšeme:

npm install -g create-react-native-app

Príkaz potvrdíme:

Potom do príkazového riadku napíšeme:

cd desktop

Tým navigujeme na plochu, kde sa bude náš projekt nachádzať (alebo surfujte do zložky, kde projekt chcete vytvoriť). Potom vytvoríme aplikáciu týmto príkazom:

create-react-native-app MyReactNative

Vytvoríme tak aplikáciu s názvom MyReactNative. Akonáhle prebehne inštalácia, tak by sme mali mať všetky súbory na ploche v priečinku MyReactNative/. Teraz len otvoríme zložku MyReactNative/ vo svojom IDE.

Voľba aplikácie

Výber projektu, na ktorom by sme si mohli demonštrovať všetko potrebné, nebol úplne jednoduchý. Nakoniec sa ale víťazom stala jednoduchá kalkulačka, ktorej screenshot môžeme vidieť nižšie:

Takže keď už vieme, v čom a čo budeme robiť, tak hurá do práce.

Vytvorenie projektu

Minule sme si ukázali úplný základ pre vytvorenie aplikácie v React Native, ale pre dnešnú aplikáciu použijeme trochu iný postup. Pre tento postup použijeme nástroj Node.js. Stačí ho mať nainštalovaný a pomocou neho spustiť jediný príkaz v priečinku, kam chceme umiestniť projekt. Ako parameter uvedieme názov projektu:

npx create-react-app calculator

To je všetko. Teraz počkáme na dokončenie inštalácie. Jednoducho si otvoríme projekt vo svojom vybranom IDE alebo textovom editore a môžeme sa pustiť do programovania:-)

Spustení aplikácie

Bolo by dobré si vyskúšať, ako vôbec aplikáciu spustiť. To čo sme nainštalovali je totiž kompletný základ React Native aplikácie:

npm start

Príkaz nám teda spustí našu aplikáciu v rámci lokálneho servera štandardne na adrese http: // localhost: 3000 / a rovno aj otvorí v predvolenom prehliadači.

Základné komponenty

Táto aplikácia kalkulačky bude potrebovať dve súčasti. Jedna je naša komponenta ResultComponent, kde zobrazujeme výstup, a druhá je KeypadComponent, kde potrebujeme zobraziť našu klávesnicu. V priečinku src/ teda vytvoríme adresár components/ a súbor komponenty ResultComponent.js, do ktorého napíšeme nasledujúci kód:

import React, {Component} from 'react-native';

class ResultComponent extends Component {


    render() {
        let {result} = this.props;
        return (
            <div className="result">
                <p>{result}</p>
            </div>
        )
        ;
    }
}

export default ResultComponent;

Tento kód len renderuje výsledok kalkulačky do príslušných HTML elementov. Komponenta sa skladá iba z jednej značky, ktorá zobrazuje obsah z rekvizít. Ďalej vytvoríme komponentu klávesnice. Naša klávesnica je len kopa tlačidiel, ktorá po kliknutí niečo robia. Toto je kód nášho súboru KeypadComponent.js:

import React, {Component} from 'react-native';

class KeyPadComponent extends Component {

    render() {
        return (
            <div className="button">
                <button name="(" onClick={e => this.props.onClick(e.target.name)}>(</button>
                <button name="CE" onClick={e => this.props.onClick(e.target.name)}>CE</button>
                <button name=")" onClick={e => this.props.onClick(e.target.name)}>)</button>
                <button name="C" onClick={e => this.props.onClick(e.target.name)}>C</button><br/>

                <button name="1" onClick={e => this.props.onClick(e.target.name)}>1</button>
                <button name="2" onClick={e => this.props.onClick(e.target.name)}>2</button>
                <button name="3" onClick={e => this.props.onClick(e.target.name)}>3</button>
                <button name="+" onClick={e => this.props.onClick(e.target.name)}>+</button><br/>

                <button name="4" onClick={e => this.props.onClick(e.target.name)}>4</button>
                <button name="5" onClick={e => this.props.onClick(e.target.name)}>5</button>
                <button name="6" onClick={e => this.props.onClick(e.target.name)}>6</button>
                <button name="-" onClick={e => this.props.onClick(e.target.name)}>-</button><br/>

                <button name="7" onClick={e => this.props.onClick(e.target.name)}>7</button>
                <button name="8" onClick={e => this.props.onClick(e.target.name)}>8</button>
                <button name="9" onClick={e => this.props.onClick(e.target.name)}>9</button>
                <button name="*" onClick={e => this.props.onClick(e.target.name)}>x</button><br/>

                <button name="." onClick={e => this.props.onClick(e.target.name)}>.</button>
                <button name="0" onClick={e => this.props.onClick(e.target.name)}>0</button>
                <button name="=" onClick={e => this.props.onClick(e.target.name)}>=</button>
                <button name="/" onClick={e => this.props.onClick(e.target.name)}>÷</button><br/>
            </div>
        );
    }
}


export default KeyPadComponent;

Pretože musíme odoslať udalosť click s informáciami o tom, na ktoré tlačidlo bolo kliknuté, zavoláme funkciu this.props.OnClick() pri každom kliknutí na tlačidlo a odovzdáme e.target.name ako argument.

Logiku tejto funkcie definujeme do našej nadradenej komponenty, čo je App.js.

Do súboru App.js, ktorý je základom všetkých našich predchádzajúcich komponentov a ktorý vykresľuje všetky hlavné komponenty, najprv zahrnieme všetky podriadené komponenty:

import React, { Component } from 'react-native';
import './App.css';
import ResultComponent from './components/ResultComponent';
import KeyPadComponent from "./components/KeyPadComponent";

class App extends Component {
    constructor(){
        super();

        this.state = {
            result: ""
        }
    }

    render() {
        return (
            <div>
                <div className="calculator-body">
                    <h1>Simple Calculator</h1>
                    <ResultComponent result={this.state.result}/>
                    <KeyPadComponent onClick={this.onClick}/>
                </div>
            </div>
        );
    }
}

export default App;

Do this.state sme zahrnuli tiež premennú result, ktorá sa odovzdá do našej komponenty pre výsledok. To nám umožní manipulovať s displejom. Premenná this.state by sa dala označiť ako triedny.

Pridanie funkcií

Všimnite si, že som this.onClick odovzdal do komponenty Keypad, ale ešte som to nedefinoval.

Pred definovaním tejto funkcie musíme urobiť niekoľko vecí. Musíme vytvoriť funkcie pre naše základné funkcie kalkulačky. V tejto kalkulačke budú tri hlavné funkcie:

• this.Calculate() => Vypočíta výsledok nášho výrazu, ktorý sa spustí po stlačení tlačidla "=".
• this.Reset() => Vymaže náš výstup. Funkcia sa spustí, keď stlačíme tlačidlo "C".
• this.Backspace() => Vymaže posledný stlačený znak po kliknutí na tlačidlo "CE".

Najprv vytvoríme tieto funkcie v súbore App.js:

import React, { Component } from 'react-native';
import './App.css';
import ResultComponent from './components/ResultComponent';
import KeyPadComponent from "./components/KeyPadComponent";

class App extends Component {
    constructor(){
        super();

        this.state = {
            result: ""
        }
    }


    calculate = () => {
        try {
            this.setState({
                // eslint-disable-next-line
                result: (eval(this.state.result) || "" ) + ""
            })
        } catch (e) {
            this.setState({
                result: "error"
            })

        }
    };

    reset = () => {
        this.setState({
            result: ""
        })
    };

    backspace = () => {
        this.setState({
            result: this.state.result.slice(0, -1)
        })
    };

    render() {
        return (
            <div>
                <div className="calculator-body">
                    <h1>Simple Calculator</h1>
                    <ResultComponent result={this.state.result}/>
                    <KeyPadComponent onClick={this.onClick}/>
                </div>
            </div>
        );
    }
}

export default App;

Funkcia calculate() je oveľa jednoduchšie, než napríklad u PHP. V PHP by sme mali potrebné blok switch, kde by sme kontrolovali operátor a potom podľa toho počítali. Tu môžeme využiť funkciu eval(), ktorá vypočíta výsledok, ktorý rovno v kalkulačke naťukáme.

Nakoniec môžeme vytvoriť našu funkciu onClick() a zahrnúť ju tiež do nášho súboru App.js:

import React, { Component } from 'react';
import './App.css';
import ResultComponent from './components/ResultComponent';
import KeyPadComponent from "./components/KeyPadComponent";

class App extends Component {
    constructor(){
        super();

        this.state = {
            result: ""
        }
    }

    onClick = button => {

        if(button === "="){
            this.calculate()
        }

        else if(button === "C"){
            this.reset()
        }
        else if(button === "CE"){
            this.backspace()
        }

        else {
            this.setState({
                result: this.state.result + button
            })
        }
    };


    calculate = () => {
        try {
            this.setState({
                // eslint-disable-next-line
                result: (eval(this.state.result) || "" ) + ""
            })
        } catch (e) {
            this.setState({
                result: "error"
            })

        }
    };

    reset = () => {
        this.setState({
            result: ""
        })
    };

    backspace = () => {
        this.setState({
            result: this.state.result.slice(0, -1)
        })
    };

    render() {
        return (
            <div>
                <div className="calculator-body">
                    <h1>Simple Calculator</h1>
                    <ResultComponent result={this.state.result}/>
                    <KeyPadComponent onClick={this.onClick}/>
                </div>
            </div>
        );
    }
}

export default App;

Funkcia backspace() odstráni jedno číslo pomocou funkcie slice(). Funkcia onClick(), prečíta argument, ktorý je názov tlačidla, na ktoré bolo kliknuté. Vďaka tomu zavoláme príslušnú funkciu a tým zmeníme stav.

Nakoniec môžete pridať trochu CSS, aby kalkulačka vyzerala lepšie. Tým sme dokončili aplikáciu kalkulačku pomocou react native.

V budúcej lekcii, React Native - Promises a asynchrónne funkcie , si popíšeme asynchrónne funkcie a promises a ich využitie.