September discount week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
50 % bodů zdarma na online výuku díky naší Slevové akci!

Lekce 2 - První aplikace v React Native

V minulé lekci Úvod do React Native, jsme si ukázali, jak React Native nainstalovat do Visual Studio Code a začali jsme vytvářet kalkulačku.

V dnešním tutoriálu si ukážeme instalaci Reactu do Visual Studio Code a naučíme se vytvořit jednoduchou aplikaci, na které si vysvětlíme základy tvorby aplikací za pomocí React Native.

První aplikace v React Native

Nainstalované Node.js a npm z předešlé lekce snad máme. Otevřeme si příkazový řádek a navigujeme do složky, kde budeme chtít vytvořit zkušební instalaci projektu. Pro zahájení instalace napíšeme:

npm install -g create-react-native-app

Příkaz potvrdíme:

Poté do příkazového řádku napíšeme:

cd desktop

Tím navigujeme na plochu, kde se bude náš projekt nacházet (nebo navigujte do složky, kde projekt chcete vytvořit). Poté vytvoříme aplikaci tímto příkazem:

create-react-native-app MyReactNative

Vytvoříme tak aplikaci s názvem MyReactNative. Jakmile proběhne instalace, tak by jsme měli mít všechny soubory na ploše ve složce MyReactNative/. Nyní pouze otevřeme složku MyReactNative/ ve svém IDE.

Volba aplikace

Výběr projektu, na kterém bychom si mohli demonstrovat vše potřebné, nebyl úplně snadný. Nakonec se ale vítězem stala jednoduchá kalkulačka, jejíž screenshot můžeme vidět níže:

Takže když už víme, v čem a co budeme dělat, tak hurá do práce.

Vytvoření projektu

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

Minule jsme si ukázali úplný základ pro vytvoření aplikace v React Native, ale pro dnešní aplikaci použijeme trochu jiný postup. Pro tento postup použijeme nástroj Node.js. Stačí ho mít nainstalovaný a pomocí něj spustit jediný příkaz ve složce, kam chceme umístit projekt. Jako parametr uvedeme název projektu:

npx create-react-app calculator

To je vše. Nyní počkáme na dokončení instalace. Jednoduše si otevřeme projekt ve svém vybraném IDE nebo textovém editoru a můžeme se pustit do programování :-)

Spuštění aplikace

Bylo by dobré si vyzkoušet, jak vůbec aplikaci spustit. To co jsme nainstalovali je totiž kompletní základ React Native aplikace:

npm start

Příkaz nám tedy spustí naši aplikaci v rámci lokálního serveru standardně na adrese http://localhost:3000/ a rovnou i otevře ve výchozím prohlížeči.

Základní komponenty

Tato aplikace kalkulačky bude potřebovat dvě součásti. Jedna je naše komponenta ResultComponent, kde zobrazujeme výstup, a druhá je KeypadComponent, kde potřebujeme zobrazit naši klávesnici. Ve složce src/ tedy vytvoříme adresář components/ a soubor komponenty ResultComponent.js, do kterého napíšeme následující 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 pouze renderuje výsledek kalkulačky do příslušných HTML elementů. Komponenta se skládá pouze z jedné značky, která zobrazuje obsah z rekvizit. Dále vytvoříme komponentu klávesnice. Naše klávesnice je jen spousta tlačítek, která po kliknutí něco dělají. Toto je kód našeho souboru 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;

Protože musíme odeslat událost click s informacemi o tom, na které tlačítko bylo kliknuto, zavoláme funkci this.props.OnClick() při každém kliknutí na tlačítko a předáme e.target.name jako argument.

Logiku této funkce definujeme do naší nadřazené komponenty, což je App.js.

Do souboru App.js, který je základem všech našich předchozích komponent a který vykresluje všechny hlavní komponenty, nejprve zahrneme všechny podřízené 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 jsme zahrnuli také proměnnou result, která se předá do naší komponenty pro výsledek. To nám umožní manipulovat s displejem. Proměnná this.state by se dala označit jako třídní.

Přidání funkcí

Všimněte si, že jsem this.onClick předal do komponenty Keypad, ale ještě jsem to nedefinoval.

Před definováním této funkce musíme udělat několik věcí. Musíme vytvořit funkce pro naše základní funkce kalkulačky. V této kalkulačce budou tři hlavní funkce:

  • this.Calculate() => Vypočítá výsledek našeho výrazu, který se spustí po stisknutí tlačítka „=“.
  • this.Reset() => Vymaže náš výstup. Funkce se spustí, když stiskneme tlačítko „C“.
  • this.Backspace() => Vymaže poslední stisknutý znak po kliknutí na tlačítko „CE“.

Nejprve vytvoříme tyto funkce v souboru 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;

Funkce calculate() je mnohem jednodušší, než například u PHP. V PHP bychom měli třeba blok switch, kde bychom kontrolovali operátor a pak podle toho počítali. Zde můžeme využít funkci eval(), která vypočítá výsledek, který rovnou v kalkulačce naťukáme.

Nakonec můžeme vytvořit naši funkci onClick() a zahrnout ji také do našeho souboru 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;

Funkce backspace() odstraní jedno číslo pomocí funkce slice(). Funkce onClick(), přečte argument, který je název tlačítka, na které bylo kliknuto. Díky tomu zavoláme příslušnou funkci a tím změníme stav.

Nakonec můžete přidat trochu CSS, aby kalkulačka vypadala líp. Tím jsme dokončili aplikaci kalkulačku pomocí react native.


 

Předchozí článek
Úvod do React Native
Všechny články v sekci
React Native
Článek pro vás napsal Matěj Plšek
Avatar
Jak se ti líbí článek?
1 hlasů
Jmenuji se Matěj Plšek, programování se věnuji už několik let. Věnuji se momentálně nejvíce JavaScriptu, hardwaru a C#.
Aktivity (7)

 

 

Komentáře

Avatar
Tomáš Daněk:29. srpna 23:12

Ahoj, zajímalo by mě, proč v tomto kurzu používáme tři různé způsoby vytvoření projektu a jaký je mezi nimi rozdíl:

expo init helloWorld
create-react-native-app MyReactNative
npx create-react-app calculator

Jak mám postupovat pokud mi aplikace calculator hlásí chybu:

Failed to compile.
./src/App.js
Module not found: Can't resolve 'react-native' in '...calculator/src'

Díky

 
Odpovědět
29. srpna 23:12
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 1 zpráv z 1.