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-Ikke Barbere Det Yak! Og Justin Gordon.1. oktober 2020: Se spec / dummy eksempel repo for en enkel konfigurasjon av webpack via rails / webpacker gemsom støtter SSR.2. August 2020: Se eksemplet repo Av React on Rails-Opplæringen MED SSR, HMR fast refresh og TypeScript for en ny måte å sette opp opprettelsen AV SSR-pakken din med rails/webpacker.8. juli 2020: Slipp v12 Av React on Rails.

Store Forbedringer

1. React Kroker Støtte for toppnivå komponenter
2. Typescript bindinger
3. rails / webpacker «fungerer bare» Med React On Rails som standard.
4. i18n støtte for å generere EN JSON-fil i stedet FOR EN js-fil.

Pass på å se CHANGELOG.md og les oppgraderingsinstruksjonene:dokumenter / grunnleggende / oppgradering-react-on-rails.

• Se Justins RailsConf talk: Webpacker, Det-Bare-Fungerer, Men Hvordan?.
• er Du interessert i Støtte For React on Rails? Vil du bruke Node.js å gjøre din server-side gjengivelse slik at biblioteker som Følelser Og Lastbare Komponenter bare fungerer, sammenlignet med gjengivelse via Ruby embedded JS? I så fall sjekk Ut React on Rails Pro.HMR jobber med Lastbare Komponenter for en både fantastisk hot-reloading utvikleropplevelse og god runtime ytelse. Vennligst send meg hvis du ønsker å bruke Lastbare Komponenter Kode Splitting for å få fart på app ved å redusere bunt størrelser og dovent lasting koden som trengs.

Om

React on Rails integrerer Rails med (server gjengivelse Av) Facebook ‘ S React front-end rammeverk.

dette prosjektet vedlikeholdes av programvarekonsulentfirmaet ShakaCode. Vi fokuserer På Ruby on Rails applikasjoner Med React front-ends, ofte ved Hjelp Av TypeScript eller ReasonML. Vi bygger Også Gatsby nettsteder. Se vårt siste arbeid for eksempler på hva vi gjør.Interessert i å optimalisere webpack-oppsettet ditt For React on Rails, inkludert kodesplitting med react-router, og lastbare komponenter med server-side rendering?Vi gjorde dette For Popmenu, senke Heroku kostnader 20-25% mens du får en 73% reduksjon i gjennomsnittlig responstid.

Ta gjerne Kontakt Med Justin Gordon, [email protected], vedlikeholder Av React on Rails, for mer informasjon.

Klikk For Å bli Med React + Rails Slack.

Prosjektmål

for å gi en høy ytelse rammeverk for å integrere Ruby on Rails Med React via Webpacker gem spesielt i forhold Til React Server-Side Rendering for bedre SEO og forbedret ytelse.

Funksjoner Og Hvorfor Reagere På Skinner?

gitt at rails/webpacker gem allerede gir grunnleggende React integrasjon, hvorfor ville du bruke «React on Rails»?Enkel passering av rekvisitter direkte fra Rails-visningen til React-komponentene dine i stedet for Å ha Rails-visningen lastet og deretter lage en egen forespørsel til API-EN din.

Se Rails / Webpacker React Integrasjonsalternativer for sammenligninger med andre perler.

Se react-webpack-rails-opplæringen for et eksempel på en live implementering og kode.

ShakaCode Forum Premium Innhold

Krever oppretting av en gratis konto.

• hvordan bruke forskjellige versjoner av en fil for klient og server gjengivelse
• hvordan betinget gjengi server side basert på enhetstypen

Docs

vurder å bla gjennom dette på vår hjemmeside.

Forutsetninger

Ruby på Skinner >=5 og skinner / webpacker 4.2+.

Komme I Gang

Merk, den beste måten å forstå Hvordan Du bruker ReactOnRails er å studere noen enkle eksempler. Du kan gjøre et raskt demooppsett, enten på din eksisterende app eller på en ny Rails-app.

1. Gjør den raske opplæringen.
2. Legg React on Rails til en eksisterende Rails app per instruksjonene.
3. Se på spec / dummy, en enkel, INGEN DB eksempel.
4. Se på github.com/shakacode/react-webpack-rails-tutorial; det er et fullverdig eksempel live på www.reactrails.com.

Grunnleggende Installasjon

Se også instruksjonene for installasjon i en eksisterende Rails-app.

1. Legg til react_on_rails perle Til Gemfile:

   bundle add react_on_rails --strict

2. Forplikte dette til git (ellers kan du ikke kjøre generatoren med mindre du passerer alternativet --ignore-warnings).

3. Kjør generatoren:

   rails generate react_on_rails:install

Start appen:

rails s

