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

News

October 14, 2020: RUBY ROGUESRR 474: reagáljon a síneken V12 – ne borotválja azt a jakot! Justin Gordonnal.

1. október 2020: lásd a spec/dummy példa repo-t a webpack egyszerű konfigurálásához az SSR-t támogató rails/webpacker Gemma segítségével.

augusztus 2, 2020: lásd a React on Rails bemutatójának repo példáját SSR, HMR gyors frissítés és TypeScript az SSR csomag létrehozásának új módjáról rails/webpacker.

8. július 2020: A React on Rails v12 kiadása.

főbb fejlesztések

1. React horgok támogatása felső szintű komponensek
2. Typescript kötések
3. rails/webpacker “csak működik” a React on Rails alapértelmezés szerint.
4. i18n támogatás generáló JSON fájl helyett JS fájlt.

győződjön meg róla, hogy a CHANGELOG.md olvassa el a frissítési utasításokat: docs / basics / Upgrade-react-on-rails.

• lásd Justin RailsConf talk: Webpacker, ez-csak-működik, de hogyan?.
• érdekli a React on Rails támogatása? Szeretné használni csomópont.js, hogy nem a szerver oldali renderelés így könyvtárak, mint az érzelem és a betölthető alkatrészek csak dolgozni, mint rendering keresztül Ruby beágyazott JS? Ha igen, nézze meg a React on Rails Pro alkalmazást.
• a HMR betölthető komponensekkel dolgozik a csodálatos hot-reloading fejlesztői élmény és a nagyszerű futásidejű teljesítmény érdekében. Kérjük, írjon nekem, ha szeretné használni betölthető alkatrészek Kód felosztása, hogy gyorsítsák fel az alkalmazást azáltal, hogy csökkenti a csomag méretét, és lustán betölti a kódot, ami szükséges.

About

A React on Rails integrálja a Rails-t a Facebook React front-end keretrendszerével.

ezt a projektet a ShakaCode szoftver tanácsadó cég tartja fenn. A Ruby on Rails alkalmazásokra összpontosítunk a React front-endekkel, gyakran TypeScript vagy ReasonML használatával. Gatsby oldalakat is építünk. Lásd a legutóbbi munka példákat, hogy mit csinálunk.

érdekli a webcsomag beállításainak optimalizálása A React on Rails számára, beleértve a kódosztást a react-routerrel, valamint a betölthető komponenseket a szerver oldali rendereléssel?Csak ezt tettük a Popmenu számára, a Heroku 20-25% – kal csökkentette a költségeket, miközben az átlagos válaszidő 73% – kal csökkent.

bátran forduljon Justin Gordonhoz, [email protected], a react on Rails karbantartója, további információkért.

kattintson a React + Rails Slack csatlakozásához.

A projekt célja

egy nagy teljesítményű keretrendszer biztosítása a Ruby on Rails és a React integrálásához a Webpacker gem segítségével, különös tekintettel a React szerveroldali megjelenítésére a jobb SEO és a jobb teljesítmény érdekében.

funkciók és miért reagál a síneken?

tekintettel arra, hogy a rails/webpacker A gem már biztosítja az alapvető React integrációt, miért használja a “react on Rails” – et?

1. a kellékek egyszerű átadása közvetlenül a Rails nézetből a React komponensekhez, ahelyett, hogy a Rails nézet betöltené, majd külön kérést küldene az API-nak.
2. Szoros integráció rails / webpacker.
3. a szerveroldali renderelést (SSR), amelyet gyakran használnak SEO lánctalpas indexeléshez és UX teljesítményhez, nem kínálja arails/webpacker.
4. Redux és React Router integráció szerveroldali rendereléssel.
5. nemzetközivé (i18n) és (lokalizáció)
6. támogató közösség. Ez az internetes keresés megmutatja, hogy az ÉLŐ nyilvános webhelyek hogyan használják a react on Rails alkalmazást.
7. ok ML támogatás.

lásd a Rails / Webpacker React integrációs lehetőségeket más drágakövekkel való összehasonlításhoz.

lásd a react-webpack-rails-oktatóanyagot egy élő implementációra és kódra.

ShakaCode fórum prémium tartalom

ingyenes fiók létrehozását igényli.

