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

News

October 14, 2020: RUBY ROGUESRR 474: React on Rails V12-nie Gol tego jaka! z Justinem Gordonem.

Październik 1, 2020: Zobacz spec / dummy przykład repo dla prostej konfiguracji webpack za pomocą rails / webpacker gemthat obsługuje SSR.

2 sierpnia 2020 r.: Zobacz przykładowe repo react on Rails Tutorial z SSR, HMR fast refresh i TypeScript, aby uzyskać nowy sposób konfiguracji tworzenia pakietu SSR za pomocą rails/webpacker.

8 lipca 2020: wydanie wersji 12 Reacta on Rails.

główne ulepszenia

1. React Hooki Wsparcie Dla komponentów najwyższego poziomu
2. wiązania maszynopisu
3. rails / webpacker „po prostu działa” z React on Rails domyślnie.
4. i18n wsparcie dla generowania pliku JSON zamiast pliku JS.

koniecznie zobacz CHANGELOG.md i przeczytaj instrukcję aktualizacji: docs / basics / Upgrade-react-on-rails.

• Zobacz wypowiedź Justina RailsConf: Webpacker, to-po prostu-działa, ale jak?.
• jesteś zainteresowany wsparciem dla React on Rails? Czy chcesz użyć Node.js zrobić renderowanie po stronie serwera, więc biblioteki takie jak Emotion i Loadable Components po prostu działają, w porównaniu do renderowania przez Ruby embedded JS? Jeśli tak, sprawdź React on Rails Pro.
• HMR pracuje z ładowanymi komponentami, zapewniając zarówno niesamowite środowisko programistyczne podczas ładowania, jak i doskonałą wydajność środowiska wykonawczego. Napisz do mnie, jeśli chcesz użyć Loadable Components Code Split, aby przyspieszyć swoją aplikację, zmniejszając rozmiary pakietów i leniwie ładując potrzebny kod.

o

React on Rails integruje Rails z frameworkiem React front-end Facebooka (serwerowym renderowaniem).

Ten projekt jest utrzymywany przez firmę konsultingową ShakaCode. Skupiamy się na aplikacjach Ruby on Rails z Reactowymi front-endami, często używającymi TypeScript lub ReasonML. Budujemy również witryny Gatsby. Zobacz nasze ostatnie prace, aby zobaczyć przykłady tego, co robimy.

chcesz zoptymalizować konfigurację webpack dla React on Rails,w tym codesplitting z react-router i loadable-components z renderowaniem po stronie serwera?Właśnie zrobiliśmy to dla Popmenu, obniżając koszty Heroku o 20-25%, a jednocześnie zmniejszając średni czas reakcji o 73%.

Zapraszam do kontaktu z Justinem Gordonem, [email protected], opiekun React on Rails, więcej informacji.

Kliknij, aby dołączyć do React + Rails Slack.

cel projektu

zapewnienie wysokowydajnego frameworka do integracji Ruby on Rails z Reactem za pośrednictwem klejnotu Webpackera, szczególnie w odniesieniu do renderowania po stronie serwera Reactowego dla lepszego SEO i lepszej wydajności.

funkcje i dlaczego React on Rails?

biorąc pod uwagę, żerails/webpacker gem zapewnia już podstawową integrację z Reactem, dlaczego używasz „React on Rails”?

1. łatwe przekazywanie właściwości bezpośrednio z widoku Rails do komponentów Reactowych, zamiast ładowania widoku Rails, a następnie wysyłania osobnego żądania do API.
2. Ścisła integracja z rails / webpacker.
3. Rendering po stronie serwera (SSR), często używany do indeksowania gąsienic SEO i wydajności UX, nie jest oferowany przezrails/webpacker.
4. integracja Redux i Reactowego routera z renderowaniem po stronie serwera.
5. Internacjonalizacja (I18n) i (lokalizacja)
6. wspierająca społeczność. Ta wyszukiwarka internetowa pokazuje, w jaki sposób aktywne witryny publiczne używają React on Rails.
7. powód ML Support.

Zobacz Rails / Webpacker React Integration Options dla porównań z innymi klejnotami.

zobacz samouczek react-webpack-rails-tutorial dla przykładu implementacji na żywo i kodu.

ShakaCode Forum zawartość Premium

