These are the docs for React on Rails 12. To see the version 11 docs, click here.

News

October 14, 2020: RUBY ROGUESRR 474: reagujte na kolejích V12 – Neholte toho Jaka! s Justinem Gordonem.

Říjen 1, 2020: viz spec / dummy příklad repo pro jednoduchou konfiguraci webpack přes rails / webpacker gemthat podporuje SSR.

2. srpna 2020: Viz příklad repo Reagovat na Kolejích Tutoriál S SSR, HMR rychle obnovit, a Stroji pro nový způsob, jak nastavení vytvoření SSR svazku s rails/webpacker.

8. července 2020: uvolnění V12 React on Rails.

hlavní vylepšení

1. React Hooks podpora pro komponenty nejvyšší úrovně
2. Typescript vazby
3. rails / webpacker „jen pracuje“ s React on Rails ve výchozím nastavení.
4. podpora i18n pro generování souboru JSON spíše než souboru JS.

nezapomeňte vidět CHANGELOG.md a přečtěte si pokyny pro upgrade: dokumenty / základy / upgrade-react-on-rails.

• viz Justin RailsConf talk: Webpacker, it-Just-Works, ale jak?.
• máte zájem o podporu React on Rails? Chcete použít uzel.js dělat Vykreslování na straně serveru, takže knihovny jako emoce a načtené komponenty prostě fungují, ve srovnání s vykreslováním pomocí Ruby embedded JS? Pokud ano, podívejte se na React on Rails Pro.
• HMR pracuje s načtenými komponenty pro úžasný zážitek pro vývojáře a skvělý runtime výkon. Prosím, napište mi, pokud byste chtěli použít Loadable komponenty rozdělení kódu k urychlení aplikace snížením velikosti svazku a líně načítání kódu, který je potřeba.

o

React on Rails integruje Rails s (serverem Vykreslování) Facebook je reagovat front-end rámce.

tento projekt spravuje softwarová poradenská firma ShakaCode. Zaměřujeme se na Ruby on Rails aplikace s React front-Endy, často pomocí TypeScript nebo ReasonML. Stavíme také stránky Gatsby. Příklady toho, co děláme, najdete v naší nedávné práci.

Zájem o optimalizaci vašich webpack nastavení Reagovat na Kolejích včetně codesplitting s react-router,a zatížitelné komponenty s server-side rendering?Právě jsme to udělali pro Popmenu, snížení nákladů Heroku o 20-25% a zároveň snížení průměrné doby odezvy o 73%.

neváhejte kontaktovat Justina Gordona, [email protected], Správce React on Rails, pro více informací.

kliknutím se připojíte k React + Rails Slack.

Cíl Projektu

poskytovat vysoké výkonnostní rámec pro integraci Ruby on Rails s Reagovat prostřednictvím Webpacker gem zejména v souvislosti Reagovat Server-Side Rendering pro lepší SEO a lepší výkon.

funkce a Proč reagovat na kolejích?

vzhledem k tomu, že rails/webpacker gem již poskytuje základní integraci React, proč byste použili „React on Rails“?

1. snadné předávání rekvizit přímo z vašeho Rails view na vaše React komponenty, spíše než mít Rails view load a pak vytvořit samostatný požadavek na vaše API.
2. Těsná integrace s kolejnicemi / webpacker.
3. server-Side Rendering (SSR), často používaný pro SEO crawler indexování a UX výkon, není nabízen rails/webpacker.
4. Redux a React Router integrace se serverem-side-rendering.
5. internacionalizace (I18n) a (lokalizace)
6. podpůrná komunita. Toto vyhledávání na webu ukazuje, jak živé veřejné weby používají React on Rails.
7. důvod ML podpora.

viz možnosti integrace Rails / Webpacker React pro srovnání s jinými drahokamy.

viz react-webpack-rails-tutorial pro příklad živé implementace a kódu.

ShakaCode Forum Premium Content

vyžaduje vytvoření účtu zdarma.

• Jak používat různé verze souborů pro klient a server vykreslování
• Jak se podmíněně vykreslení na straně serveru založené na typu zařízení

Dokumenty

Zvážit, prohlížení na našich webových stránkách.

