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

News

October 14, 2020: RUBY ROGUESRR 474: Reager på skinner V12 – barber ikke den Yak! med Justin Gordon.

1. oktober 2020: se spec / dummy eksempel repo for en simpel konfiguration af netpakke via Rails / netkaprer gemder understøtter SSR.

2. August 2020: se eksemplet repo af React on Rails Tutorial med SSR, HMR fast refresh og TypeScript for en ny måde at opsætte oprettelsen af dit SSR-bundt med rails/webpacker.

8. juli 2020: frigivelse v12 af React on Rails.

større forbedringer

1. React Hooks understøtter komponenter på øverste niveau
2. Typescript bindinger
3. rails / netkaprer “fungerer bare” med React on Rails som standard.
4. i18n støtte til at generere en JSON-fil i stedet for en JS-fil.

sørg for at se CHANGELOG.md og læs opgraderingsinstruktionerne: docs / basics / opgradering-react-on-rails.

• se Justin ‘ s RailsConf talk: Det virker bare, men hvordan?.
• Er du interesseret i støtte til React on Rails? Vil du bruge Node.js at gøre din server-side rendering så biblioteker som følelser og belastbare komponenter bare arbejde, i forhold til rendering via Ruby embedded JS? Hvis så tjek React on Rails Pro.
• HMR arbejder med belastbare komponenter til en både fantastisk hot-reloading Udvikler oplevelse og stor runtime ydeevne. Send mig en e-mail, hvis du vil bruge Indlæselig Komponentkodeopdeling for at fremskynde din app ved at reducere dine bundtstørrelser og dovent indlæse den kode, der er nødvendig.

om

React on Rails integrerer Rails med (server rendering af) Facebook ‘ s React front-end ramme.

dette projekt vedligeholdes af konsulentfirmaet ShakaCode. Vi fokuserer på Ruby on Rails applikationer med React front-ends, ofte ved hjælp af TypeScript eller ReasonML. Vi bygger også Gatsby-sider. Se vores seneste arbejde for eksempler på, hvad vi gør.er du interesseret i at optimere din pakkeopsætning til React on Rails,herunder codesplitting med react-router og loadable-komponenter med server-side rendering?Vi har lige gjort dette for Popmenu, sænke Heroku omkostninger 20-25% samtidig få en 73% fald i gennemsnitlige responstider.

du er velkommen til at kontakte Justin Gordon, [email protected], vedligeholder af React on Rails, for mere information.

Klik for at deltage i React + Rails Slack.

projektmål

at give en højtydende ramme til integration af Ruby on Rails med React via react gem, især med hensyn til React server-side Rendering for bedre SEO og forbedret ydeevne.

funktioner og hvorfor reagere på skinner?

darails/webpacker gem allerede giver grundlæggende React integration, hvorfor ville du bruge “React on Rails”?

1. nem overførsel af rekvisitter direkte fra din Rails-visning til dine React-komponenter i stedet for at få dine Rails-visningsbelastning og derefter foretage en separat anmodning til din API.tæt integration med rails.
2. server-side Rendering (SSR), der ofte bruges til SEO-indeksering og ydeevne, tilbydes ikke afrails/webpacker.React Router integration med server-side-rendering.
3. internationalisering (I18n) og (lokalisering)
4. et støttende samfund. Denne internetsøgning viser, hvordan live offentlige sider bruger React on Rails.
5. årsag ML støtte.

se Rails / React integrationsmuligheder for sammenligninger med andre perler.

se react-rails-tutorial for et eksempel på en live implementering og kode.

ShakaCode Forum Premium Content

kræver oprettelse af en gratis konto.

• Sådan bruges forskellige versioner af en fil til klient-og servergengivelse
• Sådan gøres serversiden betinget baseret på enhedstypen

Docs

overvej at gennemse dette på vores hjemmeside.

forudsætninger

Ruby on Rails >=5 og rails / netspiller 4.2+.

Kom godt i gang

bemærk, den bedste måde at forstå, hvordan man bruger ReactOnRails, er at studere et par enkle eksempler. Du kan gøre en hurtig demo setup, enten på din eksisterende app eller på en ny Rails app.

1. gør den hurtige tutorial.
2. Tilføj React on Rails til en eksisterende Rails-app i henhold til instruktionerne.
3. se på spec / dummy, et simpelt, ingen DB eksempel.
4. se på github.com/shakacode/react-webpack-rails-tutorial; det er et fuldt udstyret eksempel live på www.reactrails.com.

grundlæggende Installation

Se også instruktionerne til installation i en eksisterende Rails-app.

