1. Úvod do moderního vývoje s Reactem
React je populární JavaScriptová knihovna vyvinutá společností Facebook (nyní Meta), která se zaměřuje na vytváření uživatelských rozhraní (UI). Vyniká především rychlostí, modularitou a silnou podporou komunity. Díky svému konceptu komponent usnadňuje práci na větších projektech, umožňuje lepší strukturování kódu a opakované použití jednotlivých stavebních bloků aplikace.
- Původ Reactu: Vznikl ve Facebooku (Mete) jako odpověď na potřebu efektivního vykreslování dynamických uživatelských rozhraní.
- Motivace: Klasické manipulace s DOM byly náročné na výkon i vývoj. React přinesl koncept virtuálního DOMu, díky kterému je možné rychle porovnávat změny ve stavu aplikace a efektivně je promítat do uživatelského rozhraní.
- Otevřenost a komunita: Postupně se React stal open-source projektem a vyrostla kolem něj masivní vývojářská komunita, která neustále přichází s novými rozšířeními a nástroji.
- Klasický DOM: Manipulace s DOM přímo v prohlížeči je relativně pomalá a komplikovaná na údržbu, pokud se aplikace často mění a roste.
- jQuery: Dlouho platilo za revoluci, protože výrazně zjednodušilo manipulaci s prvky na stránce a práci s událostmi. Nicméně s tím, jak se aplikace stávaly komplexnějšími, přestalo jQuery ve větších projektech stačit.
- React: Přichází s kompletně novým pojetím práce s uživatelským rozhraním – deklarativní přístup a využití virtuálního DOMu znamenají menší zátěž na reálný DOM a současně zjednodušují stavovou logiku aplikací.
- Deklarativní přístup: Místo ruční manipulace s DOM a sledování každé změny v layoutu vývojář popisuje, jak má UI vypadat na základě stavu.
- Revoluční pojetí: Komponentový způsob vývoje Reactu nahrazuje dřívější přístup, kdy se v jQuery volaly funkce a přímo se zasahovalo do HTML elementů. V Reactu se tvoří samostatné, znovupoužitelné stavební bloky (komponenty), což vede k lepší udržovatelnosti kódu a rychlejšímu vývoji.
- Toto je příklad jednoduchého jQuery kódu, který mění text na stránce po kliknutí na tlačítko:
// jQuery
$('.getResults').on('click', () => {
$.ajax({
url: '/api/results',
data: {
foo: 'bar'
},
success: function (result) {
$('.results').html(result);
}
});
});
- A zde je ekvivalentní kód v Reactu, který dělá totéž:
// React
import React, { useState } from 'react';
export default function App(){
const [results, setResults] = useState(null);
const fetchResults = () => {
fetch('/api/results?foo=bar')
.then(response => response.text())
.then(data => setResults(data));
};
return (
<div>
<button onClick={fetchResults}>Get Results</button>
{results &&
<div className="results">{results}</div>
}
</div>
);
}
- Co když budu ale potřebovat více tlačítek, která budou fetchovat jiné foo hodnoty? V jQuery bychom museli přidat x tlačítek a každé přiřadit jinou funkci. V Reactu to uděláme elegantněji pomocí parametrizace:
// React
import React, { useState } from 'react';
export default function App(props: { foo: string }){
const [results, setResults] = useState(null);
const fetchResults = () => {
fetch(`/api/results?foo=${props.foo}`)
.then(response => response.text())
.then(data => setResults(data));
};
return (
<div>
<button onClick={fetchResults}>Get Results of {props.foo}</button>
{results &&
<div className="results">{results}</div>
}
</div>
);
}
<App foo="bar" />
<App foo="baz" />
<App foo="qux" />
Shrnutí: React oproti jQuery nabízí propracovanější způsob vývoje, který je ideální pro moderní aplikace. Deklarativní zápis a koncept virtuálního DOMu představují revoluční změnu v tom, jak se přistupuje k vykreslování a správě stavu uživatelského rozhraní. Výsledkem je rychlejší a přehlednější vývoj i provoz.