• a fájl különböző verzióinak használata kliens és szerver rendereléshez
• hogyan lehet feltételesen renderelni a szerver oldalt az eszköz típusa alapján

dokumentumok

fontolja meg ennek böngészését a weboldalunkon.

előfeltételek

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

első lépések

Megjegyzés: A ReactOnRails használatának megértésének legjobb módja néhány egyszerű példa tanulmányozása. Meg tudod csinálni egy gyors demo beállítás, akár a meglévő alkalmazás, vagy egy új Rails app.

1. végezze el a gyors bemutatót.
2. adja hozzá a react on Rails alkalmazást egy meglévő Rails alkalmazáshoz az utasítások szerint.
3. nézd meg a spec / dummy-t, egy egyszerű, nincs DB példa.
4. nézd meg github.com/shakacode/react-webpack-rails-tutorial; ez egy teljes funkcionalitású példa élőben www.reactrails.com.

alapvető telepítés

Lásd még a meglévő Rails alkalmazásba történő telepítésre vonatkozó utasításokat.

1. adja hozzá a react_on_rails gem-et a Gemfile-hez:

   bundle add react_on_rails --strict

2. kötelezze ezt a git-re (különben nem futtathatja a generátort, ha nem adja át a--ignore-warnings opciót).

3. futtassa a generátort:

   rails generate react_on_rails:install

4. indítsa el az alkalmazást:

   rails s

5. látogatás http://localhost:3000/hello_world.

bekapcsolása szerver rendering

a kódot fut a React on Rails generátor felett:

1. Edit app/views/hello_world/index.html.erbés állítsa be a prerender – t true – re.
2. frissítse az oldalt.

Az alábbiakban látható az a sor, ahol bekapcsolhatja a szerver renderelését a prerender beállításával true:

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

Megjegyzés: Ha a konzolban hiba történt a “ReferenceError: window is not defined”kifejezéssel kapcsolatban,akkor szerkesztenie kell a config/webpacker.yml és állítsa be a hmr: false és inline: false.Lásd rails / webpacker PR 2644 egy fix thisissue.

Alaphasználat

konfiguráció

• Konfigurálásconfig/initializers/react_on_rails.rb. Módosíthat néhány szükséges beállítást és alapbeállítást. Lásd a docs/basics/configuration.md fájlt az összes konfigurációs beállítás dokumentálásához.
• Configureconfig/webpacker.yml. Ha a generátort és az alapértelmezett webpacker beállítást használta, akkor nem kell megérintenie ezt a fájlt. Ha testreszabja a beállítást, akkor olvassa el a spec/dummy/config/webpacker.YML példa vagy a hivatalos alapértelmezett webpacker.yml.
  • tipp: állítsa be acompile: false beállítást fejlesztésre, ha tudja, hogy mindig egy órafolyamattal fog fordítani. Ellenkező esetben minden kérés ellenőrzi, hogy szükség van-e fordításra.
  • apublic_output_pathmeg kell egyeznie a csomagokoutput egyéni Webcsomag-konfigurációjával.
  • csak a cache_manifestértéket állítsa true értékre a gyártási env-ben.

beleértve a React komponenst a Rails nézetekben

• a React komponens a Rails nézeteken keresztül jelenik meg. Itt van egy ERB minta:

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

• szerver oldali renderelés: a react komponenst először HTML-be rendereljük a szerveren. Használja a prerender opciót:

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

• a component_name paraméter egy karakterlánc, amely megegyezik azzal a névvel, amelyet a React összetevő globális megjelenítéséhez használt. Tehát a fenti példákban, ha van egy “HelloWorld” nevű React komponens, akkor a következő sorokkal regisztrálja:

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

  az összetevő ilyen módon történő feltárása azt mutatja, hogy a React on Rails hogyan képes hivatkozni az összetevőre egy Rails nézetből. Akkor ki annyi komponenst, amennyit csak akar, mindaddig, amíg a nevük nem ütköznek. Lásd alább a részleteket arról, hogyan tárja fel összetevőit a react_on_rails webpack konfiguráción keresztül. Hívhatja a ReactOnRails.register számot sokszor.

• @some_props lehet hash vagy JSON karakterlánc. Ez egy opcionális argumentum, feltételezve, hogy nem kell átadnia semmilyen opciót (ha olyan opciókat szeretne átadni, mint például prerender: true, de nem akar átadni semmilyen tulajdonságot, egyszerűen adjon át egy üres kivonatot {}). Ez teszi elérhetővé az adatokat a komponens:

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