4. Besøkhttp://localhost:3000/hello_world.

Slå på server rendering

med koden fra å kjøre React on Rails generatoren ovenfor:

1. Rediger app/views/hello_world/index.html.erbog sett prerender til true.
2. Oppdater siden.

nedenfor er linjen der du slår server rendering på ved å sette prerender til true:

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

Merk at hvis du har en feil i konsollen angående «ReferenceError: window is not defined», må du redigereconfig/webpacker.ymlog setthmr: falseoginline: false.Se rails / webpacker PR 2644 for en løsning for thisissue.

Grunnleggende Bruk

Konfigurasjon

• Konfigurer config/initializers/react_on_rails.rb. Du kan justere noen nødvendige innstillinger og standarder. Se fil docs / basics / configuration. md for dokumentasjon av alle konfigurasjonsalternativer.
• Konfigurer config/webpacker.yml. Hvis du brukte generatoren og standard webpacker oppsett, trenger du ikke å røre denne filen. Hvis du tilpasser oppsettet, så ta kontakt med spec / dummy / config / webpacker.yml eksempel eller den offisielle standard webpacker.yml.
  • Tips: sett compile: false for utvikling hvis du vet at du alltid vil kompilere med en klokkeprosess. Ellers vil hver forespørsel sjekke om kompilering er nødvendig.
  • dinpublic_output_path må samsvare med din egendefinerte Webpack-konfigurasjon for output av buntene dine.
  • bare sett cache_manifest til true i din produksjon env.

Inkludert Din React Komponent på Rails Visninger

• React komponent gjengis via Rails Visninger. Her er EN ERB-prøve:

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

• Server-Side Rendering: din react komponent blir først gjengitt I HTML på serveren. Bruk prerender-alternativet:

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

• parameteren component_name er en streng som samsvarer med navnet du brukte til å eksponere React-komponenten globalt. Så, i eksemplene ovenfor, hvis Du hadde En React-komponent kalt «HelloWorld», ville du registrere den med følgende linjer:

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

  Å Eksponere komponenten din på denne måten er Hvordan React on Rails kan referere til komponenten din fra En Rails-visning. Du kan utsette så mange komponenter som du vil, så lenge navnene deres ikke kolliderer. Se nedenfor for detaljer om hvordan du eksponerer komponentene dine via react_on_rails webpack-konfigurasjonen. Du kan ringeReactOnRails.register mange ganger.

• @some_props kan enten være en hash-eller JSON-streng. Dette er et valgfritt argument forutsatt at du ikke trenger å passere noen alternativer (hvis du vil passere alternativer, for eksempel prerender: true, men du ikke vil passere noen egenskaper, bare passere en tom hash {}). Dette vil gjøre dataene tilgjengelige i komponenten din:

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

• Dette er Hva Din HelloWorld.js-filen kan inneholde. RailsContext er alltid tilgjengelig for alle parametere som du alltid vil ha tilgjengelig For Dine React-komponenter. Det har ingenting Å gjøre med Begrepet React Context. Se Render-Funksjoner og RailsContext for mer informasjon om dette emnet.

  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 Vis Hjelpere API FOR mer informasjon om react_component og dens søsken funksjon react_component_hash.

Globalt Utsette Dine React Komponenter

For React on Rails view helper react_component for å bruke Dine React komponenter, må du registrere dem i JavaScript-koden.

bruk moduler akkurat som Du ville når Du bruker Webpack og Reagere uten Skinner. Forskjellen er at i stedet For å montere React-komponenter direkte på et element ved hjelp av React.render, registrerer du komponentene dine For Å ReactOnRails og monterer dem med hjelpere inne i Rails-visningene dine.

slik eksponerer du en komponent til react_component vis hjelperen.

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

Annen Server-Side Gjengivelse Kode (og En Server-Spesifikk Bunt)

du vil kanskje ha annen kode for server-gjengitte komponenter som kjører server side versus klient side. Hvis du for eksempel har en animasjon som kjører når en komponent vises, må du kanskje slå den av når server gjengivelse. En måte å håndtere dette på er betinget kode som if (window) { doClientOnlyCode() }.

En Annen måte er å bruke en egen webpack konfigurasjonsfil som kan bruke en annen server sideoppføringsfil ,som ‘ serverRegistration.js ‘i motsetning til’ clientRegistration.js.’Det ville sette opp annen kode for server gjengivelse.

for detaljer om teknikker for å bruke annen kode for klient og server gjengivelse, se: Slik bruker du forskjellige versjoner av en fil for klient-og servergjengivelse. (Krever å opprette en gratis konto.)

Angi Dine React-Komponenter: Registrer deg direkte eller bruk gjengivelsesfunksjoner

