Hledáme fulltime PHP programátora do ITnetwork týmu - 100% homeoffice, 100% časově flexibilní #bezdeadlinu Mám zájem!
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 50% výuky zdarma!
Discount week 50

Lekce 1 - React Native - Základy React Native

Obsah kurzu

V tomhle kurzu se naučíme vše o React Native. Je to úžasná technologie, která vám umožní vytvářet skutečné nativní aplikace, které můžeme nahrát do obchodu Apple AppStore nebo Google Play. To všechno jenom s pomocí JavaScriptu a React knihoven, o kterých se dozvíme více v tomhle kurzu. Jediným předpoklad pro tento kurz je alespoň základní znalost JavaScriptu. Žádná znalost React Native není vyžadována, naučíme se zde vše od základů.

Naučíme se, jak vytvářet vlastní aplikace pomocí vestavěných komponent, vlastních vytvořených komponent a ukážeme si, jak se vše procesuje na pozadí. Také se naučíme stylizovat aplikace, upravovat zobrazení na základě platformy, přidávat navigaci nebo měnit stav pomocí Redux. Určitě se také podíváme na to, jak používat nativní API jako je kamera, mapy nebo lokace. Dále se naučíme posílat data na server a dotazovat se na něj.

Pro každou hlavní část si vytvoříme jednoduchou aplikaci, abychom se zaměřili na časti, o kterých se chceme dozvědět více. Seznam aplikací, které vytvoříme:

  • TODO LIST aplikace
  • Aplikace hádej číslo
  • Aplikace seznamu jídel
  • E-shop aplikace
  • Aplikace míst, co navštívit

Na konci tohohle kurzu budeme schopní si vytvořit vlastní aplikaci se vším všudy a také se zajímat o pozici React Native developera.

Co je React Native

Co je tedy React Native? Začneme tím, co je React. Je to JavaScript knihovna na vytváření uživatelského rozhraní. Typicky využíváme React na vytváření webových aplikací. Důležité je ale vědět, že Reactu je jedno, co vytváříme. Na renderovaní se podílí jiná knižnice, kterou taky používáme při vývoji webových aplikací. Je to jen knihovna, která je dobrá při vytváření stromů komponentů a ke zjištění, zda se něco změnilo, pokud je třeba něco znovu vykreslit. Dělá to ale abstraktním způsobem, a proto můžeme použít React na jakékoli platformě.

Proto je také dobré myslet o React Native jako o samostatné knižnici, která obsahuje soubor speciálních React komponent, které můžeme využívat. Tyto komponenty jsou speciální, protože React Native ví, jak tyto speciální komponenty přeložit do nativních komponent pro Android nebo iOS a jak s nimi komunikovat.

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

Pro vývoj React Native se primárně využívá JavaScript. Je také možnost psát nativní kód pro iOS nebo Android (Kotlin nebo Swift). React Native nám dává nástroje pro napojení tohoto kódu k nativnímu kódu. Je to trochu pokročilejší a v mnoha aplikacích to není zapotřebí, protože existuje mnoho knižnic, které dané funkcionality již mají implementovány a není nutné to vyvíjet znovu.

Na obrázku níže můžeme vidět, jak funguje React.js spolu s React Native:

React.js a React Native

Jak funguje React Native

Jak už víme, pomocí React a React Native vytváříme aplikaci. Typický velmi jednoduchý kód může vypadat nějak takto:

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

Jak je možné vidět. Využíváme speciální komponenty jako je View a Text. Tyto komponenty se kompilují do native widgetů pro každou platformu. Je důležité vědět, že náš JavaScript kód se nekompiluje do native kódu, ale komponenty se vždy kompilují. Tímto je možné dosáhnout velmi rychlých aplikací pomocí React Native.

Porovnání React.js, Android , iOS komponent a React Native komponent .<> Porovnání React.js, Android , iOS komponent a React Native komponent

Na přiloženém obrázku můžeme vidět stejnou komponentu, ale za použití jiného vývojářského prostředí. Je jasné, že se nezajímáme o React pro web, ten slouží pouze pro porovnání. React Native kompiluje tyto komponenty do native kódu pro každou platformu zvlášť.

UI a Logika aplikace .<> UI a Logika aplikace

Jak jsme si již řekli, komponenty jsou kompilovány do native widgetů. Avšak logika aplikace napsána v JavaScriptu se nekompiluje, ale běží v Runtime na speciálně vytvořeném vlákně, o které se stará React Native. Toto vlákno komunikuje s platformou pomocí tzv. Bridge. O to všechno se stará React Native. My tímto pádem máme přístup také k nativním komponentám jako je kamera nebo mapy a tak dále. Toto je základ, který bychom měli vědět o tom, jak to funguje na pozadí.

Expo vs React Native CLI

Nyní, když už víme, co React Native je, můžeme začít. Začneme tedy vytvořením naší první aplikace v React Native. Při vytváření React Native aplikace máme 2 možnosti:

1. jak vytvořit naši aplikaci, a to pomocí React Native CLI nebo Expo. Expo je aplikace třetí strany, která je zcela zdarma. Nemusíme se nikde přihlašovat ani platit za vytvoření buildu aplikace. Expo nám poskytuje wrapper, který usnadňuje vývoj aplikace. Nemusíme instalovat X-Code nebo Android Studio. Také usnadňuje spuštění nevybuilděné aplikace na reálném zařízení. Expo tvoří takový wrapper okolo naší aplikace. Avšak tím pádem nám odebírá některé možnosti při vývoji.

2. Natož React Native CLI je vyvíjen vývojáři, který vyvíjejí také React Native. Při tomto postupu je zapotřebí mít nainstalované Android Studio nebo X-Code pro vybuilděné aplikace. Také bude zapotřebí mnoho nastavování. Jakmile začneme přidávat určité nativní funkce, řekněme, že budeme chtít použít kameru zařízení. Budeme muset přidat balíčky třetích stran, kde proces nastavení může být docela složitý, a proto to může být těžkopádnější pro vývoj. Při tomto workflow však máme možnost využít a upravit každou část aplikace. Také můžeme psát vlastní nativní kód pro Android nebo iOS a napojit ho do naší aplikace. React Native CLI se využívá hlavně zkušenými vývojáři pro velmi komplexní aplikace, kde bude zapotřebí jemného dolaďování, vlastních přístupů atd. Více o tom je možné se dozvědět na oficiálních stránkách React Native

My v našem kurzu budeme využívat Expo v Managed workflow (spravovaný pracovní postup). Expo už také poskytuje Bare workflow (holý pracovní postup), aby se přiblížilo React Native CLI. Pro začátečníky a pro normální aplikace je Managed workflow úplně postačující. Expo pro každý projekt poskytuje možnost Eject, kde se opustí Expo workflow a náš projekt bude jen typickým nativním projektem s balíčky React Native a Expo SDK. V kurzu si také ukážeme nějaké začátky s Bare workflow a co by to pro nás znamenalo při vývoji.

Hlavní výhoda Expo je to, že můžeme využít Expo klienta, kterého spustíme na reálnem zařízení nebo simulátoru. Ten nám bude sloužit jak wrapper pro naši nevybuilděnou aplikaci. Také si to bude moc nainstalovat klient bez potřeby buildu aplikace. Aplikace ale nejsou na Expo klientovi závislé a po vybuildění ji nepotřebují a fungují jako všechny ostatní aplikace.

Pro tuto lekci to bude vše.


 

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?
Ještě nikdo nehodnotil, buď první!
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í!