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-raka inte den jak! med Justin Gordon.

1 oktober 2020: se spec/dummy-exemplet repo för en enkel konfiguration av webpack via rails / webpacker gemsom stöder SSR.

2 augusti 2020: se exemplet repo av React on Rails Tutorial med SSR, HMR fast refresh och TypeScript för ett nytt sätt att konfigurera skapandet av ditt SSR-paket med rails/webpacker.

8 juli 2020: släpp v12 av React on Rails.

stora förbättringar

1. React Hooks stöd för toppnivåkomponenter
2. Typescript-bindningar
3. rails / webpacker ”fungerar bara” med React on Rails som standard.
4. i18n stöd för att generera en JSON-fil i stället för en JS-fil.

Var noga med att se CHANGELOG.md och läs uppgraderingsinstruktionerna: docs/basics / Upgrade-react-on-rails.

• se Justins RailsConf talk: Webpacker, det fungerar bara, men hur?.
• är du intresserad av stöd för React on Rails? Vill du använda Node.js för att göra din server-sida rendering så bibliotek som känslor och laddningsbara komponenter fungerar bara, jämfört med rendering via Ruby embedded JS? Om så är fallet kolla in React on Rails Pro.
• HMR arbetar med laddningsbara komponenter för en både fantastisk hot-reloading Utvecklare erfarenhet och bra runtime prestanda. Vänligen maila mig om du vill använda laddningsbara komponenter koddelning för att påskynda din app genom att minska dina buntstorlekar och lata ladda koden som behövs.

om

React on Rails integrerar skenor med (server rendering av) Facebook: s React front-end framework.

detta projekt underhålls av mjukvarukonsultföretaget ShakaCode. Vi fokuserar på Ruby on Rails-applikationer med React front-ends, ofta med TypeScript eller ReasonML. Vi bygger också Gatsby webbplatser. Se vårt senaste arbete för exempel på vad vi gör.

intresserad av att optimera din webpack setup för React on Rails inklusive codesplitting med react-router, och laddningsbara-komponenter med serversidan rendering?Vi gjorde just detta för Popmenu och sänkte Heroku-kostnaderna 20-25% samtidigt som vi fick en minskning med 73% i genomsnittliga svarstider.

kontakta gärna Justin Gordon, [email protected], ansvarig för React on Rails, för mer information.

Klicka för att gå med i React + Rails Slack.

projektmål

för att tillhandahålla ett högpresterande ramverk för att integrera Ruby on Rails med React via Webpacker gem, särskilt när det gäller React server-Side Rendering för bättre SEO och förbättrad prestanda.

funktioner och varför reagera på skenor?

Med tanke på att rails/webpacker gem redan ger grundläggande React integration, varför skulle du använda ”React on Rails”?

1. enkel överföring av rekvisita direkt från din Rails-vy till dina React-komponenter snarare än att ha din Rails-vy och sedan göra en separat begäran till ditt API.
2. tät integration med skenor / webpacker.
3. Server-Side Rendering (SSR), som ofta används för SEO-sökrobotindexering och UX-prestanda, erbjuds inte avrails/webpacker.
4. Redux och React Router integration med server-side-rendering.
5. internationalisering (i18n) och (lokalisering)
6. en stödjande gemenskap. Denna webbsökning visar hur levande offentliga webbplatser använder React on Rails.
7. anledning ML stöd.

se Rails / Webpacker reagera integrationsalternativ för jämförelser med andra pärlor.

se react-webpack-rails-tutorial för ett exempel på en live-implementering och kod.

ShakaCode Forum Premium Content

kräver att du skapar ett gratis konto.

• hur man använder olika versioner av en fil för klient-och serverrendering
• hur man villkorligt återger serversidan baserat på enhetstypen

Docs

överväg att surfa på vår hemsida.

förutsättningar

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

komma igång

Obs, Det bästa sättet att förstå hur man använder ReactOnRails är att studera några enkla exempel. Du kan göra en snabb demoinställning, antingen på din befintliga app eller på en ny Rails-app.

1. gör den snabba handledningen.
2. Lägg till React on Rails i en befintlig Rails-app enligt instruktionerna.
3. titta på spec / dummy, ett enkelt, inget DB-exempel.
4. titta på github.com/shakacode/react-webpack-rails-tutorial; det är ett komplett exempel live på www.reactrails.com.

grundinstallation

Se även instruktionerna för installation i en befintlig Rails-app.