Předpoklady

Ruby on Rails >=5 a zábradlí/webpacker 4.2+.

Začínáme

Poznámka: nejlepší způsob, jak pochopit, jak používat ReactOnRails, je prostudovat několik jednoduchých příkladů. Můžete provést rychlé demo nastavení, a to buď ve stávající aplikaci, nebo v nové aplikaci Rails.

1. Proveďte rychlý návod.
2. přidejte React on Rails do existující aplikace Rails podle pokynů.
3. Podívejte se na spec / dummy, jednoduchý příklad bez DB.
4. Podívejte se na github.com/shakacode/react-webpack-rails-tutorial; je plně vybavený příklad žít v www.reactrails.com.

Základní Instalace

Viz také pokyny pro instalaci do stávající Lišty aplikace.

1. přidejte react_on_rails gem do Gemfile:

   bundle add react_on_rails --strict

2. Zavázat se, aby to git (nebo jiný nelze spustit generátor, pokud vám předat volbu --ignore-warnings).

3. Spustit generátor:

   rails generate react_on_rails:install

4. Spustit aplikaci:

   rails s

5. Navštívit http://localhost:3000/hello_world.

zapnutí Vykreslování serveru

s kódem ze spuštění generátoru React on Rails výše:

1. Upravit app/views/hello_world/index.html.erb a nastavit prerendertrue.
2. obnovte stránku.

Níže je linka, kde odbočíte server vykreslování na nastavení prerender pravda:

<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>

Poznámka: pokud máte chybu ve vaší konzole, pokud jde o „ReferenceError: okno není definováno“,pak musíte upravit config/webpacker.yml a nastavit hmr: falseinline: false.Viz kolejnice/webpacker PR 2644 pro opravu pro thisissue.

Základní Použití

Konfigurace

• Konfigurace config/initializers/react_on_rails.rb. Můžete upravit některá potřebná nastavení a výchozí nastavení. Viz soubor docs / basics / configuration. md pro dokumentaci všech možností konfigurace.
• Configureconfig/webpacker.yml. Pokud jste použili generátor a výchozí nastavení webpackeru, nemusíte se tohoto souboru dotýkat. Pokud přizpůsobujete nastavení, obraťte se na spec / dummy/config / webpacker.příklad yml nebo oficiální výchozí webpacker.yml.
  • Tip: set compile: false pro vývoj, pokud víte, že budete vždy být kompilace s hodinky proces. V opačném případě každý požadavek zkontroluje, zda je potřeba kompilace.
  • public_output_path musí odpovídat vaše vlastní Webpack konfigurace output vaše balíčky.
  • nastavte pouze cache_manifest na true ve vaší produkci env.

včetně komponenty React na vašich pohledech rails

• komponenta React se vykresluje pomocí zobrazení Rails. Zde je vzorek ERB:

  <%= react_component("HelloWorld", props: @some_props) %>

• Vykreslování na straně serveru: komponenta react je nejprve vykreslena do HTML na serveru. Použijte prerender možnosti:

  <%= react_component("HelloWorld", props: @some_props, prerender: true) %>

• component_name parametr je řetězec odpovídající název, který jste použili, aby vystavit vaše Reagovat složek po celém světě. Takže ve výše uvedených příkladech, pokud byste měli komponentu React s názvem „HelloWorld“, zaregistrovali byste ji pomocí následujících řádků:

  import ReactOnRails from 'react-on-rails';import HelloWorld from './HelloWorld';ReactOnRails.register({ HelloWorld });

  vystavení komponenty tímto způsobem je způsob, jakým React on Rails dokáže odkazovat na komponentu z pohledu Rails. Můžete vystavit tolik komponent, kolik chcete, pokud se jejich jména nesrazí. Níže naleznete podrobnosti o tom, jak vystavujete své komponenty prostřednictvím konfigurace react_on_rails webpack. Můžete volat ReactOnRails.register mnohokrát.