wymaga założenia DARMOWEGO konta.

• Jak używać różnych wersji pliku do renderowania klienta i serwera
• jak warunkowo renderować po stronie serwera w oparciu o typ urządzenia

Docs

rozważ przeglądanie tego na naszej stronie internetowej.

Ruby on Rails >=5 oraz rails/webpacker 4.2+.

wprowadzenie

Uwaga, najlepszym sposobem, aby zrozumieć, jak używać ReactOnRails jest przestudiowanie kilku prostych przykładów. Możesz zrobić szybką konfigurację demonstracyjną, zarówno w istniejącej aplikacji, jak i w nowej aplikacji Rails.

1. zrób szybki tutorial.
2. Dodaj React on Rails do istniejącej aplikacji Rails zgodnie z instrukcjami.
3. spójrz na spec / dummy, prosty, bez przykładu DB.
4. spójrz na github.com/shakacode/react-webpack-rails-tutorial; to w pełni funkcjonalny przykład na żywo w www.reactrails.com.

Podstawowa instalacja

Zobacz także instrukcje instalacji w istniejącej aplikacji Rails.

1. Dodajreact_on_rails gem do Gemfile:

   bundle add react_on_rails --strict

2. Zatwierdź to do Gita (w przeciwnym razie nie możesz uruchomić generatora, chyba że przekażesz opcję--ignore-warnings).Uruchom generator:

3. Uruchom generator:

   rails generate react_on_rails:install

4. Uruchom aplikację:

   rails s

5. odwiedź http://localhost:3000/hello_world.

Włączanie renderowania serwera

z kodem z uruchomienia generatora React on Rails powyżej:

1. Edytujapp/views/hello_world/index.html.erb I ustawprerender natrue.
2. odśwież stronę.

poniżej znajduje się wiersz, w którym włączasz renderowanie serwera,ustawiając prerender na true:

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

Uwaga, Jeśli masz błąd w konsoli dotyczący „ReferenceError: window is not defined”, musisz edytować config/webpacker.yml I ustaw hmr: false I inline: false.Zobacz rails / webpacker PR 2644, aby uzyskać poprawkę dla tego problemu.

podstawowe użycie

Konfiguracja

• Konfiguracjaconfig/initializers/react_on_rails.rb. Możesz dostosować niektóre niezbędne ustawienia i ustawienia domyślne. Zobacz plik docs / basics / configuration.MD, aby uzyskać dokumentację wszystkich opcji konfiguracyjnych.
• Konfiguracjaconfig/webpacker.yml. Jeśli korzystałeś z generatora i domyślnej konfiguracji webpackera, nie musisz dotykać tego pliku. Jeśli dostosowujesz swoją konfigurację, skonsultuj się ze specyfikacją / dummy / config / webpacker.przykład yml lub oficjalny domyślny webpacker.yml.
  • końcówka: Ustaw compile: false dla rozwoju, jeśli wiesz, że zawsze będziesz kompilować za pomocą procesu watch. W przeciwnym razie każde żądanie sprawdzi, czy kompilacja jest potrzebna.
  • Twójpublic_output_path musi pasować do Twojej niestandardowej konfiguracji pakietu Webpack dlaoutput Twoich pakietów.
  • Ustaw tylkocache_manifest natrue w swoim ENV produkcji.

włączenie komponentu Reactowego do widoków Rails

• komponent Reactowy jest renderowany poprzez widoki Rails. Oto próbka ERB:

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

• renderowanie po stronie serwera: Twój komponent reactowy jest najpierw renderowany do HTML na serwerze. Użyj opcji prerender:

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

• parametr component_name jest ciągiem znaków pasującym do nazwy użytej do globalnej ekspozycji komponentu Reactowego. Tak więc, w powyższych przykładach, jeśli masz reactowy komponent o nazwie „HelloWorld”, zarejestrujesz go za pomocą następujących linii:

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

  wyświetlanie twojego komponentu w ten sposób pozwala React on Rails odwoływać się do twojego komponentu z widoku Rails. Możesz odsłonić dowolną liczbę komponentów, o ile ich nazwy nie zderzają się ze sobą. Zobacz poniżej, aby uzyskać szczegółowe informacje na temat sposobu naświetlania komponentów za pomocą konfiguracji react_on_rails webpack. Możesz wywołać ReactOnRails.register wiele razy.

