Lekce 1 - Úvod do React Native

Vitajte u prvého dielu on-line kurzu o JavaScript knižnici React Native / React.js. V dnešnom diele si ukážeme vývoj jednoduché aplikácie.

Úvod do React Native

React je open-source JavaScript knižnica vyvinutá Facebookom pre vytváranie užívateľských rozhraní. Používa sa pre spracovanie vrstvy zobrazenie pre webové a mobilné aplikácie. ReactJS slúži na vytvorenie opakovane použiteľných komponentov UI. V súčasnej dobe je jednou z najobľúbenejších knižníc JavaScriptu v tomto poli a má za sebou silnú základňu a veľkú komunitu. Ak sa chcete naučiť ReactJS, mali by ste mať znalosti JavaScriptu, HTML a CSS.

Komponenty

Komponenty v React Native slúži na skladanie užívateľského rozhrania. Ide o predpripravené prvky ako je napríklad text, tlačidlo alebo textové pole, ktoré univerzálne fungujú na všetkých podporovaných platformách. Okrem týchto základných komponentov možno definovať vlastné komponenty alebo importovať komponenty tvorené komunitou. Okrem univerzálnych komponentov existujú aj komponenty natívny, ktoré sú exkluzívne pre svoju platformu, pretože ich nie je možné spoľahlivo implementovať na platformy ostatní. Podobne ako v HTML sa komponenty delia na tie s párovými a nepárovými tagy. Komponenty s párovými tagy prijímajú potomkami buď vo forme ďalších komponentov alebo textu. Pred tým, než sa dá komponentov použiť, je potrebné ho importovať z modulu react-native:

import {
 AppRegistry,
 Text,
 View,
 Image,
 } from 'react-native';

Importovanie komponenty React native

Párový a nepárový komponentov:

<View>
   <Text>Hello World!</Text>
   <Image source={require('./img/obrazek.jpg')}/>
</View>

Vlastnosti komponentov:

<View style={{backgroundColor: 'red'}}>
   <Image source={require('./img/obrazek.jpg')}/>
   <Button onPress={() => {console.log("Klik");}} title="Tlačítko" />
</View>

Možnosti

Aby sme sa navnadili, prečo je dobré vedieť tento framework, povieme si pár možností či výhod:

• Možnosť používať HTML tagy priamo v kóde je ohromná výhoda a uľahčenie.
• JSX umožnuje programátorom vytvárať HTML šablóny, priraďovať k nim funkcie a rozhodovať, čo má byť vyrenderované.
• V React sa používa one-way dáta flow. Dáta sa teda odovzdávajú jedným smerom z komponenty na komponent. Každá komponenta je prekreslenie na základe nového stavu týchto dát.
• Oproti JavaScript frameworkům Angular.js alebo Ember.js, čo sú rozsiahlejšie webové frameworky, React má väčší počet knižníc, ktorými možno React aplikáciu doplniť podľa aktuálnej potreby.
• Aplikácia sa vyrenderuje na všetkých podporovaných platformách rovnako. Nie je potrebné meniť jazyk celého projektu či ho úplne prepisovať.

Požiadavky

Než sa pustíme do samotnej práce s React Native, je potreba ešte spomenúť požadované znalosti, ktoré by ste mali mať, a tiež nástroje, s ktorými budeme pracovať. Ku všetkým máme tu na sieti kurzy, takže ak niečo z toho náhodou nepoznáte, absolvujte prosím najskôr príslušný kurz.

Znalosti

Určite ste už postrehli, že ako programovací jazyk budeme používať JavaScript. Tým je myslený prevažne čistý JS plus samozrejme funkcionalita z knižnice React Native. Navyše budeme používať aj najnovšie vychytávky z ES6 +, to sú "novej" verzie JavaScriptu. Inak v rámci tvorby webového UI sa dozaista nezaobídete bez znalosti už spomínaného HTML a CSS.

Nástroje a IDE

V prvom rade bude potrebné nainštalovať Node.js. Ďalej by som odporučil nainštalovať nejaké IDE, napr: webstore alebo Visual Studio Code. Teraz by sme mali mať všetko potrebné pre napísanie našej prvej aplikácie:-)

Prvý React Native aplikácie

Začneme teda s tvorbou naozaj jednoduché webové aplikácie za použitia React Native a čo je vhodnejšie ako osvedčené "Hello World"?

Prvý si ale ukážeme, ako aplikáciu vôbec vytvoríme. Pretože sme už nainštalovali Node.js, použijeme príkaz npm k inštalácii CLI:

npm install -g expo-cli

Po inštalácii CLI vytvoríme aplikáciu takto:

expo init helloWorld

Po zadaní príkazu sa nás konzola opýta, či chceme, aby pozadie bolo prázdne. Stlačíme enter. Potom už je náš projekt vytvorený.

Aplikáciu spustíme príkazom:

npm run web

Aplikáciu môžeme tiež spustiť na Androide alebo iOS

Štruktúra

Teraz sa už môžeme pustiť do programovania:-) V projekte môžeme vidieť súbor app.json. Nájdeme tu všetky konfigurácie súvisiace s aplikácií ako je názov aplikácie, verzia sdk, ikona atď.

Máme tu tiež súbor package.json so zoznamom závislosťou pre aplikáciu.

Ďalej nájdeme súbor App.js. Je to východiskový bod aplikácie. Tu môžeme vidieť metódu renderovanie. Metóda obsahuje View komponentu, ktorá sa používa na zabalenie Text komponenty.

Odstránime existujúci kód z App.js a napíšeme nasledujúci kód:

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

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default HelloWorldApp;

A to je všetko. Keď otvoríme súbor vo webovom prehliadači, uvidíme uprostred stránky nápis "Hello world".

Ako som už písal v úvode, základom všetkého sú komponenty a princíp je inak veľmi jednoduchý:-) :

• načítame React Native knižnicu
• Pomocou nástrojov z knižnice React vytvoríme vlastný komponent pre nadpis
• Vykreslíme komponent do nášho koreňa na stránke

To je z dnešného tutoriálu všetko.