• Ez az, amit a HelloWorld.a js fájl tartalmazhat. A railsContext mindig rendelkezésre áll minden olyan paraméterhez, amelyet mindig elérhetővé szeretne tenni a React komponensei számára. Ennek semmi köze a reakció kontextusának fogalmához. A témával kapcsolatos további részletekért lásd a Render-függvények és a RailsContext részt.

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

további részletekért tekintse meg a View Helpers API-t react_componentés annak testvérfunkciója react_component_hash.

A React komponensek globális megjelenítése

A React on Rails nézetsegítőhözreact_component a React komponensek használatához regisztrálnia kell őket a JavaScript kódban.

használja a modulokat ugyanúgy, mint a Webpack használatakor, és reagáljon Rails nélkül. A különbség az, hogy ahelyett, hogy a React komponenseket közvetlenül egy elemre szerelné a React.render használatával, regisztrálja az összetevőket a ReactOnRails-hez, majd a sínek nézeteiben lévő segítőkkel szerelje fel őket.

így tehet ki egy összetevőt a react_component view helper számára.

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

különböző szerveroldali renderelési kód (és egy szerver-specifikus csomag)

előfordulhat, hogy a szerveroldali renderelt komponenseknek más kódot kell használniuk, mint a kliens oldalnak. Például, ha van egy animáció, amely akkor fut, amikor egy összetevő megjelenik, akkor lehet, hogy ki kell kapcsolnia, amikor kiszolgáló renderelés. Ennek egyik módja a feltételes kód, például a if (window) { doClientOnlyCode() }.

egy másik módszer egy külön webcsomag konfigurációs fájl használata, amely más kiszolgálóoldali belépési fájlt használhat, például ‘serverRegistration.js ‘szemben a’ clientRegistration.js. Ez más kódot állítana be a szerver rendereléséhez.

a kliens és a szerver rendereléséhez használt különböző kódokkal kapcsolatos részletekért lásd:: A fájl különböző verzióinak használata kliens és szerver rendereléshez. (Ingyenes fiók létrehozása szükséges.)

A React komponensek megadása: regisztráljon közvetlenül vagy használjon render-függvényeket

kétféle módon adhatja meg a React komponenseket. Vagy regisztrálhatja a React komponenst (akár függvény, akár osztály komponens) közvetlenül, vagy létrehozhat egy függvényt, amely visszaadja a React komponenst, amelyet egy “render-függvény”nevével használunk. Render-függvény létrehozása lehetővé teszi:

1. hogy hozzáférjen a railsContext. Lásd a railsContext dokumentációját arról, hogy miért lehet szüksége rá. A railsContexteléréséhez Render-függvényre van szükség.
2. használhatja az átadott kellékeket egy redux áruház inicializálásához vagy a react-router beállításához.
3. különböző összetevőket adhat vissza attól függően, hogy mi van a kellékekben.

megjegyzés: a Render-függvény visszatérési értékének vagy React függvénynek, vagy Osztálykomponensnek, vagy a kiszolgáló renderelési eredményeit reprezentáló objektumnak kell lennie.

ne adjon vissza React elemet (JSX).

a ReactOnRails automatikusan felismeri a regisztrált Render-funkciót azáltal, hogy a függvény több mint 1 paramétert vesz igénybe. Más szóval, ha azt szeretné, hogy olyan funkciót biztosítson, amely visszaadja aakt komponens, akkor meg kell adnia legalább egy második paramétert. Ez a railsContext.Ha nem használja ezt a paramétert, deklarálja a függvényt a fel nem használt param-mal:

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

így nincs különbség a React Függvénykomponens vagy osztálykomponens regisztrálása és a “Render-függvény között.”Csak hívja ReactOnRails.register.

react_component_hash a Render-függvényekhez

a Render-függvény használatának másik oka az, hogy néha a szerver renderelésénél, különösen a React routerrel, vissza kell adnia a ReactDOMServer hívásának eredményét.renderToString (elem). Ezt úgy teheti meg, hogy visszaad egy objektumot a következő alakzattal: { renderedHtml, redirectLocation, error }. Győződjön meg róla, hogy ezt a funkciót használja react_component_hash.