1. Lägg tillreact_on_rails gem till Gemfile:

   bundle add react_on_rails --strict

2. begå detta till git (annars kan du inte köra generatorn om du inte passerar alternativet --ignore-warnings).

3. kör generatorn:

   rails generate react_on_rails:install

4. Starta appen:

   rails s

besökhttp://localhost:3000/hello_world.

slå på server rendering

med koden från att köra React on Rails generator ovan:

1. redigera app/views/hello_world/index.html.erb och ställ in prerender till true.
2. uppdatera sidan.

nedan är raden där du aktiverar serverrendering genom att ställa in prerender till true:

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

Obs, Om du fick ett fel i din konsol angående ”Referenserfel: fönstret är inte definierat”,måste du redigera config/webpacker.yml och ställ in hmr: false och inline: false.Se rails / webpacker PR 2644 för en fix för thisissue.

Grundläggande användning

konfiguration

• konfigurera config/initializers/react_on_rails.rb. Du kan justera några nödvändiga inställningar och standardinställningar. Se arkiv docs/basics / configuration.md för dokumentation av alla konfigurationsalternativ.
• konfigurera config/webpacker.yml. Om du använde generatorn och standardinställningen för webpacker behöver du inte röra den här filen. Om du anpassar din inställning, kontakta spec/dummy/config/webpacker.YML exempel eller den officiella standard webpacker.yml.
  • tips: Ställ in compile: false för utveckling om du vet att du alltid kommer att sammanställa med en klockprocess. Annars kommer varje förfrågan att kontrollera om kompilering behövs.
  • din public_output_path måste matcha din anpassade Webpack konfiguration för output av dina buntar.
  • Ställ bara in cache_manifest till true I din produktion env.

inklusive din React-komponent på dina Rails-vyer

• React-komponent återges via dina Rails-vyer. Här är ett ERB-prov:

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

• Rendering på serversidan: din react-komponent återges först i HTML på servern. Använd alternativet prerender:

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

• parameterncomponent_name är en sträng som matchar namnet du använde för att exponera din React-komponent globalt. Så, i ovanstående exempel, om du hade en React-komponent som heter ”HelloWorld”, skulle du registrera den med följande rader:

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

  att exponera din komponent på detta sätt är hur React on Rails kan referera till din komponent från en Rails-vy. Du kan exponera så många komponenter som du vill, så länge deras namn inte kolliderar. Se nedan för detaljer om hur du exponerar dina komponenter via react_on_rails webpack-konfiguration. Du kan ringa ReactOnRails.register många gånger.

• @some_props kan vara antingen en hash-eller JSON-sträng. Detta är ett valfritt argument förutsatt att du inte behöver skicka några alternativ (om du vill skicka alternativ, till exempel prerender: true, men du vill inte skicka några egenskaper, skicka bara en tom hash {}). Detta kommer att göra data tillgängliga i din komponent:

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

• detta är vad din HelloWorld.JS-filen kan innehålla. RailsContext är alltid tillgänglig för alla parametrar som du alltid vill ha tillgängliga för dina React-komponenter. Det har ingenting att göra med begreppet React-sammanhang. Se Render-funktioner och RailsContext för mer information om detta ämne.

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

Se Visa hjälpare API för mer information om react_component och dess syskonfunktion react_component_hash.

exponera dina React-komponenter globalt

för React on Rails view helper react_component för att använda dina React-komponenter måste du registrera dem i din JavaScript-kod.

använd moduler precis som du skulle göra när du använder Webpack och reagera utan skenor. Skillnaden är att istället för att montera React-komponenter direkt på ett element med React.render, registrerar du dina komponenter till ReactOnRails och monterar dem sedan med hjälpare inuti dina Skenvyer.

Så här exponerar du en komponent tillreact_component view helper.

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

annan Renderingskod på serversidan (och en Serverspecifik bunt)

Du kanske vill ha annan kod för dina serverrenderade komponenter som kör serversidan kontra klientsidan. Om du till exempel har en animering som körs när en komponent visas kan du behöva stänga av den när servern renderar. Ett sätt att hantera detta är villkorlig kod som if (window) { doClientOnlyCode() }.

ett annat sätt är att använda en separat webpack-konfigurationsfil som kan använda en annan serversidans inmatningsfil, som ’serverRegistration.js ’i motsats till’ kundregistrering.js.’Det skulle ställa in olika kod för server rendering.

