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

News

October 14, 2020: Berichten: 37108 lid geworden op: 09 Mar 2009, 17: 01 locatie: Valthermond contact: met Justin Gordon.

oktober 1, 2020: zie het spec / dummy voorbeeld repo voor een eenvoudige configuratie van webpack via de rails/webpacker gemdat SSR ondersteunt.

2 augustus 2020: zie het voorbeeld repo van react on Rails Tutorial With SSR, HMR fast refresh, en TypeScript voor een nieuwe manier om de creatie van uw SSR-bundel in te stellen met rails/webpacker.

8 juli 2020: Release v12 van React on Rails.

belangrijke verbeteringen

1. React Hooks ondersteuning voor top level componenten
2. Typescript bindingen
3. rails / webpacker “werkt gewoon” met React on Rails standaard.
4. i18n ondersteuning voor het genereren van een JSON-bestand in plaats van een JS-bestand.

zorg ervoor dat u de CHANGELOG.md en lees de upgrade instructies: docs / basics / upgrading-react-on-rails.

• zie Justin ‘ s RailsConf talk: Webpacker, It-Just-Works, But How?.
• bent u geïnteresseerd in ondersteuning voor React on Rails? Wilt u Node gebruiken.js om uw server-side rendering te doen, zodat bibliotheken zoals emotie en laadbare componenten gewoon werken, in vergelijking met rendering via Ruby embedded JS? Zo ja, check out React on Rails Pro.
• HMR werkt met laadbare componenten voor zowel een verbazingwekkende hot-herladen Ontwikkelaar ervaring als geweldige runtime prestaties. Stuur me een e-mail als u wilt gebruik maken van laadbare componenten Code splitsen om de snelheid van uw app door het verminderen van uw bundel maten en lui laden van de code die nodig is.

About

React on Rails integreert Rails met (server rendering van) Facebook ‘ s react front-end framework.

dit project wordt onderhouden door het software adviesbureau ShakaCode. We richten ons op Ruby on Rails toepassingen met React front-ends, vaak met behulp van TypeScript of ReasonML. We bouwen ook Gatsby sites. Zie ons recente werk voor voorbeelden van wat we doen.

geïnteresseerd in het optimaliseren van uw Webpack setup voor React on Rails inclusief codesplitting met react-router,en loadable-componenten met server-side rendering?We deden dit net voor Popmenu, het verlagen van Heroku kosten 20-25% terwijl het krijgen van een 73% daling van de gemiddelde responstijden.

neem gerust contact op met Justin Gordon, [email protected], onderhouder van React on Rails, voor meer informatie.

Klik om deel te nemen aan React + Rails Slack.

Projectdoelstelling

het bieden van een high performance framework voor de integratie van Ruby on Rails met React via de webpacker gem vooral met betrekking tot React Server-Side Rendering voor betere SEO en betere prestaties.

functies en waarom reageren op Rails?

gegeven het feit dat rails/webpacker gem al basis-React-integratie biedt, waarom zou u “React on Rails”gebruiken?

1. eenvoudige overdracht van props rechtstreeks van uw Rails weergave naar uw React componenten in plaats van het hebben van uw Rails weergave laden en dan een aparte aanvraag aan uw API.
2. strakke integratie met rails / webpacker.
3. Server-Side Rendering (SSR), vaak gebruikt voor SEO crawler indexering en UX performance, wordt niet aangeboden door rails/webpacker.
4. Redux en React Router integratie met server-side-rendering.
5. internationalisatie (I18n) en (lokalisatie)
6. een ondersteunende gemeenschap. Deze zoekopdracht op het web laat zien hoe live publieke sites React on Rails gebruiken.
7. reden ML ondersteuning.

zie Rails / Webpacker React integratie-opties voor vergelijkingen met andere edelstenen.

zie de React-webpack-rails-tutorial voor een voorbeeld van een live implementatie en code.

Shakacode Forum Premium Content

vereist het aanmaken van een GRATIS account.

• hoe verschillende versies van een bestand te gebruiken voor client en server rendering
• Hoe de serverzijde voorwaardelijk te renderen op basis van het apparaattype

Docs

overweeg om hier op onze website te bladeren.

Prerequisites

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

aan de slag

Note, de beste manier om te begrijpen hoe ReactOnRails te gebruiken is om een paar eenvoudige voorbeelden te bestuderen. U kunt een snelle demo setup doen, hetzij op uw bestaande app of op een nieuwe Rails app.

1. Voer de quick tutorial uit.
2. voeg React on Rails toe aan een bestaande Rails-app volgens de instructies.
3. Kijk naar spec / dummy, een eenvoudig, geen DB voorbeeld.
4. Kijk naar github.com/shakacode/react-webpack-rails-tutorial; het is een full-featured voorbeeld live op www.reactrails.com.

basisinstallatie