Du har to måter å spesifisere Dine React-komponenter på. Du kan enten registrere React-komponenten (enten funksjon eller klassekomponent) direkte, eller du kan opprette en funksjon som returnerer En React-komponent, som vi bruker navnet på en «render-funksjon». Ved å opprette en gjengivelsesfunksjon kan du:

1. du har tilgang til railsContext. Se dokumentasjon for railsContext i forhold til hvorfor du kanskje trenger det. Du trenger En Gjengivelsesfunksjon for å få tilgang til railsContext.
2. Du kan bruke passed-in props til å initialisere en redux-butikk eller sette opp react-router.
3. du kan returnere ulike komponenter avhengig av hva som er i rekvisitter.

merk at returverdien til En Gjengivelsesfunksjon skal være Enten En React-Funksjon Eller Klassekomponent, eller et objekt som representerer servergjengivelsesresultater.

ikke returner Et React-Element (JSX).

ReactOnRails vil automatisk oppdage en registrert Gjengivelsesfunksjon ved at funksjonen tarmer enn 1 parameter. Med andre ord, hvis du vil ha muligheten til å gi en funksjon som returnerer derhandle komponent, da må du spesifisere minst en annen parameter. Dette er railsContext.Hvis du ikke bruker denne parameteren, erklærer du funksjonen med ubrukt 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>; }}

det er Derfor Ingen forskjell mellom å registrere En React-Funksjonskomponent eller klassekomponent versus En «Render-Funksjon.»Bare ring ReactOnRails.register.

react_component_hash for Gjengivelsesfunksjoner

En annen grunn til å bruke En Gjengivelsesfunksjon er at noen ganger i servergjengivelse, spesielt Med React Router, må du returnere resultatet Av å ringe ReactDOMServer.renderToString (element). Du kan gjøre dette ved å returnere et objekt med følgende form: { renderedHtml, redirectLocation, error }. Pass på at du bruker denne funksjonen med react_component_hash.

for server rendering, hvis du ønsker å returnere FLERE HTML-strenger fra En Gjengi-Funksjon, kan du returnere Et Objekt fra Gjengi-Funksjon med en enkelt toppnivå egenskap av renderedHtml. Inne I Dette Objektet plasserer du en nøkkel som heter componentHtml, sammen med andre nødvendige nøkler. Et eksempel på dette er når du bruker bivirkninger biblioteker Som React Hjelm. Ruby koden vil få Dette Objektet som En Hash som inneholder nøkler componentHtml og andre tilpassede nøkler som du har lagt:

{ renderedHtml: { componentHtml, customKey1, customKey2} }

for detaljer om bruk av react_component_hash med react-hjelm, se vår react-hjelm dokumentasjon.

Feilhåndtering

• alle feil Fra ReactOnRails vil være Av typen ReactOnRails:: Error.Prerendering (server rendering) feil få kontekstinformasjon For HoneyBadger og Sentry for enklere feilsøking.

I18n