för detaljer om tekniker för att använda annan kod för klient-och serverrendering, se: Hur man använder olika versioner av en fil för klient och server rendering. (Kräver att du skapar ett gratis konto.)

ange dina React-komponenter: registrera dig direkt eller använd render-funktioner

Du har två sätt att ange dina React-komponenter. Du kan antingen registrera React-komponenten (antingen funktion eller klasskomponent) direkt, eller så kan du skapa en funktion som returnerar en React-komponent, som vi använder namnet på en ”render-funktion”. Att skapa en render-funktion tillåter:

1. Du har tillgång till railsContext. Se dokumentation för railsContext när det gäller varför du kan behöva det. Du behöver en Render-funktion för att komma åt railsContext.
2. Du kan använda de inlagda rekvisita för att initiera en redux-butik eller konfigurera react-router.
3. Du kan returnera olika komponenter beroende på vad som finns i rekvisita.

Obs, returvärdet för en Render-funktion bör vara antingen en React-funktion eller Klasskomponent eller ett objekt som representerar serverrenderingsresultat.

returnera INTE ett React-Element (JSX).

ReactOnRails upptäcker automatiskt en registrerad Renderfunktion genom att funktionen tar mer än 1 parameter. Med andra ord, om du vill ha möjligheten att tillhandahålla en funktion som returnerar därakt komponent, då måste du ange minst en andra parameter. Detta är railsContext.Om du inte använder den här parametern, förklara din funktion med den oanvända 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>; }}

således är det ingen skillnad mellan att registrera en React-Funktionskomponent eller klasskomponent kontra en ” Render-funktion.”Ring bara ReactOnRails.register.

react_component_hash för Render-funktioner

en annan anledning att använda en Render-funktion är att ibland i server rendering, speciellt med React Router, måste du returnera resultatet av att ringa ReactDOMServer.renderToString (element). Du kan göra detta genom att returnera ett objekt med följande form: { renderedHtml, redirectLocation, error }. Se till att du använder den här funktionen med react_component_hash.

för serverrendering, om du vill returnera flera HTML-strängar från en Render-funktion, kan du returnera ett objekt från din Render-funktion med en enda toppnivåegenskap av renderedHtml. Inuti det här objektet placerar du en nyckel som heter componentHtml, tillsammans med andra nödvändiga nycklar. Ett exempel på detta är när du använder biverkningar bibliotek som React Helmet. Din Ruby-kod kommer att få detta objekt som en Hash som innehåller nycklar componentHtml och andra anpassade nycklar som du lagt till:

{ renderedHtml: { componentHtml, customKey1, customKey2} }

För mer information om hur du använder react_component_hash med react-hjälm, se vår react-hjälm dokumentation.

felhantering

• alla fel från ReactOnRails kommer att vara av typen ReactOnRails:: Error.
• Prerendering (server rendering) fel få kontextinformation för HoneyBadger och Sentry för enklare felsökning.

I18n