zie ook de instructies voor het installeren in een bestaande Rails app.

1. voeg de react_on_rails gem toe aan Gemfile:

   bundle add react_on_rails --strict

2. Commit dit naar git (of anders kun je de generator niet draaien tenzij je de optie --ignore-warningspasseert).

3. start de generator:

   rails generate react_on_rails:install

4. Start de app:

   rails s

5. bezoekhttp://localhost:3000/hello_world.

draaien server rendering

met de code van het draaien van de React on Rails generator hierboven:

1. Bewerk app/views/hello_world/index.html.erb en stel prerender in op true.
2. vernieuw de pagina.

Hieronder is de regel waar u de serverweergave inschakelt door prerender naar true:

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

Opmerking: Als u een fout in uw console hebt met betrekking tot “ReferenceError: window is not defined”, dan moet u en stel hmr: false en inline: falsein.Zie rails / webpacker PR 2644 voor een oplossing voor deze kwestie.

basisgebruik

configuratie

• Configure config/initializers/react_on_rails.rb. U kunt een aantal noodzakelijke instellingen en standaardinstellingen aanpassen. Zie file docs / basics / configuration. md voor documentatie van alle configuratieopties.
• configureer config/webpacker.yml. Als u de generator en de standaard webpacker setup gebruikt, hoeft u dit bestand niet aan te raken. Als je je setup aanpast, raadpleeg dan de spec/dummy/config/webpacker.yml voorbeeld of de officiële standaard webpacker.yml.
  • Tip: stel compile: false in voor ontwikkeling als je weet dat je altijd zal compileren met een watch-proces. Anders zal elk verzoek controleren of compilatie nodig is.
  • uw public_output_path moet overeenkomen met uw aangepaste Webpackconfiguratie voor output van uw bundels.
  • stel alleen cache_manifest in op true in uw productie-env.

inclusief uw React Component op uw Rails weergaven

• react component worden weergegeven via uw Rails weergaven. Hier is een ERB-Monster.:

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

• Server-Side Rendering: uw react component wordt voor het eerst weergegeven in HTML op de server. Gebruik de prerender optie:

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

• De component_name parameter is een string die overeenkomt met de naam die u gebruikt hebt om uw React-component globaal bloot te leggen. Dus, in de bovenstaande voorbeelden, als je een react component had met de naam “HelloWorld”, zou je het registreren met de volgende regels:

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

  uw component op deze manier blootstellen is hoe React on Rails in staat is om uw component te refereren vanuit een Rails-weergave. U kunt zo veel componenten bloot als je wilt, zolang hun namen niet botsen. Zie hieronder voor meer informatie over hoe u uw componenten blootstelt via de react_on_rails webpack configuratie. U kunt ReactOnRails.register vele malen aanroepen.

• @some_props kan een hash-of JSON-tekenreeks zijn. Dit is een optioneel argument dat ervan uitgaat dat u geen opties hoeft door te geven (als u opties wilt doorgeven, zoals prerender: true, maar u wilt geen eigenschappen doorgeven, geef dan gewoon een lege hash {}). Dit maakt de gegevens beschikbaar in uw component:

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

• Dit is wat uw HelloWorld.js-bestand kan bevatten. De railsContext is altijd beschikbaar voor alle parameters die u altijd beschikbaar wilt hebben voor uw React-componenten. Het heeft niets te maken met het concept van de React Context. Zie Render-functies en de RailsContext voor meer details over dit onderwerp.

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

zie de View Helpers API voor meer informatie over react_component en zijn broer/zus functie react_component_hash.

globaal uw React componenten blootstellen

voor de React on Rails view helper react_component om uw react componenten te gebruiken, moet u ze registreren in uw JavaScript-code.

gebruik modules zoals u zou doen bij het gebruik van Webpack en reageer zonder Rails. Het verschil is dat in plaats van React components direct op een element te monteren met React.render, u uw componenten registreert voor ReactOnRails en ze vervolgens monteert met helpers binnen uw Rails weergaven.

zo kunt u een component blootstellen aan de react_component view helper.

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

verschillende Rendercode aan de serverzijde (en een Serverspecifieke bundel)

mogelijk wilt u een andere code voor uw server-gerenderde componenten waarop de serverzijde wordt uitgevoerd versus de clientzijde. Als u bijvoorbeeld een animatie hebt die wordt uitgevoerd wanneer een component wordt weergegeven, moet u deze mogelijk uitschakelen wanneer de server wordt gerenderd. Een manier om hiermee om te gaan is conditionele code zoals if (window) { doClientOnlyCode() }.

een andere manier is om een apart webpack configuratiebestand te gebruiken dat een ander serverbestand kan gebruiken, zoals ‘serverRegistration’.js ‘in tegenstelling tot’ clientregistratie.js.’Dat zou het opzetten van een andere code voor server rendering.

