1. diel - React Native - Základy 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.

Obsah kurzu

V tomto kurze sa naučíme všetko o React Native. Je to úžasná technológia, ktorá vám umožní vytvárať skutočné natívne aplikácie, ktoré môžeme nahrať do obchodu Apple AppStore alebo Google Play. To všetko len s pomocou JavaScriptu a React knižníc, o ktorých sa dozvieme viac v tomto kurze. Jediným predpoklad pre tento kurz je aspoň základná znalosť JavaScriptu. Žiadna znalosť React Native nie je vyžadovaná, naučíme sa tu všetko od základov.

Naučíme sa, ako vytvárať vlastné aplikácie pomocou vstavaných komponentov, vlastných vytvorených komponentov a ukážeme si, ako sa všetko procesom na pozadí. Tiež sa naučíme štylizovať aplikácia, upravovať zobrazenie na základe platformy, pridávať navigáciu alebo meniť stav pomocou Redux. Určite sa tiež pozrieme na to, ako používať natívne API ako je kamera, mapy alebo lokácie. Ďalej sa naučíme posielať dáta na server a pýtať sa na neho.

Pre každú hlavnú časť si vytvoríme jednoduchú aplikáciu, aby sme sa zamerali na časti, o ktorých sa chceme dozvedieť viac. Zoznam aplikácií, ktoré vytvoríme:

• TODO LIST aplikácie
• Aplikácia hádej číslo
• Aplikácia zoznamu jedál
• E-shop aplikácie
• Aplikácia miest, čo navštíviť

Na konci tohoto kurzu budeme schopní si vytvoriť vlastnú aplikáciu so všetkým a tiež sa zaujímať o pozíciu React Native developera.

Čo je React Native

Čo je teda React Native? Začneme tým, čo je React. Je to JavaScript knižnica na vytváranie užívateľského rozhrania. Typicky využívame React na vytváranie webových aplikácií. Dôležité je ale vedieť, že React je jedno, čo vytvárame. Na renderovanie sa podieľa iná knižnice, ktorú taky používame pri vývoji webových aplikácií. Je to len knižnica, ktorá je dobrá pri vytváraní stromov komponentov a na zistenie, či sa niečo zmenilo, ak je treba niečo znova vykresliť. Robí to ale abstraktným spôsobom, a preto môžeme použiť React na akejkoľvek platforme.

Preto je tiež dobré myslieť o React Native ako o samostatné knižnicu, ktorá obsahuje súbor špeciálnych React komponentov, ktoré môžeme využívať. Tieto komponenty sú špeciálne, pretože React Native vie, ako tieto špeciálne komponenty preložiť do natívnych komponentov pre Android alebo iOS a ako s nimi komunikovať.

Pre vývoj React Native sa primárne využíva JavaScript. Je tiež možnosť písať natívny kód pre iOS alebo Android ( Kotlin alebo Swift). React Native nám dáva nástroje pre napojenie tohto kódu k natívnemu kódu. Je to trochu pokročilejšie a v mnohých aplikáciách to nie je potrebné, pretože existuje mnoho kniznica, ktoré dané funkcionality už majú implementované a nie je nutné to vyvíjať znova.

Na obrázku nižšie môžeme vidieť, ako funguje React.js spolu s React Native:

Ako funguje React Native

Ako už vieme, pomocou React a React Native vytvárame aplikáciu. Typický veľmi jednoduchý kód môže vyzerať nejako takto:

const App = props => {
   return (
      <View>
         <Text>Hello There!</Text>
      </View>
   );
}

Ako je možné vidieť. Využívame špeciálne komponenty ako je View a Text. Tieto komponenty sa kompilujú do native widgetov pre každú platformu. Je dôležité vedieť, že náš JavaScript kód sa nekompilujú do native kódu, ale komponenty sa vždy kompilujú. Týmto je možné dosiahnuť veľmi rýchlych aplikácií pomocou React Native.