szerver renderelés esetén, ha egy Render-függvényből több HTML-karakterláncot szeretne visszaadni, akkor a Render-függvényből egy objektumot is visszaadhat egyetlen legfelső szintű tulajdonsággal:renderedHtml. Ezen az objektumon belül helyezzen el egy componentHtml nevű kulcsot a többi szükséges kulccsal együtt. Erre példa az, amikor olyan mellékhatáskönyvtárakat használ, mint a React Helmet. A Ruby-kód ezt az objektumot Hash-ként kapja meg, amely tartalmazza a componenthtml kulcsokat és minden más hozzáadott egyéni kulcsot:

{ renderedHtml: { componentHtml, customKey1, customKey2} }

a react_component_hash react-helmet használatával kapcsolatos részletekért lásd a react-helmet dokumentációt.

hibakezelés

• a ReactOnRails összes hibája ReactOnRails::Error típusú lesz.
• Prerendering (szerver renderelés) hibák a Honeybadger és a Sentry kontextusinformációinak lekérése a könnyebb hibakeresés érdekében.

I18n

A react on Rails lehetőséget biztosít a sínek automatikus átalakítására *.ymlterületi fájlok *.json or `.js.Az I18n hozzáadásának összefoglalását lásd az I18N hozzáadása fejezetben.

További részletek

Böngésszen az összefoglaló Tartalomjegyzék linkjein

íme néhány erősen ajánlott következő cikk, amelyet el kell olvasni:

1. hogyan működik a React on Rails
2. Webpack konfiguráció
3. Helpers API megtekintése
4. gyorsítótár és teljesítmény: React on Rails Pro.
5. telepítés.

támogatás

kattintson a React + Rails Slack csatlakozásához.

Közösségi Források

kattintson a feliratkozáshoz, hogy kapcsolatba léphessen Justin Gordonnal és ShakaCode-dal. Szándékomban áll bejelentéseket küldeni a React on Rails új kiadásairól, valamint a legújabb blogcikkeinkről és oktatóanyagainkról.

• Slack szoba: lépjen kapcsolatba velünk egy meghívót a ShakaCode Slack szoba! Tudassa velünk, ha szeretne hozzájárulni.
• forum.shakacode.com: tegye fel kérdéseit
• @railsonmaui a Twitteren
• élő, nyílt forráskódú, példa erre a drágakőre, lásd: www.reactrails.com.
• lásd a projektek használata és KUDOS a React on Rails. Kérjük, küldje el a sajátját! Kérjük, szerkessze az oldalt, vagy írjon nekünk e-mailt, és hozzáadjuk az adatait. Szeretjük a csillagokat is, mivel segít új felhasználókat és közreműködőket vonzani.
• lásd NEWS.md további jegyzetek az idő múlásával.

hozzájárulás

hibajelentéseket és lekérési kéréseket szívesen fogadunk. Lásd: hozzájárulás az induláshoz, valamint a segítséget igénylő problémák listája.

React on Rails Pro

támogassa a React on Rails Pro fejlesztését azáltal, hogy Github szponzor lesz, és megkapja ezeket az előnyöket.

A React on Rails Pro magában foglalja a Csomópontkiszolgáló renderelését, a töredék gyorsítótárazását, a kódfelosztást és a React on Rails egyéb teljesítménynövelő fejlesztéseit. Egy esettanulmány, lásd a cikket HVMN 90% – os csökkentése szerver válaszidő React on Rails Pro. A Wiki további részleteket tartalmaz.

a React on Rails Pro Támogatási terve segíthet!

• a webcsomag beállításának optimalizálása a legújabb Webcsomagra a React on Rails számára, beleértve a kódfelosztást betölthető komponensekkel.
• Az alkalmazás frissítése az aktuálisrails/webpacker beállítás használatára, amely kihagyja a lánckerekek eszközvezetékét.
• jobb teljesítmény kliens és szerver oldalon.
• a legjobb gyakorlatok a React on Rails több mint 6 éves tapasztalatán alapulnak számos gyártási projektben.
• A Reason használata a react on Rails funkcióval (vagy anélkül).

ShakaCode is segít az egyéni szoftver fejlesztési igényeit. Szakterületünk a piactéri és e-kereskedelmi alkalmazások, amelyek mind a Rails, mind a React. Mert a miénk HiChee.com, kihasználhatjuk ezt a kódot az alkalmazásához!

kérjük, írjon Justin Gordonnak [email protected], a react on Rails karbantartója, további információkért.

Pro: Fragmentum gyorsítótár

a fragmentum gyorsítótárazás egy React on Rails Pro funkció. A töredék gyorsítótárazása hatalmas teljesítménynövelő az alkalmazások számára. Használja a cached_react_componentés cached_react_component_hash. Az API ugyanaz, mint a react_component and react_component_hash, de 2 különbség esetén:

1. a cache_key ugyanazokat a paramétereket veszi igénybe, mint bármely Rails cache view helper.
2. a kellékeket egy blokkon keresztül továbbítják, így a kellékek értékelése csak akkor történik meg, ha a gyorsítótár megszakad. Tegyük fel, hogy a kellékek számítását valamilyen módszerbe helyezi some_slow_method_that_returns_props:

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

Az ilyen töredék gyorsítótárazás megtakarítja a CPU munkáját a webszerver számára, és jelentősen csökkenti a kérés idejét. Ez teljesen kihagyja az értékelési költségek:

1. Adatbázis hívások kiszámításához a kellékek.
2. szerializáció a kellékek értékei egy JSON karakterláncba kerülnek a JavaScript kiszolgálóra történő megjelenítéséhez.
3. a JavaScript Ruby kódból történő értékelésével kapcsolatos költségek.
4. a kellékeket és a szerver által renderelt JavaScript kódot tartalmazó HTML karakterlánc létrehozása.

Megjegyzés: szerver renderelés nélkül (a fenti 3.lépés nélkül) a töredék gyorsítótárazása továbbra is hatékony.

Pro: integráció a csomóponttal.js szerver rendereléshez

Az alapértelmezett szerver renderelést az ExecJS végzi. Ha csomópontot szeretne használni.js szerver a jobb teljesítményű szerver renderelés, e-mail [email protected]. ShakaCode épített prémium csomópont rendering szerver, amely része a React on Rails Pro.

ajánlások a ShakaCode számára

HVMN ajánlás, írta: Paul Benigeri, október 12, 2018

a konzultációért fizetett ár + a React on Rails pro licencet már néhányszor visszaadták a tárhelydíjakból. Az egész folyamat szuper kezekkel volt, és a fő csapatunk képes volt arra összpontosítani, hogy új funkciókat szállítson a sprint alatt.

ResortPass ajánlólevél, Leora Juster, December 10, 2018

Justin és csapata fontos szerepet játszott abban, hogy segítsen nekünk a react on rails alkalmazásra való áttérés tervezési alapjainak és szabványainak meghatározásában. Mindössze három hónap munka a csapattal a Shaka code – nál, és van egy főoldalunk az alkalmazásszerver-oldali megjelenítésről, exponenciálisan jobb sebességgel.

Joel Hooks-tól, társalapító, fő Nerd at egghead.io, január 30, 2017:

további ajánlásokért Lásd: élő projektek és Kudos.

támogatók

a következő vállalatok támogatják ezt a nyílt forráskódú projektet, és a ShakaCode használja a termékeiket! Justin írja reagál a síneken RubyMine. Az általunk használt Scout figyelemmel kíséri az élő teljesítményét HiChee.com, sínek AutoScale méretezni a dynos HiChee, BrowserStack problémák megoldására oddball böngészők.

clubhouse

most költöztem a shakacode fejlesztését a clubhouse-ba a Trello-ból. Ezt fogjuk csinálni az összes projektünkkel. Ha ki akarja próbálni a ClubHouse-t, és 2 hónapot ingyen kap a 14 napos próbaidőszakon túl, kattintson ide a ShakaCode ajánlási kódjának használatához. Részt veszünk a fantasztikus háromoldalas ajánlási programjukban, amelyről itt olvashat. A referral kód használatával támogatni fogja a ShakaCode-ot, és így reagáljon a síneken!

ha szeretné támogatni a React on Rails-t, és itt szeretné felsorolni a cégét, vegye fel a kapcsolatot.

Aloha és jókívánságokat Justin és a ShakaCode csapat!

dolgozzon velünk