React on Rails ger ett alternativ för automatiska omvandlingar av skenor*.yml lokalfiler till*.json eller `.js.Se hur du lägger till i18n för en sammanfattning av att lägga till I18n.

mer detaljer

bläddra i länkarna i sammanfattande Innehållsförteckning

här är några starkt rekommenderade nästa artiklar att läsa:

1. hur React on Rails fungerar
2. Webpack konfiguration
3. Visa hjälpare API
4. Caching och prestanda: React on Rails Pro.
5. distribution.

stöd

Klicka för att gå med i React + Rails Slack.

Community Resources

Klicka för att prenumerera För att hålla kontakten med Justin Gordon och ShakaCode. Jag tänker skicka meddelanden om nya utgåvor av React on Rails och av våra senaste bloggartiklar och handledning.

• Slack Room: kontakta oss för en inbjudan till ShakaCode Slack room! Låt oss veta om du vill bidra.
• forum.shakacode.com: skicka dina frågor
• @railsonmaui på Twitter
• för en levande, öppen källkod, exempel på denna pärla, se www.reactrails.com.
• se projekt som använder och KUDOS för React on Rails. Vänligen skicka in din! Redigera antingen sida eller maila oss så lägger vi till din information. Vi älskar också stjärnor eftersom det hjälper oss att locka nya användare och bidragsgivare.
• se NEWS.md för fler anteckningar över tiden.

bidragande

felrapporter och pull förfrågningar är välkomna. Se bidra till att komma igång, och listan över hjälp efterlysta problem.

React on Rails Pro

stöd reagera på Rails Pro utveckling genom att bli en Github sponsor och få dessa fördelar.

React on Rails Pro innehåller Node server rendering, fragment caching, kod-delning, och andra prestandaförbättringar för React on Rails. För en fallstudie, se artikeln HVMNS 90% minskning av Serversvarstid från React on Rails Pro. Wikin innehåller mer information.

React on Rails Pro Support Plan kan hjälpa till!

• optimera din webpack-inställning till den senaste Webpack för React on Rails inklusive koddelning med laddningsbara komponenter.
• uppgradera din app för att använda den aktuellarails/webpacker – inställningen som hoppar över kedjehjulets tillgångsrörledning.
• bättre prestanda klient-och serversidan.
• bästa praxis baserat på över 6 års erfarenhet av React on Rails på många produktionsprojekt.
• använda anledning med (eller utan) reagera på skenor.

ShakaCode kan också hjälpa dig med dina anpassade mjukvaruutvecklingsbehov. Vi är specialiserade på marketplace och e-handelsapplikationer som använder både Rails och React. Eftersom vi äger HiChee.com, vi kan utnyttja den koden för din app!

vänligen maila Justin Gordon [email protected], ansvarig för React on Rails, för mer information.

Pro: Fragment Caching

Fragment caching är en React on Rails Pro funktion. Fragment caching är en enorm prestanda booster för dina appar. Använd cached_react_component och cached_react_component_hash. API: et är detsamma som react_component och react_component_hash, men för 2 skillnader:

1. cache_key tar samma parametrar som alla skenor cache visa hjälpare.
2. rekvisita skickas via ett block så att utvärdering av rekvisita inte görs om inte cachen är trasig. Antag att du sätter din rekvisita beräkning i någon metod som kallas some_slow_method_that_returns_props:

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

sådan fragment caching sparar CPU arbete för din webbserver och kraftigt minskar begäran tid. Det hoppar helt över utvärderingskostnaderna för:

1. Databasanrop för att beräkna rekvisita.
2. serialisering rekvisita värden hash i en JSON sträng för att utvärdera JavaScript till server render.
3. kostnader för att utvärdera JavaScript från din Ruby-kod.
4. skapa HTML-strängen som innehåller rekvisita och den Serverrenderade JavaScript-koden.

Obs, även utan server rendering (utan steg 3 ovan), fragment caching är fortfarande effektiv.

Pro: Integration med nod.js för Server Rendering

Standard server rendering görs av ExecJS. Om du vill använda en nod.js server för bättre prestanda server rendering, e-post [email protected]. ShakaCode har byggt en premium nod rendering server som är en del av React on Rails Pro.

Testimonials for ShakaCode

Hvmn Testimonial, av Paul Benigeri, oktober 12, 2018

priset vi betalade för samrådet + React on Rails pro-licensen har redan gjorts tillbaka ett par gånger från värdavgifter ensam. Hela processen var super hands off, och vårt kärnteam kunde fokusera på att skicka ny funktion under den sprinten.

ResortPass Testimonial, av Leora Juster, December 10, 2018

Justin och hans team hjälpte oss att ställa in designfundament och standarder för vår övergång till en react on rails-applikation. Bara tre månaders arbete med teamet på Shaka code och vi har en huvudsida på vår applikationsserver-sida rendering med exponentiellt förbättrade hastigheter.

Från Joel Hooks, medgrundare, Chief Nerd at egghead.io den 30 januari 2017:

för fler vittnesmål, se levande projekt och beröm.

supportrar

följande företag stöder detta open source-projekt, och ShakaCode använder sina produkter! Justin skriver React on Rails på RubyMine. Vi använder Scout för att övervaka liveframträdande av HiChee.com, Rails AutoScale att skala dynos av HiChee, BrowserStack att lösa problem med oddball webbläsare.

klubbhus

jag har precis flyttat shakacodes utveckling till klubbhus från Trello. Vi kommer att göra detta med alla våra projekt. Om du vill prova ClubHouse och få 2 månader gratis utöver 14-dagars provperiod, klicka här för att använda Shakacodes hänvisningskod. Vi deltar i deras fantastiska trippelsidiga referensprogram, som du kan läsa om här. Genom att använda vår hänvisningskod kommer du att stödja ShakaCode och därmed reagera på skenor!

om du vill stödja React on Rails och få ditt företag listat här, kontakta oss.

Aloha och lyckönskningar från Justin och ShakaCode laget!

arbeta med oss