2. diel - React Native - Prvá aplikácia

V minulej lekcii, Prvé aplikácie v React Native , sme si ukázali inštaláciu React Native a tvorbu aplikácií v tomto frameworku.

Je čas začať s vývojom React Native aplikácií.

Inštalácia Expo CLI

Predtým, než začneme, musíme mať nainštalované Node.js. Poďme si spoločne Node.js nainštalovať. Je to veľmi jednoduché. Prejdeme na oficiálne stránky Node.js, prípadne rovno do sekcie download, a stiahneme si inštalátor pre náš operačný systém. Ten následne spustíme a podľa inštrukcií nainštalujeme. Určite už ste takých inštalácií robili nespočet:) Keby ste sa chceli dozvedieť o Node.js viac, môžete si prejsť tiež naše lekcie na Node.js.

Keď už máme Node.js nainštalované, môžeme otvoriť konzolu a nainštalovať globálne Expo CLI:

$ npm install --global expo-cli

Inštaláciu si môžeme overiť pomocou príkazu:

$ expo whoami
Not logged in

Poprípade nám to môže napísať hlášku "Not logged in, run expo login to authenticate".

Tiež odporúčam nainštalovať aplikáciu pre Android / iOS Expo Go pre testovanie na mobile.

Vytvorenie prvého projektu

Teraz máme nainštalované všetko potrebné a môžeme si vytvoriť našu prvú aplikáciu. Spustíme si teda v nejakej projektovej zložke nasledujúci príkaz v konzole:

$ expo init StarterApp

Vyberieme blank v managed workflow (viď. Obrázok):

Teraz prejdeme do novo vytvoreného adresára

$ cd ./StarterApp/

Štruktúra aplikácie

Môžeme vidieť nasledujúcu štruktúru aplikácie:

StarterApp/
├── assets/              ← adresár ASSET, ako sú ikonky, fonty, obrázky a tak ďalej
├── node_modules/        ← adresár modulov (niečo ako zložka vendor / známa z Composer)
├── App.js               ← je vstupný súbor našej aplikácie
├── app.json             ← je konfiguračný súbor našou React Native aplikácie
├── package.json/        ← súbor, ktorý obsahuje metadáta relevantné pre projekt a slúži na správu závislostí projektu, skriptov, verzií a mnoho ďalších.
├── package-lock.json/   ← automatický súbor generovaný NPM, obsah exaktné štruktúry node_modules
└── babel.config.js/     ← nastavenie nástroje babel

Spustenie projektu

Teraz máme našu aplikáciu nainštalovanú a môžeme si ju spustiť. Zadáme si teda tento príkaz:

$ expo start

To nám otvorí okno prehliadača (poprípade zadáme ešte kláves D), aby sme sa dostali do tzv. Developer Tools):

Môžeme si pustiť aplikáciu skrz Expo Client App na našom zariadení, alebo môžeme použiť emulátor pre Android alebo iOS. Ak zariadenia nie sú na rovnakej sieti, môžeme využiť tunelovania spojenie, ktoré zaručuje Expo samotnej.

Po spustení aplikácie na našom zariadení môžeme vidieť nasledujúce obrazovku:

Otvoríme si súbor App.js, ktorý bude mať nasledujúci obsah:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

V prvej časti aplikácie sa importujú potrebné časti aplikácie. Ďalej máme našej funkcionálne komponentu, ktorá obsahuje logiku aplikácie. Ďalej máme objekt StyleSheet, ktorý obsahuje štylizovanie danej komponenty.

Teraz si upravíme kód. Importujeme si hook useState a komponent Button:

import React, {useState} from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

Pridáme si hook useState, ktorý nám dovoľuje spravovať stav (state) vo funkcionálne komponente:

export default function App() {
  const [outputText, setOutputText] = useState("Hello World");
  return (
    <View style={styles.container}>
      <Text>{outputText}</Text>
      <Button title="Change text" onPress={() => {
        setOutputText("I clicked button");
      }} />
      <StatusBar style="auto" />
    </View>
  );
}

Vytvorili sme si novú stavovú premennú outputText. Funkcia useState() je vlastne využitá pre deklarovanie stavové premenné, uložíme do premennej teda text Hello World. Funkcia useState() vracia aktuálny stav a funkciu, ktorá premennú nastaví (aktualizuje). Súbor si uložíme. Už máme spustené expo, takže sa aplikácia sama obnoví. Popr. môžeme zásterky s mobilom, kedy sa nám otvorí menu. Z ponuky vyberieme Reload. Po spustení a načítaní aplikácie na zariadení uvidíme nasledujúce:

Po kliknutí na tlačidlo sa zmení text. Uvidíme potom nami zadaný text:

Pre dnešok to bolo už všetko. Snáď bolo všetko pochopiteľné:)

V budúcej lekcii, Prvá multiplatformná aplikácia , opustíme teóriu a naprogramujeme si jednoduchú aplikáciu, ktorá bude reagovať na vstup od užívateľa a zobrazí nám dialógové okno s pozdravom.