Sdílet prostřednictvím

React – přehled

Co je React JS?

React je opensourcová javascriptová knihovna pro vytváření uživatelských rozhraní front-endu. Na rozdíl od jiných knihoven JavaScriptu, které poskytují úplnou aplikační architekturu, se React zaměřuje výhradně na vytváření zobrazení aplikací prostřednictvím zapouzdřených jednotek označovaných jako komponenty , které udržují stav a generují prvky uživatelského rozhraní. Pokud chcete vytvořit složité uživatelské rozhraní, můžete umístit jednotlivé komponenty na webovou stránku nebo vnořit hierarchie součástí.

Komponenty React jsou obvykle napsané v JavaScriptu a JSX (JavaScript XML), což je rozšíření JavaScriptu, které vypadá podobně jako HTML, ale má některé funkce syntaxe, které usnadňují provádění běžných úloh, jako je registrace obslužných rutin událostí pro prvky uživatelského rozhraní. Komponenta React implementuje metodu render , která vrací JSX představující uživatelské rozhraní komponenty. Ve webové aplikaci je kód JSX vrácený komponentou přeložen do HTML kompatibilního s prohlížečem a vykreslen v prohlížeči.

Důležité

V únoru 2025 oznámil tým React, že Create React App (CRA) bylo pro nové aplikace označeno za zastaralé. Tým doporučuje migrovat existující aplikace do architektury, jako je Next.js nebo React Router nebo migrovat do nástroje pro sestavení, jako je Vite, Parcel nebo RSBuild.

Funguje React ve Windows?

Ano. Windows podporuje dvě různá prostředí pro vývoj aplikací React:

Co můžete dělat s Reactem?

Systém Windows podporuje širokou škálu scénářů pro vývojáře React, včetně následujících:

  • Základní webové aplikace: Pokud s Reactem začínáte a primárně se zajímáte o vytváření základní webové aplikace pomocí Reactu, doporučujeme vytvořit aplikaci React pomocí nástrojů front-endu ve Windows. Pokud plánujete vytvořit webovou aplikaci, která se nasadí do produkčního prostředí, můžete zvážit vytvoření aplikace React pomocí nástrojů front-endu v subsystému Windows pro Linux (WSL), aby se zlepšila rychlost výkonu, kompatibilita volání systému a sladění mezi místním vývojovým prostředím a prostředím nasazení (což je často linuxový server).

  • Single-Page Apps (SPA): Jedná se o weby, které pracují s uživatelem dynamickým přepisem aktuální webové stránky s novými daty ze serveru, a nikoli výchozím nastavením prohlížeče při načítání celých nových stránek. Pokud chcete vytvořit statický web SPA orientovaný na obsah, doporučujeme nainstalovat Gatsby na WSL. Pokud chcete vytvořit serverový web SPA s Node.js back-endem, doporučujeme nainstalovat Next.js na WSL. (I když Next.js nyní také nabízí obsluhu statických souborů).

  • Nativní desktopové aplikace: React Native for Desktop + macOS umožňuje vytvářet nativní desktopové aplikace pomocí JavaScriptu, které běží na různých typech stolních počítačů, notebooků, tabletů, xboxů a zařízení hybridní reality. Podporuje Windows SDK i macOS SDK.

  • Nativní mobilní aplikace: React Native je multiplatformní způsob, jak vytvářet aplikace pro Android a iOS pomocí JavaScriptu, které se vykreslují do kódu uživatelského rozhraní nativní platformy. Existují dva hlavní způsoby instalace React Native – Rozhraní příkazového řádku Expo a Rozhraní příkazového řádku React Native. Na StackOverflowje dobré srovnání těch dvou . Expo má klientskou aplikaci pro mobilní zařízení s iOSem a Androidem pro spouštění a testování aplikací. Pokyny k vývoji aplikace pro Android pomocí Windows, React Native a Expo CLI najdete v tématu React Native pro vývoj pro Android ve Windows.

Možnosti instalace

Existuje několik různých způsobů, jak nainstalovat React spolu s integrovanou sadu nástrojů, která nejlépe vyhovuje vašemu scénáři použití. Tady je několik nejoblíbenějších.

Nástroje React

