zpět

Technologie React

Co je React

• React je JavaScriptová open-source knihovna sloužící ke tvorbě uživatelského rozhraní (User Interface), kterému říkáme frontend.
• Knihovna je určena především na vývoj UI pro webové a mobilní aplikace.
• Hodí se zejména pro jednostránkové webové aplikace (single-page application, zkráceně SPA).
• Tato knihovna, nikoliv framework, umožňuje vývojářům efektivně vytvářet interaktivní, dynamický a responzivní frontend s důrazem na deklarativní přístup a komponenty, které lze snadno znovu použít a spravovat.

Výhody

• Architektura postavená na komponentách a rychlost vývoje: Komponenty jsou různé znovupoužitelné HTML elementy, jejichž skládáním následně vzniká komplexní UI aplikace. Jejich opětovné použití je velkou výhodou.
• Detailní zaměření na frontend: Specialita je tvorba vrstvy pohledu. Díky tomu lze vytvořit uživatelsky přívětivější rozhraní disponující moderním vzhledem.
• Vysoký výkon zvyšuje rychlost běhu: React využívá virtuální DOM. Díky virtuální paměti proběhne aktualizace ještě před samotným renderováním webové stránky, běží aplikace rychleji.
• Flexibilita: Na rozdíl od Angularu je React knihovnou, nikoliv kompletním frameworkem. Vyznačuje se tak relativní jednoduchostí, co se práce s ním týče, a z toho plynoucí flexibilitou pro vývojáře.
• SEO-friendly řešení: React adekvátně optimalizuje načítání a rychlost stránek. Pro Google je rychlostní faktor jeden z těch kriticky důležitých.
• Kompatibilita: Jde o specificky zaměřenou knihovnu, která dokáže efektivně pracovat s dalšími knihovnami a frameworky z odlišného prostředí (například Redux, React Router).
• Široká komunita a podpora: React má jednu z největších a nejaktivnějších vývojářských komunit. Díky tomu máte možnost rychle najít řešení vašich problémů, sdílet zkušenosti a využívat bohatou škálu dostupných nástrojů a ready-to-use komponent.
• Jednosměrný tok dat: React podporuje jednosměrný tok dat, což zvyšuje stabilitu kódu a usnadňuje chybovou diagnostiku a ladění aplikací.
• Univerzální JavaScript: Pomocí Reactu můžete vytvářet kód, který funguje jak na straně serveru, tak na straně klienta. Tím zajistíte zlepšení výkonu, rychlejší načítání stránek a optimalizaci pro vyhledávače (SEO).

Logo React

Obrázek na logu React reprezentuje filozofii knihovny – stavební bloky aplikací. Atom v logu symbolizuje, jak React umožňuje vývojářům sestavovat rozsáhlé aplikace z malých, izolovaných komponent.

Historie

Za vznikem stojí světoznámá společnost Facebook. React v roce 2011 vytvořil Jordan Walk, softwarový inženýr pracující pro Facebook, za účelem zobrazení kanálu vybraných příspěvků (News Feed) na této gigantické sociální síti.

První prototyp Reactu se jmenoval FaxJSWalk a Walk se u něj nechal inspirovat XHP, což je jednoduchý HTML komponentní framework pro PHP. Nejprve byl implementován do Facebooku, následně na Instagram a v roce 2013 jej společnost vypustila do světa coby open-source řešení. Na vývoji knihovny se tak kromě zaměstnanců sociální sítě podílí i komunita vývojářů.

Kdo používá React?

React je široce využíván pro vývoj webových a mobilních aplikací mnoha předními technologickými společnostmi a organizacemi po celém světě. Mezi nejvýznamnější firmy, které ho využívají, patří kromě výše uvedeného Facebooku také Microsoft, Skype, CNN, Tesla, Airbnb, Netflix, Instagram, WhatsApp, Wallmart, Uber, Twitter, Atlassian či Dropbox.

Základní informace

React umožňuje vývojářům definovat komponenty jako třídy nebo funkce. Každá komponenta může udržovat svůj vlastní stav a životní cyklus, přičemž může být znovu použita v různých částech aplikace, což vede k vyšší modularitě a snadnější údržbě kódu.

Tutoriál

Pro začátečníky je na oficiálních stránkách knihovny React k dispozici úvodní tutoriál, který vás povede krok za krokem k vytvoření první jednoduché aplikace.

Odkaz: https://legacy.reactjs.org/tutorial/tutorial.html

Základní informace

Dokumentace knihovny obsahuje vše – od základních principů Reactu po pokročilé koncepty, jako jsou kontexty.

Odkaz: https://legacy.reactjs.org/versions

Pro pokročilé vývojáře existuje mnoho dalších zdrojů, které pokrývají složitější aspekty vývoje s Reactem, včetně optimalizace výkonu, správy stavů s open-source knihovnami Redux nebo MobX a vykreslování na straně serveru (Server-Side Rendering, zkráceně SSR).

Příklad kódu

Tento jednoduchý příklad ukazuje, jak v Reactu vytvořit funkční komponentu, která na stránce zobrazí text „Hello, world!“.

	function HelloWorld() {
		return <h1>Hello, world!</h1>
	}

TypeScript

TypeScript, nadstavba JavaScriptu vyvinutá společností Microsoft, přináší do světa Reactu revoluční změny. Díky kombinaci TypeScriptu a Reactu mohou vývojáři vytvářet robustnější, bezpečnější a snadněji udržovatelné webové aplikace.

Mezi nejdůležitější výhody použití TypeScriptu ve spojení s Reactem patří statická typová kontrola, podpora moderních JavaScriptových funkcí, menší počet chyb v aplikaci, lepší čitelnost a údržba kódu.

Hooks

Hooks jsou funkce, které umožňují „připojit“ stav a další funkce Reactu do funkčních komponent bez nutnosti psát třídu. Byly představeny v Reactu 16.8. Mezi nejčastěji používané hooky patří useState pro správu stavu komponenty a useEffect pro provádění vedlejších efektů.

Integrace funkcí Hooks do React aplikací umožňuje zjednodušit kód, zlepšit jeho čitelnost a udržovatelnost a zvýšit produktivitu vývoje.

Tento příklad ukazuje, jak používat useState a useEffect ve funkční komponentě.

	import React, { useState, useEffect } from 'react';
			
	function Example() {
	  const [count, setCount] = useState(0);

	  useEffect(() => {
	    document.title = `You clicked ${count} times`;
	  });

	  return (
	    <div>
		<p>You clicked {count} times</p>
		<button onClick={() => setCount(count + 1)}>
		  Click me
		</button>
	    </div>
	  );
	}