. <> Porovnanie React.js, Android, iOS komponentov a React Native komponentov

Na priloženom obrázku môžeme vidieť rovnakú komponent, ale za použitia iného vývojárskeho prostredia. Je jasné, že sa nezaujímame o React pre web, ten slúži len pre porovnanie. React Native kompiluje tieto komponenty do native kódu pre každú platformu zvlášť.

. <> UI a Logika aplikácie

Ako sme si už povedali, komponenty sú skompilované do native widgetov. Avšak logika aplikácie napísaná v JavaScripte sa nekompilujú, ale beží v Runtime na špeciálne vytvorenom vlákne, o ktoré sa stará React Native. Toto vlákno komunikuje s platformou pomocou tzv. Bridge. O to všetko sa stará React Native. My týmto pádom máme prístup tiež k natívnym komponentom ako je kamera alebo mapy a tak ďalej. Toto je základ, ktorý by sme mali vedieť o tom, ako to funguje na pozadí.

Expo vs React Native CLI

Teraz, keď už vieme, čo React Native je, môžeme začať. Začneme teda vytvorením našej prvej aplikácie v React Native. Pri vytváraní React Native aplikácie máme 2 možnosti:

1. ako vytvoriť našu aplikáciu, a to pomocou React Native CLI alebo Expo. Expo je aplikácia tretej strany, ktorá je úplne zadarmo. Nemusíme sa nikde prihlasovať ani platiť za vytvorenie buildu aplikácie. Expo nám poskytuje wrapper, ktorý uľahčuje vývoj aplikácie. Nemusíme inštalovať X-Code alebo Android Studio. Tiež uľahčuje spustenie nevybuilděné aplikácie na reálnom zariadení. Expo tvorí taký wrapper okolo našej aplikácie. Avšak tým pádom nám odoberá niektoré možnosti pri vývoji.

2. Nieto React Native CLI je vyvíjaný vývojári, ktorý vyvíjajú tiež React Native. Pri tomto postupe je potrebné mať nainštalované Android Studio alebo X-Code pre vybuilděné aplikácie. Tiež bude potrebné mnoho nastavovania. Akonáhle začneme pridávať určité natívne funkcie, povedzme, že budeme chcieť použiť kameru zariadení. Budeme musieť pridať balíky tretích strán, kde proces nastavenia môže byť celkom zložitý, a preto to môže byť ťažkopádnejšia pre vývoj. Pri tomto workflow však máme možnosť využiť a upraviť každú časť aplikácie. Tiež môžeme písať vlastné natívny kód pre Android alebo iOS a napojiť ho do našej aplikácie. React Native CLI sa využíva hlavne skúsenými vývojári pre veľmi komplexné aplikácie, kde bude potrebné dolaďovania, vlastných prístupov. Viac o tom je možné sa dozvedieť na oficiálnych stránkach React Native

My v našom kurze budeme využívať Expo v Managed workflow (spravovaný pracovný postup). Expo už tiež poskytuje Bare workflow (holý pracovný postup), aby sa priblížilo React Native CLI. Pre začiatočníkov a pre normálne aplikácie je Managed workflow úplne postačujúce. Expo pre každý projekt poskytuje možnosť Eject, kde sa opustí expo workflow a náš projekt bude len typickým natívnom projektom s balíčkami React Native a expo SDK. V kurze si tiež ukážeme nejaké začiatky s Bare workflow a čo by to pre nás znamenalo pri vývoji.

Hlavná výhoda Expo je to, že môžeme využiť Expo klienta, ktorého spustíme na reálnom zariadení alebo simulátore. Ten nám bude slúžiť ako wrapper pre našu nevybuilděnou aplikáciu. Tiež si to bude moc nainštalovať klient bez potreby buildu aplikácie. Aplikácia ale nie sú na Expo klientovi závislé a po vybuildění ju nepotrebujú a fungujú ako všetky ostatné aplikácie.

Pre túto lekciu to bude všetko.

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