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

Lekce 1 - Úvod do React Native

Vítejte u prvního dílu on-line kurzu o JavaScript knihovně React Native / React.js. V dnešním díle si ukážeme vývoj jednoduché aplikace.

Úvod do React Native

React je open-source JavaScript knihovna vyvinutá Facebookem pro vytváření uživatelských rozhraní. Používá se pro zpracování vrstvy zobrazení pro webové a mobilní aplikace. ReactJS slouží k vytvoření opakovaně použitelných komponent UI. V současné době je jednou z nejoblíbenějších knihoven JavaScriptu v tomto poli a má za sebou silnou základnu a velkou komunitu. Pokud se chcete naučit ReactJS, měli byste mít znalosti JavaScriptu, HTML a CSS.

Komponenty

Komponenty v React Native slouží ke skládání uživatelského rozhraní. Jde o předpřipravené prvky jako je například text, tlačítko nebo textové pole, které univerzálně fungují na všech podporovaných platformách. Kromě těchto základních komponentů lze definovat vlastní komponenty nebo importovat komponenty tvořené komunitou. Kromě univerzálních komponentů existují i komponenty nativní, které jsou exkluzivní pro svoji platformu, protože je není možné spolehlivě implementovat na platformy ostatní. Podobně jako v HTML se komponenty dělí na ty s párovými a nepárovými tagy. Komponenty s párovými tagy přijímají potomky buď ve formě dalších komponentů anebo textu. Před tím, než lze komponent použít, je třeba ho importovat z modulu react-native:

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

Importování komponenty React native

Párový a nepárový komponent:

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

Vlastnosti komponentů:

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

Možnosti

Abychom se navnadili, proč je dobré umět tento framework, řekneme si pár možností či výhod:

  • Možnost používat HTML tagy přímo v kódu je ohromná výhoda a ulehčení.
  • JSX umožnuje programátorům vytvářet HTML šablony, přiřazovat k nim funkce a rozhodovat, co má být vyrenderováno.
  • V Reactu se používá one-way data flow. Data se tedy předávají jedním směrem z komponenty na komponentu. Každá komponenta je překreslena na základě nového stavu těchto dat.
  • Oproti JavaScript frameworkům Angular.js nebo Ember.js, což jsou rozsáhlejší webové frameworky, React má větší počet knihoven, kterými lze React aplikaci doplnit dle aktuální potřeby.
  • Aplikace se vyrenderuje na všech podporovaných platformách stejně. Není třeba měnit jazyk celého projektu či ho úplně přepisovat.

Požadavky

Než se pustíme do samotné práce s React Native, je potřeba ještě zmínit vyžadované znalosti, které byste měli mít, a také nástroje, se kterými budeme pracovat. Ke všem máme zde na síti kurzy, takže pokud něco z toho náhodou neznáte, absolvujte prosím nejdříve příslušný kurz.

Znalosti

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

Určitě jste již postřehli, že jako programovací jazyk budeme používat JavaScript. Tím je myšlen převážně čistý JS plus samozřejmě funkcionalita z knihovny React Native. Navíc budeme používat i nejnovější vychytávky z ES6+, to jsou "nové" verze JavaScriptu. Jinak v rámci tvorby webového UI se dozajista neobejdete bez znalosti již zmíněného HTML a CSS.

Nástroje a IDE

V první řadě bude potřeba nainstalovat Node.js. Dále bych doporučil nainstalovat nějaké IDE, např: Webstorm nebo Visual Studio Code. Nyní bychom měli mít vše potřebné pro napsání naší první aplikace :-)

První React Native aplikace

Začneme tedy s tvorbou opravdu jednoduché webové aplikace za použití React Native a co je vhodnější než osvědčené "Hello World"?

První si ale ukážeme, jak aplikaci vůbec vytvoříme. Protože jsme již nainstalovali Node.js, použijeme příkaz npm k instalaci CLI:

npm install -g expo-cli

Po instalaci CLI vytvoříme aplikaci takto:

expo init helloWorld

Po zadání příkazu se nás konzole zeptá, zda chceme, aby pozadí bylo prázdné. Zmáčkneme enter. Potom už je náš projekt vytvořen.

Aplikaci spustíme příkazem:

npm run web

Aplikaci můžeme také spustit na Androidu nebo iOS

Struktura

Nyní se už můžeme pustit do programování :-) V projektu můžeme vidět soubor app.json. Najdeme zde všechny konfigurace související s aplikací jako je název aplikace, verze sdk, ikona atd.

Máme zde také soubor package.json se seznamem závislostí pro aplikaci.

Dále najdeme soubor App.js. Je to výchozí bod aplikace. Zde můžeme vidět metodu renderování. Metoda obsahuje View komponentu, která se používá k zabalení Text komponenty.

Odstraníme existující kód z App.js a napíšeme následující 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še. Když otevřeme soubor ve webovém prohlížeči, uvidíme uprostřed stránky nápis "Hello world".

Jak jsem již psal v úvodu, základem všeho jsou komponenty a princip je jinak velmi jednoduchý :-):

  • načteme React Native knihovnu
  • Pomocí nástrojů z knihovny React vytvoříme vlastní komponentu pro nadpis
  • Vykreslíme komponentu do našeho kořene na stránce

To je z dnešního tutoriálu vše.

V příštím tutoriálu se podíváme podrobněji na komponenty a vysvětlíme si jak je používat :-)


 

Všechny články v sekci
React Native
Článek pro vás napsal Matěj Plšek
Avatar
Jak se ti líbí článek?
1 hlasů
Jmenuji se Matěj Plšek, programování se věnuji už několik let. Věnuji se momentálně nejvíce JavaScriptu, hardwaru a C#.
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í!