React on Rails gir mulighet for automatiske konverteringer av Rails *.ymllokale filer til*.json eller `.js.Se Hvordan legge Til I18n for et sammendrag av å legge Til I18n.

Flere Detaljer

Bla gjennom linkene I Sammendragsfortegnelsen

Her er noen sterkt anbefalte neste artikler å lese:

1. Hvordan Reagere på Rails Fungerer
2. Webpack Konfigurasjon
3. Vis HJELPERE API
4. Caching Og Ytelse: Reagere På Rails Pro.
5. Distribusjon.

Støtte

Klikk For Å bli Med React + Rails Slack.

Fellesskapsressurser

Vennligst klikk for å abonnere for å holde kontakten Med Justin Gordon og ShakaCode. Jeg har tenkt å sende kunngjøringer av Nye utgivelser Av React on Rails og av våre nyeste blogg artikler og tutorials.

• Slack Room: kontakt Oss for en invitasjon Til ShakaCode Slack room! Gi oss beskjed hvis du vil bidra.
• forum.shakacode.com: Post dine spørsmål
• @railsonmaui På Twitter
• for en live, åpen kildekode, eksempel på denne perlen, se www.reactrails.com.
• Se Prosjekter som bruker Og KUDOS For React on Rails. Vennligst send inn din! Vennligst rediger enten side eller send oss en e-post, og vi vil legge til din info. Vi elsker også stjerner som det hjelper oss å tiltrekke nye brukere og bidragsytere.
• Se NEWS.md for flere notater over tid.

Bidra

Feilrapporter og trekk forespørsler er velkomne. Se Bidra til å komme i gang, og listen over hjelp ønsket problemer.

React on Rails Pro

Støtte React on Rails pro utvikling ved å bli En Github sponsor og få disse fordelene.React on Rails Pro inkluderer Node server rendering, fragment caching, kode-splitting og andre ytelsesforbedringer For React on Rails. FOR en casestudie, se ARTIKKELEN HVMNS 90% Reduksjon I Server Responstid Fra React on Rails Pro. Wikien inneholder flere detaljer.

React on Rails Pro-Støtteplanen kan hjelpe!

• Optimaliser webpack-oppsettet ditt til den nyeste Webpack for React on Rails, inkludert kodesplitting med lastbare komponenter.
• Oppgradere appen din til å bruke gjeldende rails/webpacker oppsett som hopper Over Sprockets asset pipeline.
• bedre ytelse klient og server side.
• Beste praksis basert på over 6 års React on Rails erfaring på mange produksjonsprosjekter.
• Bruke Grunn med (Eller uten) Reagere på Skinner.

ShakaCode kan også hjelpe deg med dine tilpassede programvareutvikling behov. Vi er spesialister på markedsplass og e-handelsapplikasjoner som bruker Både Rails og React. Fordi vi eier HiChee.com, vi kan utnytte den koden for appen din!

Vennligst Send Justin Gordon [email protected], vedlikeholder Av React on Rails, for mer informasjon.

Pro: Fragment Caching

Fragment caching er En React on Rails Pro-funksjon. Fragment caching er EN STOR ytelse booster for dine apps. Bruk cached_react_component og cached_react_component_hash. API-EN er den samme som react_component og react_component_hash, men for 2 forskjeller:

1. cache_key tar de samme parametrene som Alle Skinner cache vis hjelperen.
2. rekvisitter sendes via en blokk, slik at evaluering av rekvisitter ikke gjøres med mindre cachen er ødelagt. Anta at du setter rekvisitter beregning i noen metode kalt some_slow_method_that_returns_props:

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

slike fragment caching sparer CPU arbeid for webserveren og reduserer forespørselen tid. Det hopper helt evalueringskostnadene for:

1. Database samtaler for å beregne rekvisitter.
2. Serialisering rekvisitter verdier hash i EN JSON streng for å evaluere JavaScript til server gjengi.
3. Kostnader forbundet med å evaluere JavaScript fra Ruby-koden din.
4. Opprette HTML-strengen som inneholder rekvisitter og Server-gjengitt JavaScript-kode.

Merk, selv uten server rendering (uten trinn 3 ovenfor), er fragment caching fortsatt effektiv.

Pro: Integrasjon med Node.js For Server Rendering

Standard server rendering er gjort Av ExecJS. Hvis du vil bruke En Node.js server for bedre ytelse server rendering, e-post [email protected]. ShakaCode har bygget en premium Node rendering server som er en del Av React on Rails Pro.

Uttalelser For ShakaCode

HVMN Testimonial, Av Paul Benigeri, oktober 12, 2018

prisen vi betalte for konsultasjonen + React on Rails pro-lisensen har allerede blitt gjort tilbake et par ganger fra hosting avgifter alene. Hele prosessen var super hands off, og vårt kjerneteam var i stand til å fokusere på å sende ny funksjon under den sprinten.

ResortPass Testimonial, Av Leora Juster, desember 10, 2018

Justin Og hans team var medvirkende til å hjelpe oss med å sette designfundamenter og standarder for overgangen til en react on rails-applikasjon. Bare tre måneders arbeid med teamet På Shaka kode og vi har en hovedside av vår søknad server-side gjengivelse eksponentielt forbedret hastigheter.

Fra Joel Hooks, Medstifter, Sjefsnerd på egghead.io 30. januar 2017:

Se Live Prosjekter og Kudos.

Supporters

følgende selskaper støtter dette åpen kildekode-prosjektet, Og ShakaCode bruker sine produkter! Justin skriver React på Skinner På RubyMine. Vi bruker Scout til å overvåke live-ytelsen til HiChee.com, Rails AutoScale å skalere dynos Av HiChee, BrowserStack å løse problemer med oddball nettlesere.

klubbhus

jeg har nettopp flyttet shakacodes utvikling til klubbhus fra trello. Vi kommer til å gjøre dette med alle våre prosjekter. Hvis Du vil prøve ClubHouse og få 2 måneder gratis utover 14-dagers prøveperiode, klikk her for å bruke Shakacodes henvisningskode. Vi deltar i deres fantastiske trippelsidige henvisningsprogram, som du kan lese om her. Ved å bruke vår henvisningskode vil du støtte ShakaCode og Dermed Reagere På Skinner!

hvis Du vil støtte React on Rails og få din bedrift oppført her, ta kontakt.

Aloha og beste ønsker Fra Justin og ShakaCode teamet!

Arbeid med oss