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) je pro nové aplikace považována za zastaralou. 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 na Windows?

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

Co můžete dělat s Reactem?

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

  • Basic web apps: 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 na Windows. Pokud plánujete vytvořit webovou aplikaci, která se nasadí do produkčního prostředí, možná budete chtít zvážit vytvořit aplikaci React pomocí nástrojů front-endu na Windows Subsystem for 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ž teď Next.js nabízí také obsluhu statických souborů).

  • Native 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 Mixed Reality zařízení. Podporuje sadu SDK Windows 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. Ve službě StackOverflow je dobré porovnání těchto 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 for Android development on 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.
  • Sdružování – 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 aplikace a co nejvíce zkombinoval do co nejnižšího počtu souborů. Balíček, jako je například webpack , za vás provede tuto úlohu.
  • 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í Node.js) a yarn. 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, zmenšovač, kompresor a nástroj pro zlepšení vzhledu kódu.
  • 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 mikrospravovat transformace syntaxe a polyfill prohlížeče a mohli definovat, které internetové prohlížeče chcete podporovat.
  • ESLint: Nástroj pro identifikaci vzorů ve vašem JavaScriptovém kódu a pro vytváření zpráv, který vám pomůže dosáhnout konzistentnějšího kódu a vyhnout se chybám.
  • Enzym: Nástroj pro testování JavaScriptu pro React, který usnadňuje testování výstupu komponent React.
  • Jest: Testovací architektura, která spolupracuje s Babelem a pomáhá psát idiomaticické javascriptové testy v aplikacích React.
  • Mocha: Testovací rámec, který běží na Node.js a v prohlížeči a pomáhá s asynchronním testováním, generováním sestav 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í

  • Last updated on