• @some_props może być skrótem lub ciągiem JSON. Jest to opcjonalny argument, który zakłada, że nie musisz przekazywać żadnych opcji (jeśli chcesz przekazać opcje, takie jak prerender: true, ale nie chcesz przekazywać żadnych właściwości, po prostu podaj pusty hash {}). Spowoduje to udostępnienie danych w Twoim komponencie:

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

• oto co twój HelloWorld.plik js może zawierać. Railscontext jest zawsze dostępny dla dowolnych parametrów, które zawsze chcesz mieć dostępne dla komponentów Reactowych. Nie ma to nic wspólnego z koncepcją kontekstu Reactowego. Zobacz Render-Functions i RailsContext, aby uzyskać więcej informacji na ten temat.

  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> );};

Zobacz API pomocników widoku, aby uzyskać więcej informacji na tematreact_component I jego funkcji siostrzanejreact_component_hash.

globalnie eksponuje Twoje Komponenty Reactowe

dla react on Rails view helperreact_component aby używać komponentów Reactowych, musisz je zarejestrować w swoim kodzie JavaScript.

używaj modułów tak jak w przypadku Webpack i React bez Rails. Różnica polega na tym, że zamiast montować komponenty Reacta bezpośrednio do elementu używając React.render, rejestrujesz komponenty w ReactOnRails, a następnie montujesz je za pomocą helperów wewnątrz widoków Rails.

oto jak wystawić komponent na react_component zobacz helper.

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

inny kod renderowania po stronie serwera (i pakiet specyficzny dla serwera)

możesz chcieć inny kod Dla komponentów renderowanych po stronie serwera niż po stronie klienta. Na przykład, jeśli animacja jest uruchamiana podczas wyświetlania komponentu, może być konieczne wyłączenie jej podczas renderowania serwera. Jednym ze sposobów obsługi tego jest kod warunkowy, taki jak if (window) { doClientOnlyCode() }.

innym sposobem jest użycie oddzielnego pliku konfiguracyjnego webpack, który może używać innego pliku wejściowego po stronie serwera, takiego jak 'serverRegistration.js „w przeciwieństwie do” clientRegistration.js.’To ustawiłoby inny kod do renderowania serwera.

aby uzyskać szczegółowe informacje na temat technik używania innego kodu do renderowania klienta i serwera, zobacz: Jak używać różnych wersji pliku do renderowania klienta i serwera. (Wymaga utworzenia bezpłatnego konta.)

określanie komponentów Reactowych: Zarejestruj się bezpośrednio lub użyj render-functions

masz dwa sposoby określania komponentów Reactowych. Możesz bezpośrednio zarejestrować komponent Reactowy (albo komponent funkcji, albo komponent klasy), albo stworzyć funkcję, która zwraca komponent Reactowy, który używamy nazwy „render-function”. Tworzenie funkcji renderowania pozwala:

1. masz dostęp do railsContext. Zapoznaj się z dokumentacją railscontext pod względem powodów, dla których może być ona potrzebna. Potrzebujesz funkcji renderowania, aby uzyskać dostęp do railsContext.
2. możesz użyć przekazanych właściwości do zainicjowania sklepu redux lub skonfigurowania react-routera.
3. możesz zwrócić różne komponenty w zależności od tego, co jest w właściwościach.

Uwaga, wartością zwracaną funkcji Renderującej powinna być albo funkcja Reactowa, albo komponent klasy, albo obiekt reprezentujący wyniki renderowania serwera.

nie zwraca elementu Reactowego (JSX).

ReactOnRails automatycznie wykryje zarejestrowaną funkcję renderowania przez fakt, że funkcja przyjmuje więcej niż 1 parametr. Innymi słowy, jeśli chcesz mieć możliwość dostarczenia funkcji, która zwraca tam komponent, to musisz podać co najmniej drugi parametr. To jest railsContext.Jeśli nie używasz tego parametru, zadeklaruj swoją funkcję z nieużywanym parametrem:

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>; }}

Tak więc, nie ma różnicy między zarejestrowaniem komponentu funkcji Reactowej lub komponentu klasy a „Render-Function.”Wystarczy zadzwonić ReactOnRails.register.