Psaní jednoduché komponenty v Reactu v editoru prostého textu je dobrým úvodem do Reactu, ale kód generovaný tímto způsobem je objemný, obtížný na údržbu a nasazení a pomalý. V produkčních aplikacích je potřeba provést několik běžných úloh. Tyto úlohy se zpracovávají jinými javascriptovými architekturami, které aplikace přebírá jako závislost. Mezi tyto úkoly patří:

  • Kompilace – JSX je jazyk běžně používaný pro aplikace React, ale prohlížeče nemůžou tuto syntaxi zpracovat přímo. Místo toho je potřeba kód zkompilovat do standardní syntaxe JavaScriptu a přizpůsobit ho pro různé prohlížeče. Babel je příkladem kompilátoru, který podporuje JSX.
  • Bundling – Vzhledem k tomu, že výkon je klíčový pro moderní webové aplikace, je důležité, aby JavaScript aplikace obsahoval pouze potřebný kód a byl zkombinován do co nejmenšího počtu souborů. Nástroj pro balení, jako je webpack, tuto úlohu provede za vás.
  • Správa balíčků – Správci balíčků usnadňují zahrnutí funkcí balíčků třetích stran do vaší aplikace, včetně jejich aktualizace a správy závislostí. Mezi běžně používané správce balíčků patří Yarn a npm.

Sada architektur, které vám pomůžou vytvářet, sestavovat a nasazovat aplikace, se společně označují jako sada nástrojů. Snadné nastavení vývojového prostředí pro React, které používá tuto sadu nástrojů, je Vite, který pro vás generuje jednoduchou jednostránkovou aplikaci. Jediné nastavení potřebné k použití Vite je Node.js.

Adresář komponent React Native

Součásti, které je možné použít v aplikaci React Native, zahrnují následující:

  • Základní komponenty – komponenty vyvinuté a podporované v rámci architektury React Native.
  • Součásti komunity – komponenty, které jsou vyvíjeny a udržovány komunitou.
  • Nativní komponenty – komponenty, které sami vytvoříte, pomocí nativního kódu platformy a zaregistrujete se, aby byly přístupné z React Native.

Nativní adresář React poskytuje seznam knihoven komponent, které lze filtrovat podle cílové platformy.

Možnosti sady nástrojů Fullstack React

React je knihovna, nikoli architektura, takže může vyžadovat další nástroje k vytvoření složitější aplikace. Kromě použití Reactu můžete zvážit použití:

  • Správce balíčků: Dva oblíbené správce balíčků pro React jsou npm (který je součástí NodeJS) a příze. Obě podporují širokou knihovnu dobře udržovaných balíčků, které je možné nainstalovat.
  • React Router: kolekce navigačních komponent, které vám můžou pomoct s položkami, jako jsou adresy URL s možností záložky pro vaši webovou aplikaci nebo kombinovaný způsob navigace v React Native. React se ve skutečnosti zabývá správou stavu a vykreslováním tohoto stavu do DOM, takže vytváření aplikací v Reactu obvykle vyžaduje použití knihovny pro směrování, jako je React Router.
  • Redux: Předvídatelný kontejner stavu, který pomáhá s architekturou toku dat. Pravděpodobně není něco, co potřebujete, dokud se nedostanete do pokročilejšího vývoje Reactu. Chcete-li citovat Dana Abramova, jednoho z tvůrců Redux: "Nepoužívejte Redux, dokud nemáte problémy s 'vanilla' React."
  • Webpack: Nástroj sestavení, který umožňuje kompilovat moduly JavaScriptu, označované také jako modul bundler. Když webpack zpracuje vaši aplikaci, interně vytvoří graf závislostí, který mapuje každý modul, který projekt potřebuje, a vygeneruje jednu nebo více sad.
  • Uglify: Analyzátor JavaScriptu, minimalizátor, kompresor a zkrášlovací nástroj.
  • Babel: Kompilátor JavaScriptu používaný hlavně k převodu kódu ECMAScript 2015+ na zpětně kompatibilní verzi JavaScriptu v aktuálních a starších prohlížečích nebo prostředích. Může být také užitečné použít babel-preset-env, abyste nemuseli podrobně řídit transformace syntaxe nebo polyfillů prohlížečů a mohli definovat, které internetové prohlížeče chcete podporovat.
  • ESLint: Nástroj pro identifikaci vzorů nalezených v javascriptovém kódu a vytváření sestav o vzorech, který vám pomůže usnadnit konzistentnější kód a vyhnout se chybám.
  • Enzymu: Nástroj pro testování JavaScriptu pro React, který usnadňuje testování výstupů komponent React.
  • Jest: Testovací architektura, která spolupracuje s Babelem a pomáhá psát idiomaticické javascriptové testy v aplikacích React.
  • Mocha: Testovací framework, který běží jak na Node.js, tak v prohlížeči, aby pomáhal s asynchronním testováním, reportováním a mapováním nezachycených výjimek na správné testovací případy.

Kurzy a tutoriály Reactu

Tady je několik doporučených míst, kde se můžete seznámit s Reactem a sestavovat ukázkové aplikace:

Další zdroje informací