← Cloudflare Pages / pages / framework-guides

React

React ↗ je oblíbený framework pro tvorbu reaktivních a výkonných frontendových aplikací, vyvinutý open-source týmem ve Facebooku.

V tomto průvodci vytvoříte novou aplikaci React a nasadíte ji pomocí Cloudflare Pages.

Nastavení nového projektu

Použijte create-cloudflare ↗ CLI (C3) k nastavení nového projektu. C3 vytvoří nový adresář projektu, spustí oficiální nástroj pro nastavení Reactu a nabídne možnost okamžitého nasazení.

Chcete-li použít create-cloudflare k vytvoření nového projektu React spusťte následující příkaz:

npm create cloudflare@latest -- my-react-app --framework=react --platform=pages

create-cloudflare nainstaluje závislosti, mimo jiné Wrangler CLI a adaptér Cloudflare Pages a položí vám otázky k nastavení.

Přejděte do adresáře aplikace:

cd my-react-app

Odtud můžete svou aplikaci spustit pomocí:

npm run dev

Než budete pokračovat

Všechny průvodce frameworky předpokládají, že již máte základní znalosti Git ↗. Pokud s Gitem začínáte, podívejte se na tento shrnutá příručka ke Gitu ↗ jak nastavit Git na svém lokálním počítači.

Pokud klonujete přes SSH, musíte vygenerujte SSH klíče ↗ na každém počítači, který používáte pro push nebo pull z GitHubu.

Viz dokumentace GitHub ↗ a Dokumentace Git ↗ s dalšími informacemi.

Vytvořte repozitář GitHub

Vytvořte nový repozitář GitHub na repo.new ↗. Po vytvoření nového repozitáře přejděte do adresáře nově vytvořeného projektu a v terminálu spusťte následující příkazy, kterými připravíte a odešlete svou místní aplikaci na GitHub:

git remote add origin https://github.com/<your-gh-username>/<repository-name>
git branch -M main
git push -u origin main

Nasadit pomocí Cloudflare Pages

Nasadit přes `create-cloudflare` CLI (C3)

Pokud používáte create-cloudflare(C3) ↗ k vytvoření nového projektu React nainstaluje C3 všechny závislosti, které projekt potřebuje, a vyzve vás k nasazení projektu přes CLI. Pokud jej nasadíte, web se zveřejní a získáte URL adresu nasazení.

Nasadit přes Cloudflare dashboard

V dashboardu Cloudflare přejděte na Workers & Pages stránce.
Přejděte na Workers & Pages ↗
Vyberte Vytvoření aplikace > Pages > Importujte existující repozitář Git.
Vyberte nově vytvořený repozitář GitHub a v Nastavení sestavení a nasazení sekci uveďte následující informace:

Konfigurační možnost	Hodnota
Produkční větev	`main`
Příkaz sestavení	`npm run build`
Adresář sestavení	`dist`

Po nakonfigurování webu můžete spustit první nasazení. Měli byste vidět, jak Cloudflare Pages instaluje react, závislosti projektu a sestavuje web, než ho nasadí.

Po nasazení webu získáte pro svůj projekt jedinečnou subdoménu na *.pages.dev. Pokaždé, když do své aplikace React committnete nový kód, Cloudflare Pages automaticky znovu sestaví váš projekt a nasadí ho. Získáte také přístup k náhledová nasazení u nových pull requestů, takže si můžete prohlédnout, jak změny na vašem webu vypadají, než je nasadíte do produkce.

Zjistit více

Dokončením tohoto návodu jste úspěšně nasadili svůj web React na Cloudflare Pages. Chcete-li začít s dalšími frameworky, podívejte se na seznam návodů pro frameworky.