react_component_hash dla funkcji renderowania

innym powodem użycia funkcji renderowania jest to, że czasami w renderowaniu serwera, w szczególności z Reactowym routerem, musisz zwrócić wynik wywołania ReactDOMServer.rendertostring (element). Możesz to zrobić zwracając obiekt o następującym kształcie: {renderedhtml, redirectLocation, error }. Upewnij się, że używasz tej funkcji z react_component_hash.

w przypadku renderowania serwera, jeśli chcesz zwrócić wiele łańcuchów HTML z funkcji renderowania, możesz zwrócić obiekt z funkcji renderowania z jedną właściwością najwyższego poziomu renderedHtml. Wewnątrz tego obiektu umieść klucz o nazwie componentHtml, wraz z innymi potrzebnymi kluczami. Przykładowym scenariuszem jest użycie bibliotek efektów ubocznych, takich jak React Helmet. Twój kod Ruby otrzyma ten obiekt jako Hash zawierający klucze componentHtml i inne niestandardowe klucze, które dodałeś:

{ renderedHtml: { componentHtml, customKey1, customKey2} }

szczegółowe informacje na temat używania react_component_hash z react-helmet znajdziesz w dokumentacji react-helmet.

Obsługa błędów

• wszystkie błędy z ReactOnRails będą typu Reactonrails::Error.
• błędy Prerenderingu (renderowania serwera) pobierają informacje kontekstowe dla Honeybadgera i Sentry dla łatwiejszego debugowania.

i18n