voor details over technieken om verschillende code te gebruiken voor client en server rendering, zie: Hoe verschillende versies van een bestand te gebruiken voor client en server rendering. (Vereist het aanmaken van een GRATIS account.)

het specificeren van uw React componenten: registreer direct of gebruik render-functies

u hebt twee manieren om uw react componenten op te geven. U kunt de React component (functie of klasse component) direct registreren, of u kunt een functie maken die een React component retourneert, die we gebruiken de naam van een “render-functie”. Het maken van een render-functie maakt het mogelijk:

1. u toegang hebt tot de railsContext. Zie documentatie voor de rail context in termen van waarom je het nodig zou kunnen hebben. U hebt een Render-functie nodig om toegang te krijgen tot de railsContext.
2. u kunt de doorgegeven props gebruiken om een redux-opslag te initialiseren of react-router in te stellen.
3. u kunt verschillende componenten retourneren afhankelijk van wat er in de props zit.

opmerking: de retourwaarde van een Render-functie moet ofwel een React-functie of een klasse-Component zijn, ofwel een object dat de resultaten van het renderen van de server vertegenwoordigt.

geef geen React Element (JSX) terug.

ReactOnRails detecteren automatisch een geregistreerde Render-functie door het feit dat de functie meer dan 1 parameter neemt. Met andere woorden, als je de mogelijkheid wilt om een functie te leveren die de component retourneert, dan moet je op zijn minst een tweede parameter opgeven. Dit is de railsContext.Als u deze parameter niet gebruikt, declareert u uw functie met de ongebruikte 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>; }}

Er is dus geen verschil tussen het registreren van een React Function Component of class Component versus een “Render-functie.”Call gewoon ReactOnRails.register.

react_component_hash voor Render-functies

een andere reden om een Render-functie te gebruiken is dat je soms in server rendering, specifiek met React Router, het resultaat van het aanroepen van ReactDOMServer moet retourneren.renderToString (element). U kunt dit doen door een object met de volgende vorm te retourneren: { renderedHtml, redirectLocation, error }. Zorg ervoor dat u deze functie gebruikt met react_component_hash.

voor serverweergave, als u meerdere HTML-tekenreeksen van een Render-functie wilt retourneren, kunt u een Object van uw Render-functie retourneren met een enkele top-level eigenschap van renderedHtml. Plaats in dit Object een sleutel genaamd componentHtml, samen met alle andere benodigde sleutels. Een voorbeeld scenario van dit is wanneer u gebruik maakt van bijwerkingen bibliotheken zoals React helm. Uw Ruby-code krijgt dit Object als een Hash met sleutels componentHtml en alle andere aangepaste sleutels die u hebt toegevoegd:

{ renderedHtml: { componentHtml, customKey1, customKey2} }

voor meer informatie over het gebruik van react_component_hash met react-helmet, zie onze react-helmet documentatie.

foutafhandeling

• alle fouten van ReactOnRails zullen van het type ReactOnRails:: Error zijn.
• Prerendering (Server rendering) fouten krijgen context informatie voor HoneyBadger en Sentry voor eenvoudiger debuggen.

I18n