1. Tilføj react_on_rails gem til Gemfile:

   bundle add react_on_rails --strict

2. Forpligt dette til git (ellers kan du ikke køre generatoren, medmindre du passerer indstillingen--ignore-warnings).

3. Kør generatoren:

   rails generate react_on_rails:install

4. Start appen:

   rails s

5. besøghttp://localhost:3000/hello_world.

aktivering af servergengivelse

med koden fra at køre React on Rails-generatoren ovenfor:

1. Redigerapp/views/hello_world/index.html.erb og sætprerender tiltrue.
2. Opdater siden.

nedenfor er linjen, hvor du tænder servergengivelse ved at indstille prerender til true:

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

Bemærk,Hvis du fik en fejl i din konsol vedrørende “ReferenceError: vinduet er ikke defineret”, skal du redigere config/webpacker.yml og sæt hmr: false og inline: false.Se rails PR 2644 for en rettelse til dette problem.

grundlæggende brug

konfiguration

• Konfigurerconfig/initializers/react_on_rails.rb. Du kan justere nogle nødvendige indstillinger og standardindstillinger. Se file docs / basics / configuration.md for dokumentation af alle konfigurationsindstillinger.
• Konfigurer config/webpacker.yml. Hvis du har brugt generatoren og standardopsætningen, behøver du ikke at røre ved denne fil. Hvis du tilpasser din opsætning, skal du kontakte spec/dummy/config/netpackeren.yml eksempel eller den officielle standard internetpacker.yml.
  • Tip: Indstil compile: false til udvikling, hvis du ved, at du altid vil kompilere med en urproces. Ellers vil hver anmodning kontrollere, om kompilering er nødvendig.
  • dinpublic_output_path skal matche din brugerdefinerede Pakkekonfiguration foroutput af dine bundter.
  • sæt kun cache_manifest til true i din produktion env.

inklusive din React-komponent på dine Rails-visninger

• React-komponent gengives via dine Rails-visninger. Her er en ERB-prøve:

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

• server-side Rendering: din react komponent gengives først i HTML på serveren. Brug indstillingen prerender:

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

• parameterencomponent_name er en streng, der matcher det navn, du brugte til at eksponere din React-komponent globalt. Så i ovenstående eksempler, hvis du havde en React-komponent med navnet “Hellorld”, ville du registrere det med følgende linjer:

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

  eksponering af din komponent på denne måde er, hvordan React on Rails er i stand til at henvise til din komponent fra en Rails-visning. Du kan udsætte så mange komponenter, som du vil, så længe deres navne ikke kolliderer. Se nedenfor for detaljer om, hvordan du udsætter dine komponenter via react_on_rails-konfigurationen. Du kan ringe ReactOnRails.register mange gange.

• @some_props kan enten være en hash-eller JSON-streng. Dette er et valgfrit argument, forudsat at du ikke behøver at videregive nogen indstillinger (hvis du vil videregive indstillinger, såsom prerender: true, men du ikke ønsker at videregive nogen egenskaber, skal du blot videregive en tom hash {}). Dette vil gøre dataene tilgængelige i din komponent:

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

• Dette er hvad din Hellorld.JS-filen kan indeholde. Railskonteksten er altid tilgængelig for alle parametre, som du altid vil have til rådighed for dine React-komponenter. Det har intet at gøre med begrebet React-sammenhæng. Se Render-funktioner og Skinnekontekst for flere detaljer om dette emne.

  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 visningen Helpers API for flere detaljer omreact_componentog dets søskendefunktionreact_component_hash.

global eksponering af dine React-komponenter

til React on Rails visningshjælperreact_component for at bruge dine React-komponenter skal du registrere dem i din JavaScript-kode.

brug moduler ligesom du ville gøre, når du bruger Netpack og reager uden skinner. Forskellen er, at i stedet for at montere React-komponenter direkte på et element ved hjælp af React.render, registrerer du dine komponenter til ReactOnRails og monterer dem derefter med hjælpere inde i dine Rails-visninger.

sådan udsættes en komponent forreact_component Vis helper.

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

forskellige server-side Rendering kode (og en Server-specifik Bundle)

Du kan have en anden kode til din server-renderet komponenter kører server side versus klient side. Hvis du f.eks. har en animation, der kører, når en komponent vises, skal du muligvis slå den fra, når serveren gengives. En måde at håndtere dette på er betinget kode som if (window) { doClientOnlyCode() }.

en anden måde er at bruge en separat pakkekonfigurationsfil, der kan bruge en anden serversideindtastningsfil, som ‘serverregistrering.js ‘i modsætning til’ klientregistrering.js.’Det ville oprette en anden kode til servergengivelse.

