Pouze tento týden sleva až 80 % na e-learning týkající se PHP
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 50% výuky zdarma!

Lekce 2 - React Native - První aplikace Nové

V minulé lekci, React Native - Základy React Native, jsme se dozvěděli, co je React Native a jak funguje.

Je čas začít s vývojem React Native aplikací.

Instalace Expo CLI

Předtím, než začneme, musíme mít nainstalované Node.js. Pojďme si společně Node.js nainstalovat. Je to velice jednoduché. Přejdeme na oficiální stránky Node.js, případně rovnou do sekce download, a stáhneme si instalátor pro náš operační systém. Ten následně spustíme a podle instrukcí nainstalujeme. Určitě už jste takových instalací dělali nespočet :) Kdyby jste se chtěli dozvědět o Node.js více, můžete si projít také naše lekce na Node.js.

Když už máme Node.js nainstalované, můžeme otevřít konzoli a nainstalovat globálně Expo CLI:

$ npm install --global expo-cli

Instalaci si můžeme ověřit pomocí příkazu:

$ expo whoami
Not logged in

Popřípadě nám to může napsat hlášku "Not logged in, run expo login to authenticate".

Také doporučuji nainstalovat aplikaci pro Android/iOS Expo Go pro testování na mobilu.

Vytvoření prvního projektu

Nyní máme nainstalované všechno potřebné a můžeme si vytvořit naši první aplikaci. Spustíme si tedy v nějaké projektové složce následující příkaz v konzoli:

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

Vybereme blank v managed workflow (viz. obrázek):

Výber šablony RN

Nyní přejdeme do nově vytvořeného adresáře

$ cd ./StarterApp/

Struktura aplikace

Můžeme vidět následující strukturu aplikace:

StarterApp/
├── assets/              ← adresář assetů, jako jsou ikonky, fonty, obrázky a tak dále
├── node_modules/        ← adresář modulů (něco jako složka vendor/ známá z composeru)
├── App.js               ← je vstupní soubor naší aplikace
├── app.json             ← je konfigurační soubor naší React Native aplikace
├── package.json/        ← soubor, který obsahuje metadata relevantní pro projekt a slouží ke správě závislostí projektu, skriptů, verzí a mnoho dalších.
├── package-lock.json/   ← automatický soubor generovaný npm, obsah exaktní struktury node_modules
└── babel.config.js/     ← nastavení nástroje babel

Spuštění projektu

Nyní máme naši aplikaci nainstalovanou a můžeme si ji spustit. Zadáme si tedy následující příkaz:

$ expo start

To nám otevře okno prohlížeče (popřípadě zadáme ještě klávesu D), abychom se dostali do tzv. Developer Tools):

Můžeme si pustit aplikaci skrz Expo Client App na našem zařízení, nebo můžeme použít emulátor pro Android nebo iOS. Jestli zařízení nejsou na stejné síti, můžeme využít tunelovaní spojení, které zaručuje Expo samotné.

Po spuštění aplikace na našem zařízení můžeme vidět následující obrazovku:

Otevřeme si soubor App.js, který bude mít následující 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 první části aplikace se importují potřebné části aplikace. Dále máme naší funkcionální komponentu, která obsahuje logiku aplikace. Dále máme objekt StyleSheet, který obsahuje stylizování dané komponenty.

Nyní si upravíme kód. Importujeme si hook useState a komponentu Button:

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

Přidáme si hook useState, který nám dovoluje spravovat stav (state) ve funkcionální komponentě:

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>
  );
}

Vytvořili jsme si novou stavovou proměnnou outputText. Funkce useState() je vlastně využita pro deklarování stavové proměnné, uložíme do proměnné tedy text Hello World. Funkce useState() vrací aktuální stav a funkci, která proměnnou nastaví (aktualizuje). Soubor si uložíme. Již máme spuštěné expo, takže se aplikace sama obnoví. Popř. můžeme zaštěrkat se svým telefonem, kdy se nám otevře menu. Z nabídky vybereme Reload. Po spuštění a načtení aplikace na zařízení uvidíme následující:

Po kliknutí na tlačítko se změní text. Uvidíme pak námi zadaný text:

Pro dnešek to bylo už vše. Snad bylo vše pochopitelné :)

V další lekci, React Native - TODO aplikace, si vytvoříme novou aplikaci na spravovaní našich TODO, použijeme k tomu nové komponenty jako jsou TextInput nebo Modal.


 

Předchozí článek
React Native - Základy React Native
Všechny články v sekci
React Native
Článek pro vás napsal Jakub Gabčo
Avatar
Jak se ti líbí článek?
2 hlasů
Aktivity (2)

 

 

Komentáře

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.

Zatím nikdo nevložil komentář - buď první!