Lidé se často setkávají se situacemi, kdy dochází k záměně. Tyto omyly mohou pramenit z různých aspektů, ale nejběžnějším důvodem bývá podobnost jmen.
Většinou, když se člověk poprvé setká s novou věcí, ať už jde o osobu, zvíře, výrobek, nebo software, klade důraz na její název. Teprve následně se začíná zajímat o její vlastnosti, využití a historii.
Proč o tom mluvíme?
Protože často dochází k záměně mezi pojmy (názvy) React a React Native. Laik, který se s těmito názvy setká, si ve většině případů automaticky odvodí, že React Native je jakýmsi rozšířením Reactu. Stejný závěr mohou učinit i někteří technici, pokud s těmito technologiemi nemají žádné zkušenosti.
O co tedy jde? Proč se lidé pletou právě v těchto případech?
React a React Native jsou dva odlišné frameworky. Jejich názvy jsou si velmi podobné, liší se pouze jedním slovem. Tato podobnost je hlavním důvodem, proč dochází k omylům. Pokud i vy jste se v těchto pojmech ztráceli, jste na správném místě. V tomto článku si celou situaci objasníme.
Pojďme se do toho pustit.
React
React je JavaScriptová knihovna, která se využívá pro tvorbu jednostránkových webových aplikací. Je to jedna z nejpoužívanějších knihoven pro vytváření uživatelských rozhraní (frontend) pro webové stránky. Dokonce lze říci, že je v současnosti nejoblíbenější. Knihovna je vyvíjena a spravována společností Facebook a je také známá pod názvem ReactJS.
Na základě mých zkušeností s Reactem mohu potvrdit, že se jedná o intuitivní a snadno naučitelný nástroj. Protože se jedná o knihovnu, umožňuje nám stavět aplikace podle vlastních představ s využitím jejích funkcí. Neexistují žádná striktní pravidla, která bychom museli dodržovat při vývoji aplikací. Dává nám tedy určitou míru svobody.
React nabízí mnoho skvělých funkcí. Pojďme si je představit.
#1. Komponenty
V Reactu je všechno komponenta. Komponenty jsou stavebními kameny webové aplikace. Můžeme vytvářet rozsáhlé komponenty složením menších dílů. Každá komponenta má vlastní stav a ovládací prvky. Komponenty řídí uživatelské rozhraní a rozhodují o tom, co se uživatelům zobrazí na základě jejich stavu.
Komponenty jsou v Reactu klíčové a jsou opakovaně použitelné. Jednou je napíšete a můžete je používat kdekoliv.
Při psaní komponent je potřeba dbát na pečlivost. Usnadní to údržbu, když aplikace naroste. Pokud v jedné komponentě napíšeme hodně kódu, stane se pro nás údržba komplikovanější. Komponenty by měly být malé a stručné. Mohou vám buď vývoj usnadnit, nebo naopak zkomplikovat.
#2. Virtuální DOM
Jistě jste se již setkali s tím, že se v tlačítku zobrazí nakladač, nebo že na sociálních sítích po stisknutí tlačítka se ihned aktualizuje počet lajků. V minulosti bylo nutné celou stránku znovu načíst, abychom získali nové informace. Dnes se aktualizuje pouze ten element, který to potřebuje. Jak je to možné?
Jak jsme si již řekli, v Reactu je vše komponenta. Prohlížeče udržují strukturu DOM pro prvky webové aplikace. Když je potřeba část webové aplikace aktualizovat, musíme tak učinit pomocí manipulace s DOM. React provádí tyto operace efektivně.
React vytváří virtuální DOM (kopii DOM) pro všechny své komponenty. Při aktualizaci webové aplikace porovnává React skutečný DOM s virtuálním DOM. Pokud dojde k nějakým změnám, provede React aktualizaci dané komponenty.
#3. Jednosměrný tok dat
Bez datového toku bychom nemohli rozdělit komplexní sadu komponent na menší celky. Musí existovat nějaký mechanismus pro tok dat mezi komponentami.
React nám umožňuje předávat data z jedné komponenty do druhé pouze jedním směrem. Data proudí z rodičovských komponent do podřízených. Podřízené komponenty nemohou data aktualizovat. Neexistuje způsob, jak poslat data zpět do rodičovské komponenty, protože tok dat je jednosměrný.
Může se zdát, že to není ideální řešení, ale jednosměrný tok dat nám poskytuje větší kontrolu než tok obousměrný.
Shrnutí
Existuje mnoho dalších funkcí, jako je JSX, podmíněné vykreslování atd., které jsou sekundární. My jsme se zaměřili na primární funkce knihovny React. S Reactem je možné vytvářet téměř jakýkoliv typ webové aplikace. Komunita kolem Reactu je rozsáhlá a existuje mnoho balíčků, které lze v Reactu využít.
React Native
React Native je JavaScriptový framework pro vývoj multiplatformních mobilních aplikací. Také je vyvíjen a spravován společností Facebook.
Většina z vás je pravděpodobně překvapena touto informací.
Je skutečně možné vytvářet mobilní aplikace pro Android a iOS pomocí jediného frameworku?
Pokud nesledujete dění ve světě technologií, asi o tom nevíte. Ano, pomocí React Native lze vyvíjet aplikace pro různé platformy (jak pro Android, tak pro iOS). Existují i další frameworky pro vývoj multiplatformních aplikací.
React Native je jeden z nejoblíbenějších frameworků svého druhu. Není sice nejoblíbenější kvůli omezením JavaScriptu v nativních aplikacích, ale v oblasti vývoje si vede skvěle. Využívají ho velké společnosti, jako například Facebook, Instagram, Flipkart atd. To neznamená, že byste ho měli používat za každou cenu, ale to, že s pomocí React Native lze vyvíjet produkční multiplatformní aplikace.
V předchozím odstavci jsem použil spojení nativní aplikace. Co to znamená? Nejedná se o nový typ aplikace. Nativní aplikace je vytvořena speciálně pro danou platformu. Android aplikace pro Android telefony, iOS aplikace pro iPhone, Windows aplikace pro Windows atd.
Jak souvisí nativní aplikace s React Native? React Native vytváří na základě našich požadavků nativní aplikaci, která je kompatibilní s Android i iOS. Aplikace vyvíjené pomocí React Native jsou nativní stejně jako aplikace vyvíjené pomocí Android Studio pro Android, a podobně pro iOS.
Možná proto ho tvůrci pojmenovali React Native. Ne, to není pravý důvod.
React Native nabízí mnoho funkcí. Pojďme se podívat na některé z nich.
#1. Multiplatformní vývoj
Můžeme vytvářet mobilní aplikace pro Android i iOS zároveň, s použitím jediné kódové báze. Firmám to šetří čas i peníze.
#2. Hot nebo Live Reload
Pokud máte zkušenosti s React nebo React Native, pravděpodobně o této funkci víte. Tato funkce automaticky načte celou aplikaci s novými aktualizacemi, když změníme kód. Nemusíme pokaždé, když upravíme kód, aplikaci ručně obnovovat. Upravíte kód a změny se ihned projeví. A to je vše. Nemusíme na nic čekat, pokud se nevyskytne chyba.
Může se zdát, že se jedná o sekundární funkci. Pokud ale přecházíte z vývoje Androidu bez frameworku, oceníte tuto funkci React Native.
#3. Knihovny a komunita UI
React Native má mnoho vestavěných nativních komponent. Můžeme je používat přímo bez jakéhokoli nastavování nebo instalace. Nativní komponenty vypadají na příslušných platformách jako nativní. Uživatelské rozhraní aplikací React Native odpovídá jak nativnímu uživatelskému rozhraní iOS, tak i nativnímu uživatelskému rozhraní Android. React Native má komponenty podobné Reactu.
Co se týče komunity, je velká a neustále se rozrůstá. Pokud budete potřebovat pomoc, můžete se na ni bez problémů obrátit.
Shrnutí
Na internetu můžete najít mnoho dalších funkcí React Native. Prozkoumejte je, pokud se chystáte vyvíjet mobilní aplikace. Frontendový vývojář může s React Native také vyvíjet nativní aplikace. Usnadňuje tak vývoj mobilních aplikací pro různé platformy.
React vs. React Native
Mezi Reactem a React Native existují určité podobnosti i rozdíly. Pojďme se na ně podívat.
Z hlediska konečných aplikací jsou React a React Native zcela odlišné. Z hlediska principů jsou si však podobné. Jak React, tak React Native používají komponenty. I v jednotlivých vývojových procesech se řídí stejnými principy.
Oba frameworky využívají pro vývoj jazyk JavaScript. Podívejme se na jednoduchou aplikaci „Hello, World“ v obou případech.
React
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="container">
<h1>Hello, Wolrd!</h1>
</div>
);
}
}
export default App;
React Native
import React from 'react';
import { Text, View } from 'react-native';
const App = () => {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<Text>Hello, world!</Text>
</View>
)
}
export default App;
Jak vidíme, oba používají balíček React. Syntaxe se v obou aplikacích podobá, protože používají speciální označení s názvem JSX. Z hlediska vykreslování ale oba používají různé postupy. React používá virtuální DOM a React Native používá nativní API pro vykreslování uživatelského rozhraní.
Existují i externí balíčky, jako je Redux, MobX atd., pro správu výpisů aplikací React. Stejné balíčky lze používat i v aplikacích React Native.
React i React Native používají JavaScript, takže s oběma můžeme používat téměř každý balíček JavaScript. To obohacuje knihovny balíčků obou frameworků.
React a React Native spolu souvisejí, ale jsou určeny pro různé účely.
Závěr
React a React Native se liší z hlediska konečného produktu a aplikační platformy. Při vývoji aplikací se ale řídí podobnými principy. Pokud se naučíte jeden z těchto frameworků, React nebo React Native, učení toho druhého vám půjde rychleji. Pro vývoj aplikací v React Native je však nutné znát React. Ale to nestačí. Potřebujeme více informací o vývoji nativních aplikací, protože podpora v React Native je omezená.
Doufejme, že se to v budoucnosti zlepší a budeme mít plnou podporu.
Pokud se chcete začít věnovat vývoji webových nebo mobilních aplikací, pak vám výběr React nebo React Native do budoucna určitě pomůže. Ale není to nutností.
Osvojení si konceptů React je snadnější, pokud znáte JavaScript. Oficiální dokumentace je pro vás skvělým zdrojem pro začátek s React nebo React Native.
Přeji vám šťastné poznávání 