for detaljer om teknikker til brug af anden kode til klient-og servergengivelse, se: Sådan bruges forskellige versioner af en fil til klient-og servergengivelse. (Kræver oprettelse af en gratis konto.)

angivelse af dine React-komponenter: registrer direkte eller brug render-funktioner

du har to måder at specificere dine React-komponenter på. Du kan enten registrere React-komponenten (enten funktion eller klassekomponent) direkte, eller du kan oprette en funktion, der returnerer en React-komponent, som vi bruger navnet på en “render-funktion”. Oprettelse af en render-funktion tillader:

1. du har adgang tilrailsContext. Se dokumentation for skinnekonteksten med hensyn til, hvorfor du muligvis har brug for det. Du har brug for en Render-funktion for at få adgang til railsContext.
2. du kan bruge de medfølgende rekvisitter til at initialisere en butik eller konfigurere react-router.
3. du kan returnere forskellige komponenter afhængigt af hvad der er i rekvisitterne.

Bemærk, returværdien af en Render-funktion skal enten være en React-funktion eller Klassekomponent eller et objekt, der repræsenterer servergengivelsesresultater.

returner ikke et React-Element.

ReactOnRails registrerer automatisk en registreret Gengivelsesfunktion ved, at funktionen tager mere end 1 parameter. Med andre ord, hvis du vil have evnen til at levere en funktion, der returnerer derreakt komponent, så skal du angive mindst en anden parameter. Dette er railsContext.Hvis du ikke bruger denne parameter, skal du erklære din funktion med den ubrugte 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>; }}

Der er således ingen forskel mellem registrering af en React-Funktionskomponent eller klassekomponent versus en “Render-funktion.”Bare ring ReactOnRails.register.

react_component_hash for Render-Functions

en anden grund til at bruge en Render-funktion er, at nogle gange i server rendering, specifikt med React Router, skal du returnere resultatet af at kalde ReactDOMServer.renderToString (element). Du kan gøre dette ved at returnere et objekt med følgende figur: { renderedHtml, redirectLocation, error }. Sørg for at bruge denne funktion med react_component_hash.

for servergengivelse, hvis du ønsker at returnere flere HTML-strenge fra en Render-funktion, kan du returnere et objekt fra din Render-funktion med en enkelt Top-niveau egenskab af renderedHtml. Inde i dette objekt skal du placere en nøgle kaldet componentHtml sammen med andre nødvendige nøgler. Et eksempel på dette er, når du bruger bivirkninger biblioteker som React hjelm. Din Ruby kode vil få dette objekt som en Hash indeholder nøgler componentHtml og andre brugerdefinerede nøgler, som du har tilføjet:

{ renderedHtml: { componentHtml, customKey1, customKey2} }

for detaljer om brug af react_component_hash med react-helmet, se vores react-helmet dokumentation.

fejlhåndtering

• alle fejl fra ReactOnRails vil være af typen ReactOnRails::fejl.
• Prerendering (server rendering) fejl få kontekst information til HoneyBadger og Sentry for lettere debugging.

I18n