• @some_props může být buď řetězec hash nebo JSON. Je to nepovinný argument za předpokladu, že není třeba projít všechny možnosti (pokud chcete projít možnosti, například prerender: true, ale nechcete, aby projít všechny vlastnosti, jednoduše předat prázdný hash {}). Tím budou data dostupná ve vaší komponentě:

   # Rails View <%= react_component("HelloWorld", props: { name: "Stranger" }) %>

• to je to, co váš HelloWorld.soubor js může obsahovat. Railscontext je vždy k dispozici pro všechny parametry, které chcete vždy k dispozici pro vaše komponenty React. Nemá to nic společného s konceptem React kontextu. Viz Render-Functions a RailsContext pro více informací k tomuto tématu.

  import React from 'react';export default (props, railsContext) => { // Note wrap in a function to make this a React function component return () => ( <div> Your locale is {railsContext.i18nLocale}.<br/> Hello, {props.name}! </div> );};

Výhled Pomocníky API pro více informací na react_component a jeho sourozence funkce react_component_hash.

Globálně Odhalení Reagovat Komponenty

Reagovat na Kolejích view helper react_component používat svůj Reagovat komponenty, budete muset zaregistrovat ve vašem kódu jazyka JavaScript.

používejte moduly stejně jako při použití Webpacku a reagujte bez kolejnic. Rozdíl je, že místo montážní Reagovat komponenty přímo k prvku pomocí React.render, můžete se zaregistrovat vaše komponenty k ReactOnRails a pak mount je s pomocníky uvnitř Kolejnice názory.

takto vystavíte komponentureact_component Zobrazit pomocníka.

 // app/javascript/packs/hello-world-bundle.js import HelloWorld from '../components/HelloWorld'; import ReactOnRails from 'react-on-rails'; ReactOnRails.register({ HelloWorld });

Jiný Server-Side Rendering Kódu (a Server-Zvláštní Svazek)

možná Budete chtít jiný kód pro váš server-poskytnuté komponenty běžící na straně serveru versus straně klienta. Pokud máte například animaci, která se spustí při zobrazení komponenty, možná ji budete muset při vykreslování serveru vypnout. Jedním ze způsobů, jak to zvládnout, je podmíněný kód jako if (window) { doClientOnlyCode() }.

dalším způsobem je použití samostatného konfiguračního souboru webpack, který může používat jiný vstupní soubor na straně serveru, například ‚ serverRegistration.js „na rozdíl od“ clientRegistration.js.’To by nastavilo jiný kód pro vykreslování serveru.

podrobnosti o technikách použití odlišného kódu pro vykreslování klientů a serverů viz: Jak používat různé verze souboru pro vykreslování klienta a serveru. (Vyžaduje vytvoření účtu zdarma.)

zadání komponent React: Zaregistrujte se přímo nebo použijte render funkce

máte dva způsoby, jak specifikovat komponenty React. Můžete buď přímo zaregistrovat komponentu React (buď function nebo class component), nebo můžete vytvořit funkci, která vrátí komponentu React, kterou používáme pod názvem „render-function“. Vytvoření funkce render umožňuje:

1. máte přístup k railsContext. Viz dokumentace pro railsContext, pokud jde o to, proč byste ji mohli potřebovat. Pro přístup k railsContext potřebujete funkci Render.
2. pomocí předaných rekvizit můžete inicializovat úložiště redux nebo nastavit react-router.
3. můžete vrátit různé komponenty v závislosti na tom, co je v rekvizitách.

Poznámka: návratová hodnota renderovací funkce by měla být buď React funkce nebo komponenta třídy, nebo objekt reprezentující výsledky renderování serveru.

nevracejte React Element (JSX).

ReactOnRails automaticky detekuje registrovanou renderovací funkci tím, že funkce trvá více než 1 parametr. Jinými slovy, pokud chcete poskytnout funkci, která se tam vrátíakční součást, pak musíte zadat alespoň druhý parametr. Toto je railsContext.Pokud nepoužíváte tento parametr, prohlašuji, že svou funkci s nevyužitou param:

const MyComponentGenerator = (props, _railsContext) => { if (props.print) { // This is a React FunctionComponent because it is wrapped in a function. return () => <H1>{JSON.stringify(props)}</H1>; }}

to Znamená, že není žádný rozdíl mezi registrací Reagovat Funkci Součásti nebo třídu Součástí versus „Render-Funkce.“Stačí zavolat ReactOnRails.register.

react_component_hash pro Render-Funkce

Další důvod, proč používat Render-Funkce je, že někdy při vykreslování serveru, konkrétně s React Router, budete muset vrátit výsledek volání ReactDOMServer.renderToString (prvek). To lze provést vrácením objektu s následujícím tvarem: {renderedHtml, redirectLocation, error }. Ujistěte se, že používáte tuto funkci s react_component_hash.

pro vykreslování serveru, pokud chcete vrátit více řetězců HTML z funkce Render, můžete vrátit objekt z funkce Render s jedinou vlastností nejvyšší úrovně renderedHtml. Uvnitř tohoto objektu umístěte klíč s názvem componentHtml spolu s dalšími potřebnými klíči. Příkladem scénáře je, když používáte knihovny vedlejších účinků, jako je helma React. Váš Ruby kód dostane tento objekt jako Hash obsahující klíče componentHtml a další vlastní klíče, které jste přidali:

{ renderedHtml: { componentHtml, customKey1, customKey2} }

podrobnosti o použití react_component_hash s react-helmet naleznete v naší dokumentaci react-helmet.

zpracování chyb

• všechny chyby z ReactOnRails budou typu ReactOnRails:: Error.
• předběžného načítání (server rendering) chyby získat kontextové informace pro HoneyBadger a Sentry pro snadnější ladění.

I18n

Reagovat na Kolejích poskytuje možnost pro automatické konverze Kolejnic *.yml locale souborů do *.json nebo `.js.Vidět, Jak přidat I18n pro souhrn přidání I18n.

Více Informací

Procházet odkazy v Souhrnu Obsah

Zde jsou některé vysoce doporučeno další články číst:

1. Jak Reagovat na Kolejích Funguje
2. Webpack Konfigurace
3. Zobrazit Pomocníky API
4. Ukládání a Výkon: Reagovat na Kolejích Pro.
5. nasazení.

podpora

kliknutím se připojíte k React + Rails Slack.

komunitní zdroje

kliknutím se přihlaste k odběru, abyste zůstali v kontaktu s Justinem Gordonem a ShakaCode. Mám v úmyslu zaslat oznámení o nových verzích React on Rails a našich nejnovějších blogových článků a tutoriálů.

• Slack Room: kontaktujte nás pro pozvání do ShakaCode Slack room! Dejte nám vědět, pokud chcete přispět.
• forum.shakacode.com: Příspěvek na vaše otázky
• @railsonmaui na Twitter
• Pro live, open source, například z toho gem, viz www.reactrails.com.
• Projekty s využitím a SLÁVA Reagovat na Kolejích. Prosím, odešlete své! Upravte stránku nebo nám pošlete e-mail a my přidáme vaše informace. Milujeme také hvězdy, protože nám pomáhá přilákat nové uživatele a přispěvatele.
• viz NEWS.md pro více poznámek v průběhu času.

přispívající

hlášení chyb a požadavky na pull jsou vítány. Podívejte se na příspěvek, abyste mohli začít, a seznam otázek hledaných pomocí.

React on Rails pro

podpora React on Rails pro development tím, že se stanete sponzorem GitHubu a získáte tyto výhody.

React on Rails Pro zahrnuje Vykreslování uzlového serveru, ukládání do mezipaměti fragmentů, rozdělení kódu a další vylepšení výkonu pro React on Rails. Pro případovou studii, viz článek HVMN je 90% snížení doby odezvy serveru od React on Rails Pro. Wiki obsahuje více podrobností.

plán podpory React on Rails Pro může pomoci!

• Optimalizace webpack instalaci nejnovějších Webpack pro Reagovat na Kolejích včetně kódu rozdělení s zatížitelné komponenty.
• Upgrade vaše aplikace používat aktuální rails/webpacker nastavení, které přeskočí Řetězová kola aktiv potrubí.
• lepší výkon na straně klienta a serveru.
• osvědčené postupy založené na více než 6 letech zkušeností React on Rails na mnoha výrobních projektech.
• pomocí rozumu s (nebo bez) reagovat na kolejích.

ShakaCode vám také může pomoci s vašimi vlastními potřebami pro vývoj softwaru. Specializujeme se na marketplace a e-commerce aplikace, které využívají jak Rails, tak React. Protože vlastníme HiChee.com, můžeme využít tento kód pro vaši aplikaci!

prosím napište Justin Gordon [email protected], Správce React on Rails, pro více informací.

Pro: Fragment Caching

Fragment caching je React on Rails Pro funkce. Fragment caching je obrovský výkon booster pro vaše aplikace. Použijte cached_react_component a cached_react_component_hash. API je stejné, jako react_componentreact_component_hash, ale pro 2 rozdíly:

1. cache_key má stejné parametry jako všechny Lišty cache view helper.
2. rekvizity jsou předávány blokem, takže vyhodnocení rekvizit není provedeno, pokud není mezipaměť přerušena. Předpokládejme, že jste dát své rekvizity výpočet do některých metoda se nazývá some_slow_method_that_returns_props:

<%= cached_react_component("App", cache_key: , prerender: true) do some_slow_method_that_returns_propsend %>

Takový fragment ukládání do mezipaměti uloží CPU pracovat pro váš webový server a výrazně snižuje čas požadavku. To zcela přeskočí náklady na hodnocení:

1. databázové volání pro výpočet rekvizity.
2. serializace hodnoty rekvizit hash do řetězce JSON pro vyhodnocení vykreslení JavaScriptu na server.
3. náklady spojené s vyhodnocením JavaScriptu z vašeho Ruby kódu.
4. vytvoření HTML řetězce obsahujícího rekvizity a kód JavaScriptu vykreslený serverem.

Všimněte si, že i bez Vykreslování serveru (bez kroku 3 výše) je ukládání do mezipaměti fragmentů stále účinné.

Pro: Integrace s uzlem.js pro Vykreslování serveru

výchozí Vykreslování serveru provádí ExecJS. Pokud chcete použít uzel.js server pro lepší výkon vykreslování serveru, e-mail [email protected]. ShakaCode vybudoval prémiový server pro vykreslování uzlů, který je součástí React on Rails Pro.

Reference pro ShakaCode

HVMN Posudek, Paul Benigeri, 12. října 2018

cena, kterou jsme zaplatili za konzultaci + Reagovat na Kolejích pro licence již byla provedena zpět několikrát z hostování poplatky sám. Celý proces byl super ruce pryč, a náš hlavní tým se během tohoto sprintu mohl soustředit na přepravu nových funkcí.

ResortPass Posudek, podle Leora Juster, 10. prosince 2018

Justin a jeho tým byli nápomocni při pomoci nám v nastavení designu základy a standardy pro náš přechod na reagovat na rails aplikace. Jen tři měsíce práce s týmem v kódu Shaka a máme hlavní stránku našeho Vykreslování na straně aplikačního serveru exponenciálně vylepšenými rychlostmi.

od Joel Hooks, spoluzakladatel, Chief Nerd at egghead.io, 30. Ledna 2017:

pro více ohlasů, Viz živé projekty a sláva.

příznivci

následující společnosti podporují tento open source projekt a ShakaCode používá své produkty! Justin píše reagovat na kolejích na RubyMine. Používáme Scout sledovat živé vystoupení HiChee.com, kolejnice AutoScale měřítko dynos HiChee, BrowserStack řešit problémy s oddball prohlížečů.

Klubovna

právě jsem se přestěhoval ShakaCode vývoj v Klubovně od Trello. Budeme to dělat se všemi našimi projekty. Pokud si chcete vyzkoušet ClubHouse a získat 2 měsíce zdarma po 14denní zkušební době, klikněte sem a použijte odkazovací kód ShakaCode. Účastníme se jejich úžasného trojstranného doporučovacího programu, o kterém si můžete přečíst zde. Pomocí našeho referenčního kódu budete podporovat ShakaCode a tím reagovat na kolejích!

Pokud chcete podpořit React on Rails a nechat zde uvést svou společnost, kontaktujte nás.

Aloha a všechno nejlepší od Justina a týmu ShakaCode!

Pracujte s námi