React on Rails biedt een optie voor automatische conversie van Rails *.yml lokale bestanden naar *.json of `.js.Zie de How to add I18n voor een samenvatting van het toevoegen van I18n.

meer Details

Blader door de links in de samenvatting inhoudsopgave

Hier zijn enkele zeer aanbevolen volgende artikelen om te lezen:

1. Hoe werkt React on Rails
2. Webpack configuratie
3. View Helpers API
4. Caching and Performance: React on Rails Pro.
5. implementatie.

ondersteuning

Klik om deel te nemen aan React + Rails Slack.

Community Resources

klik om je aan te melden om in contact te blijven met Justin Gordon en ShakaCode. Ik ben van plan om aankondigingen van nieuwe releases van React on Rails en van onze nieuwste blog artikelen en tutorials te sturen.

• Slack Room: neem Contact met ons op voor een uitnodiging voor de Shakacode Slack room! Laat het ons weten als je wilt bijdragen.
• forum.shakacode.com: Post uw vragen
• @railsonmaui op Twitter
• voor een live, open source, voorbeeld van dit juweeltje, zie www.reactrails.com.
• zie projecten die gebruik maken van en KUDOS voor React on Rails. Gelieve de jouwe in te dienen! Bewerk ofwel pagina of e-mail ons en we zullen uw informatie toe te voegen. We houden ook van sterren omdat het ons helpt nieuwe gebruikers en bijdragers aan te trekken.
• zie NEWS.md voor meer notities na verloop van tijd.

bijdragende

bugrapporten en pull-verzoeken zijn welkom. Zie bijdragen aan de slag, en de lijst met hulp gezochte problemen.

react on Rails Pro

Ondersteuning voor de ontwikkeling van React on Rails Pro door een GitHub sponsor te worden en deze voordelen te krijgen.

React on Rails Pro bevat node server rendering, fragment caching, code-splitsen, en andere prestatieverbeteringen voor React on Rails. Voor een casestudy, zie het artikel hvmn ‘ s 90% vermindering van de Server responstijd van React on Rails Pro. De Wiki bevat meer details.

Het supportplan React on Rails Pro kan helpen!

• Optimaliseer uw Webpack setup naar de nieuwste Webpack voor React on Rails inclusief code splitsen met loadable-componenten.
• uw app upgraden om de huidige rails/webpacker setup te gebruiken die de Sprockets asset pipeline overslaat.
• betere prestaties client en server kant.
• beste praktijken gebaseerd op meer dan 6 jaar ervaring met React on Rails bij veel productieprojecten.
• gebruik van Rede met (of zonder) reageer op Rails.

ShakaCode kan u ook helpen met uw aangepaste softwareontwikkelingsbehoeften. Wij zijn gespecialiseerd in de markt en e-commerce toepassingen die gebruik maken van zowel Rails en reageren. Omdat we bezitten HiChee.com, we kunnen gebruik maken van die code voor uw app!

e-mail Justin Gordon [email protected], de onderhouder van React on Rails, voor meer informatie.

Pro: Fragment Caching

Fragment caching is een functie voor React on Rails Pro. Fragment caching is een enorme prestatie booster voor uw apps. Gebruik de cached_react_component en cached_react_component_hash. De API is hetzelfde als react_component en react_component_hash, maar voor 2 verschillen:

1. De cache_key neemt dezelfde parameters als elke Rails cache view helper.
2. de props worden doorgegeven via een blok zodat de evaluatie van de props niet wordt gedaan tenzij de cache is gebroken. Stel dat u uw props berekening in een methode genaamd some_slow_method_that_returns_props:

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

zo ‘ n fragment caching bespaart CPU werk voor uw webserver en vermindert de aanvraag tijd. Het slaat de evaluatiekosten van:

1. databaseaanroepen volledig over om de props te berekenen.
2. serialisatie de props waarden hash in een JSON string voor het evalueren van JavaScript naar server render.
3. kosten geassocieerd met het evalueren van JavaScript van uw Ruby code.
4. het maken van de html-string die de props en de server-gerenderde JavaScript-code bevat.

opmerking, zelfs zonder server rendering (zonder Stap 3 hierboven), fragment caching is nog steeds effectief.

Pro: integratie met Node.js voor Server Rendering

standaard server rendering wordt gedaan door ExecJS. Als u een knooppunt wilt gebruiken.js server voor beter presterende Server rendering, e-mail [email protected]. ShakaCode heeft een premium node rendering server die deel uitmaakt van React on Rails Pro gebouwd.

Testimonials for ShakaCode

Hvmn Testimonial, by Paul Benigeri, October 12, 2018

de prijs die we betaalden voor de consultatie + de react on Rails pro-licentie is al een paar keer terugverdiend uit alleen hostingkosten. Het hele proces was super handen af, en ons core team was in staat om zich te concentreren op het verzenden van nieuwe functie tijdens die sprint.

Resortpass Testimonial, door Leora Juster, 10 December 2018

Justin en zijn team hebben ons geholpen bij het leggen van de fundamenten en standaarden voor onze transitie naar een react on rails applicatie. Slechts drie maanden werk met het team van Shaka code en we hebben een hoofdpagina van onze applicatie server-side rendering op exponentieel verbeterde snelheden.

van Joel Hooks, medeoprichter, Chief Nerd at egghead.io donderdag, januari 30, 2017:

voor meer getuigenissen, zie Live projecten en Kudos.

Supporters

De volgende bedrijven ondersteunen dit open source project, en ShakaCode gebruikt hun producten! Justin schrijft React on Rails op RubyMine. We gebruiken Scout om de live performance van HiChee.com, Rails AutoScale om de dynos van HiChee te schalen, BrowserStack om problemen met oddball browsers op te lossen.

clubhuis

Ik heb zojuist shakacode ‘ s ontwikkeling verplaatst naar clubhouse van Trello. We gaan dit doen met al onze projecten. Als u wilt proberen ClubHouse en krijg 2 maanden gratis na de 14-daagse proefperiode, Klik hier om shakacode ‘ s referral code te gebruiken. We nemen deel aan hun geweldige Triple-sided referral programma, waarover je hier kunt lezen. Door gebruik te maken van onze referral code ondersteunt u ShakaCode en reageert u dus op Rails!

Als u React on Rails wilt ondersteunen en uw bedrijf hier vermeld wilt hebben, neem dan contact op.Aloha en de beste wensen van Justin en het shakacode team!

werk met ons