Přidání Reactu do existujícího projektu
Pokud máte v plánu přidat interaktivitu do existujícího projektu, není nutné celý projekt přepracovat do Reactu. Můžete jednoduše začlenit React mezi již použité technologie a umístit interaktivní React komponenty, kamkoliv je potřeba.
Implementace Reactu do segmentu cesty vaší existující webové stránky
Představme si, že máte existující webovou aplikaci na adrese example.com, která byla vytvořena za pomocí jiné serverové technologie (např. Rails) a chcete , aby všechny cesty začínající s example.com/obchod/ byly plně implementované pomocí Reactu.
Zde je náš doporučený postup:
- Vytvořte část aplikace pomocí některého z frameworků založených na Reactu.
- Nastavte
/obchodjako základní cestu v konfiguraci vašeho frameworku (zde je návod pro: Next.js a Gatsby). - Nakonfigurujte svůj server nebo proxy server tak, aby všechny požadavky na cestu
/obchod/zpracovávala vaše aplikace v Reactu.
Tímto zajistíte, že část vaší aplikace napsaná Reactu bude využívat osvědčené postupy a praktiky, které jsou součástí těchto frameworků.
Mnoho frameworků založených na Reactu je full-stack, což umožňuje vaší React aplikaci využít server. Tento přístup můžete uplatnit i v případě, kdy nemůžete nebo nechcete na serveru používat JavaScript. V takové situaci místo toho zpřístupníte export HTML/CSS/JS (output v next export pro Next.js, default pro Gatsby) na adresářové cestě /obchod/.
Implementace Reactu do konkrétní části vaší existující webové stránky
Předpokládejme, že máte existující stránku, která byla vytvořena s využitím jiné technologie, ať už serverové (např. Rails) nebo klientské (jako je Backbone), a chcete na ní implementovat interaktivní komponenty React. Tento postup je běžnou formou integrace Reactu. Ve skutečnosti se React takto používal řadu let ve společnosti Meta!
Tento postup lze provést ve dvou krocích:
- Nakonfigurujte si JavaScriptové prostředí tak, ať vám dovolí používat syntaxi JSX, rozdělit kód do modulů pomocí syntaxe
import/exporta používat balíčky (např. React) z registru balíčků npm. - Vyrendrujte React komponenty tam, kde je chcete na stránce zobrazit.
Přesný postup se bude lišit v závislosti na vašem existujícím nastavení stránky, takže se podíváme na některé detaily.
Krok 1: Nastavení modulárního prostředí JavaScriptu
Modulární prostředí JavaScriptu umožňuje psát React komponenty v jednotlivých souborech, na rozdíl od psaní celého kódu v jednom souboru. Modulární prostředí navíc nabízí možnost využít různé balíčky od jiných vývojářů, které jsou publikovány v npm registru - včetně samotného Reactu! Způsob implementace bude zcela záviset na vašem existujícím nastavení:
-
Pokud je vaše aplikace již rozdělena do souborů využívajících příkazy
import, můžete vyzkoušet existující nastavení. Ujistěte se, že zápis<div />ve vašem JavaScript kód nezpůsobuje syntaktickou chybu. Pokud to syntaktickou chybu způsobí, bude možná nutné použít nástroj Babel k transformaci vašeho JavaScriptového kódu a aktivovat předvolbu Babel React pro použití JSX. -
Pokud vaše aplikace nemá již existující nastavení pro kompilaci JavaScriptových modulů, nastavte jej pomocí Vite. Komunita Vite se stará o řadu integrací s backendovými frameworky, včetně Rails, Django a Laravel. Pokud váš backendový framework není v seznamu uveden, postupujte podle tohoto návodu a manuálně integrujte Vite do vašeho backendu.
Pokud chcete ověřit, zda je vaše nastavení funkční, spusťte následující příkaz v adresáři projektu:
Poté přidejte následující řádky kódu na začátek svého hlavního JavaScriptového souboru (jméno souboru může být index.jsnebo main.js):
import { createRoot } from 'react-dom/client'; // Nahradí existující obsah HTML document.body.innerHTML = '<div id="app"></div>'; // Do něj nyní vyrendrujeme React komponentu const root = createRoot(document.getElementById('app')); root.render(<h1>Hello, world</h1>);
Pokud byl celý obsah stránky nahrazen nápisem “Hello, world”, vše funguje správně! Pokračujte ve čtení.
Krok 2: Vyrendrujte React komponenty na libovolném místě na stránce
V předchozím kroku jste tento kód umístili na začátek hlavního souboru:
import { createRoot } from 'react-dom/client';
// Nahradí existující obsah HTML
document.body.innerHTML = '<div id="app"></div>';
// Do něj nyní vyrendrujeme React komponentu
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);Samozřejmě, v reálném případě nebudete chtít existující obsah HTML vymazat!
Tento kód odstraňte.
Spíše než rendrovat celou stránku pomocí Reactu, budete chtít vyrendrovat React komponenty na specifických místech v HTML. Otevřete svou HTML stránku (nebo serverové šablony, které ji generují) a přidejte například unikátní atribut id k libovolnému tagu:
<!-- ... někde v html ... -->
<nav id="navigation"></nav>
<!-- ... více html ... -->Toto vám umožní vyhledat tento HTML prvek pomocí funkce document.getElementById a předat ho do funkce createRoot, abyste v něm mohli následně vyrendrovat vlastní komponentu React:
import { createRoot } from 'react-dom/client'; function NavigationBar() { // TODO: Implementovat navigační lištu return <h1>Hello from React!</h1>; } const domNode = document.getElementById('navigation'); const root = createRoot(domNode); root.render(<NavigationBar />);
Všimněte si, že původní obsah HTML ze souboru index.html zůstává nezměněn, zatímco vaše vlastní React komponenta NavigationBar se nyní zobrazuje uvnitř <nav id="navigation"> v rámci vašeho HTML. Pro hlubší pochopení rendrování React komponentů uvnitř existující HTML stránky, doporučujeme prostudovat dokumentaci k funkci createRoot.
Běžným postupem při implementaci Reactu do existujícího projektu je začít s malými interaktivními komponenty (např. tlačítky) a postupně “postupovat nahoru”, dokud celou stránku netvoří komponenty React. Pokud někdy dosáhnete tohoto bodu, doporučujeme hned poté přejít na React framework, abyste z něj mohli vytěžit maximum.
Implementace React Native do existující nativní mobilní aplikace
React Native lze také postupně integrovat do existujících nativních aplikací. Pokud máte existující nativní aplikaci pro Android (Java nebo Kotlin) nebo iOS (Objective-C nebo Swift), následujte tento návod pro přidání obrazovky s React Native.