React on Rails giver mulighed for automatiske konverteringer af Rails*.yml locale filer til*.json eller `.js.Se Sådan tilføjes I18n for en oversigt over tilføjelse af I18n.

flere detaljer

Gennemse linkene i indholdsfortegnelsen

Her er nogle stærkt anbefalede næste artikler at læse:

1. hvordan React on Rails fungerer
2. se Helpers API
3. Caching and Performance: React on Rails Pro.
4. implementering.

Support

Klik for at deltage i React + Rails Slack.

Community Resources

klik for at abonnere for at holde kontakten med Justin Gordon og ShakaCode. Jeg har til hensigt at sende meddelelser om nye udgivelser af React on Rails og af vores seneste blogartikler og tutorials.

• Slack Room: Kontakt os for en invitation til ShakaCode Slack room! Lad os vide, hvis du ønsker at bidrage.
• forum.shakacode.com: Send dine spørgsmål
• @railsonmaui på kvidre
• for en live, open source, eksempel på denne perle, se www.reactrails.com.
• Se projekter, der bruger og KUDOS til React on Rails. Send venligst din! Rediger enten side eller email os, og vi vil tilføje dine oplysninger. Vi elsker også stjerner, da det hjælper os med at tiltrække nye brugere og bidragydere.
• se NEWS.md for flere noter over tid.

Bidrag

fejlrapporter og pull-anmodninger er velkomne. Se Bidrag til at komme i gang, og listen over ønskede problemer med hjælp.

React on Rails Pro

Support react on Rails Pro udvikling ved at blive en GitHub sponsor og få disse fordele.

React on Rails Pro omfatter node server rendering, fragment caching, kode-opdeling, og andre forbedringer af ydeevnen for React on Rails. For en casestudie, se artiklen HVMN ‘ s 90% reduktion i Server responstid fra React on Rails Pro. VKI indeholder flere detaljer.

React on Rails Pro Support Plan kan hjælpe!

• optimering af din pakkeopsætning til den nyeste pakke til React on Rails, herunder kodeopdeling med belastbare komponenter.
• opgradering af din app til at bruge den aktuelle rails/webpacker opsætning, der springer over kædehjulets aktivrørledning.
• bedre ydelse klient og server side.
• bedste praksis baseret på over 6 års React on Rails erfaring på mange produktionsprojekter.
• brug af fornuft med (eller uden) React on Rails.

ShakaCode kan også hjælpe dig med dine brugerdefinerede udviklingsbehov. Vi specialiserer os i marketplace og e-handel applikationer, der udnytter både Rails og React. Fordi vi ejer HiChee.com, vi kan udnytte den kode til din app!

venligst e-mail Justin Gordon [email protected], vedligeholderen af React on Rails, for mere information.

Pro: Fragment Caching

Fragment caching er en React on Rails Pro funktion. Fragment caching er en enorm ydeevne booster til dine apps. Brug cached_react_component og cached_react_component_hash. API ‘ en er den samme som react_component og react_component_hash, men for 2 forskelle:

1. cache_key tager de samme parametre som alle skinner cache vis hjælper.
2. rekvisitterne sendes via en blok, så evaluering af rekvisitterne ikke udføres, medmindre cachen er brudt. Antag, at du sætter din rekvisitter beregning i nogle metode kaldet 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 sparer CPU arbejde for din internetserver og i høj grad reducerer anmodningen tid. Det springer helt over evalueringsomkostningerne for:

1. Databaseopkald for at beregne rekvisitterne.
2. serialisering rekvisitterne værdier hash i en JSON streng til evaluering JavaScript til server render.
3. omkostninger forbundet med evaluering af JavaScript fra din Ruby-kode.
4. oprettelse af HTML-strengen, der indeholder rekvisitterne og den Servergengivne JavaScript-kode.

bemærk, selv uden servergengivelse (uden trin 3 ovenfor) er fragmentcaching stadig effektiv.

Pro: Integration med Node.js for Server Rendering

standard server rendering udføres af eksekverbare filer. Hvis du vil bruge en Node.js-server til bedre udførelse af servergengivelse, e-mail [email protected]. ShakaCode har bygget en premium Node rendering server, der er en del af React on Rails Pro.

Testimonials for ShakaCode

Hvmn Testimonial, af Paul Benigeri, 12.oktober 2018

den pris, vi betalte for konsultationen + React on Rails pro-licensen, er allerede foretaget et par gange fra hostinggebyrer alene. Hele processen var super hands off, og vores kerneteam var i stand til at fokusere på at sende en ny funktion under denne sprint.

Resortpass Testimonial, af Leora justere, December 10, 2018

Justin og hans team var medvirkende til at hjælpe os med at sætte designfundamenter og standarder for vores overgang til en react on rails-applikation. Bare tre måneders arbejde med teamet på Shaka code, og vi har en hovedside med vores applikationsserver-gengivelse ved eksponentielt forbedrede hastigheder.

fra Joel Hooks, medstifter, Chief Nerd på egghead.io, 30. januar 2017:

For flere udtalelser, se Live projekter og Kudos.

Supporters

følgende virksomheder understøtter dette open source-projekt, og ShakaCode bruger deres produkter! Justin skriver React on Rails på RubyMine. Vi bruger Scout til at overvåge liveoptræden af HiChee.com, skinner Autoskala at skalere dynos af HiChee, bro.Serstack at løse problemer med oddball bro. Serere.

klubhus

jeg har lige flyttet shakacodes udvikling til klubhus fra Trello. Det gør vi med alle vores projekter. Hvis du vil prøve ClubHouse og få 2 måneder Gratis ud over den 14-dages prøveperiode, skal du klikke her for at bruge Shakacodes henvisningskode. Vi deltager i deres fantastiske triple-sidet henvisningsprogram, som du kan læse om her. Ved at bruge vores henvisningskode understøtter du ShakaCode og reagerer således på skinner!

Hvis du gerne vil støtte React on Rails og få din virksomhed opført her, så kontakt os.

Aloha og Bedste ønsker fra Justin og ShakaCode holdet!

arbejde med os