React on Rails udostępnia opcję automatycznej konwersji plików lokalnych Rails*.yml na*.json or `.js.Zobacz jak dodać I18n, aby uzyskać podsumowanie dodawania I18n.

więcej szczegółów

przejrzyj linki w spisie treści

oto kilka wysoce zalecanych artykułów do przeczytania:

1. Jak działa React on Rails
2. Konfiguracja pakietów Webpack
3. Zobacz API pomocników
4. buforowanie i wydajność: React on Rails Pro.

wsparcie

Kliknij, aby dołączyć do React + Rails Slack.

zasoby społeczności

Kliknij, aby subskrybować, aby pozostać w kontakcie z Justinem Gordonem i ShakaCode. Zamierzam wysyłać ogłoszenia o nowych wydaniach React on Rails oraz o naszych najnowszych artykułach i samouczkach na blogu.

• Slack Room: skontaktuj się z nami, aby zaprosić do ShakaCode Slack room! Daj nam znać, jeśli chcesz wnieść swój wkład.
• forum.shakacode.com: Wyślij swoje pytania
• @ railsonmaui na Twitterze
• aby zobaczyć na żywo, open source, przykład tego klejnotu, zobacz www.reactrails.com.
• Zobacz projekty wykorzystujące React on Rails. Prześlij swoje! Edytuj stronę lub napisz do nas, a my dodamy Twoje dane. Uwielbiamy również Gwiazdy, ponieważ pomaga nam przyciągać nowych użytkowników i współpracowników.
• Zobacz NEWS.md więcej notatek w czasie.

zgłaszanie błędów i pull requesty są mile widziane. Zobacz Pomoc, aby rozpocząć, oraz listę problemów wymagających pomocy.

react on Rails Pro

Wspieraj rozwój React on Rails Pro, zostając sponsorem Githuba i czerp z tego korzyści.

React on Rails Pro zawiera renderowanie serwera węzła, buforowanie fragmentów, dzielenie kodu i inne ulepszenia wydajności dla React on Rails. Aby zapoznać się z studium przypadku, zobacz artykuł skrócenie czasu odpowiedzi serwera o 90% przez Hvmn od React on Rails Pro. Wiki zawiera więcej szczegółów.

Plan wsparcia React on Rails Pro może pomóc!

• Optymalizacja konfiguracji webpack do najnowszego Webpack dla React on Rails, w tym dzielenie kodu z loadable-components.
• Aktualizacja aplikacji do aktualnego ustawieniarails/webpacker, które pomija rurociąg zasobów zębatek.
• Lepsza wydajność po stronie klienta i serwera.
• najlepsze praktyki oparte na ponad 6-letnim doświadczeniu React on Rails w wielu projektach produkcyjnych.
• używanie rozumu z (lub bez) Reactem na Railsach.

ShakaCode może również pomóc w realizacji niestandardowych potrzeb programistycznych. Specjalizujemy się w aplikacjach marketplace i e-commerce, które wykorzystują zarówno Rails, jak i React. Ponieważ posiadamy HiChee.com, możemy wykorzystać ten kod do Twojej aplikacji!

napisz do Justina Gordona [email protected], opiekun React on Rails, aby uzyskać więcej informacji.

Pro: Buforowanie fragmentów

buforowanie fragmentów jest funkcją React on Rails Pro. Buforowanie fragmentów to ogromny wzrost wydajności Twoich aplikacji. Użyj cached_react_component I cached_react_component_hash. Interfejs API jest taki sam jakreact_component I react_component_hash, ale dla 2 różnic:

1. cache_key przyjmuje te same parametry, co każdy rails cache zobacz helper.
2. właściwości są przekazywane za pośrednictwem bloku, więc ich ocena nie jest wykonywana, chyba że pamięć podręczna jest zepsuta. Załóżmy, że umieścisz swoje obliczenia właściwości w jakiejś metodzie o nazwie some_slow_method_that_returns_props:

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

takie buforowanie fragmentów oszczędza pracę procesora dla Twojego serwera WWW i znacznie skraca czas żądania. To całkowicie pomija koszty oceny:

1. wywołania bazy danych do obliczenia właściwości.
2. serializacja wartości właściwości hashują się w łańcuchu JSON do oceny JavaScript do renderowania serwera.
3. koszty związane z ewaluacją JavaScript z kodu Ruby.
4. tworzenie łańcucha HTML zawierającego właściwości i kod JavaScript renderowany przez serwer.

uwaga, nawet bez renderowania serwera (bez kroku 3 powyżej), buforowanie fragmentów jest nadal skuteczne.

Pro: integracja z węzłem.js dla renderowania serwera

domyślne renderowanie serwera jest wykonywane przez ExecJS. Jeśli chcesz użyć węzła.serwer js dla lepszego renderowania serwerów, e-mail [email protected]. ShakaCode zbudował serwer renderowania węzłów premium, który jest częścią React on Rails Pro.

referencje dla ShakaCode

Referencje HVMN, Paul Benigeri, październik 12, 2018

cena, którą zapłaciliśmy za konsultację + licencja React on Rails pro została już kilka razy zwrócona z samych opłat hostingowych. Cały proces był bardzo prosty, a nasz główny zespół mógł skupić się na wysyłaniu nowych funkcji podczas tego sprintu.

ResortPass Testimonial, by Leora Juster, December 10, 2018

Justin i jego zespół pomogli nam w ustaleniu podstaw i standardów projektowania dla przejścia na aplikację react on rails. Zaledwie trzy miesiące pracy z zespołem w Shaka code i mamy stronę główną naszej aplikacji po stronie serwera renderowania z wykładniczo zwiększoną prędkością.

od Joel Hooks, współzałożyciel, główny Nerd w egghead.io, 30 stycznia 2017:

aby uzyskać więcej referencji, zobacz projekty na żywo i Kudos.

zwolennicy

następujące firmy wspierają ten projekt open source, a ShakaCode korzysta z ich produktów! Justin pisze React on Rails na RubyMine. Używamy Scout do monitorowania wydajności na żywo HiChee.com, Rails AutoScale to scale the dynos of HiChee, BrowserStack to solve problems with oddball browsers.

clubhouse

właśnie przeniosłem rozwój shakacode do clubhouse z Trello. Będziemy to robić przy wszystkich naszych projektach. Jeśli chcesz wypróbować ClubHouse i otrzymać 2 miesiące za darmo poza 14-dniowym okresem próbnym, kliknij tutaj, aby użyć kodu polecającego ShakaCode. Uczestniczymy w ich niesamowitym potrójnym programie poleceń, o którym możesz przeczytać tutaj. Korzystając z naszego kodu polecającego będziesz wspierać ShakaCode, a tym samym React on Rails!

Jeśli chcesz wspierać React on Rails i mieć swoją firmę na liście, skontaktuj się z nami.

Aloha i najlepsze życzenia od Justina i zespołu ShakaCode!

Pracuj z nami