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

News

October 14, 2020: RUBY ROGUESRR 474: reacționează pe șine V12-nu radeți acel IAC! cu Justin Gordon.

1 octombrie 2020: consultați exemplul spec/dummy repo pentru o configurație simplă a webpack prin intermediul rails/webpacker gemcare acceptă SSR.

2 August 2020: vedeți exemplul repo al tutorialului React on Rails cu SSR, HMR fast refresh și TypeScript pentru o nouă modalitate de configurare a creării pachetului SSR curails/webpacker.8 iulie 2020: lansarea v12 a React on Rails.

îmbunătățiri majore

1. React cârlige suport pentru componente de nivel superior
2. legături Typescript
3. șine / webpacker „doar funcționează” cu React pe șine în mod implicit.
4. suport i18n pentru generarea unui fișier JSON, mai degrabă decât un fișier JS.

asigurați – vă că pentru a vedea CHANGELOG.md și citiți instrucțiunile de actualizare: documente / Noțiuni de bază / modernizare-react-on-rails.

• vedeți discuția RailsConf a lui Justin: Webpacker, it-Just-Works, dar cum?.
• sunteți interesat de suport pentru React on Rails? Doriți să utilizați nod.js pentru a face randare server-side astfel biblioteci, cum ar fi emoție și Componente încărcabile doar de lucru, în comparație cu redare prin Ruby embedded JS? Dacă da, verificați React on Rails Pro.
• HMR lucrează cu componente încărcabile pentru o experiență uimitoare de dezvoltator de reîncărcare la cald și o performanță excelentă în timpul rulării. Vă rugăm să mi e-mail dacă doriți să utilizați codul componente încărcabile divizare pentru a accelera aplicația prin reducerea dimensiunilor dvs. pachet și alene de încărcare codul care este necesar.

despre

React on Rails integrează șine cu (redare server de) Facebook React front-end cadru.

Acest proiect este întreținut de firma de consultanță software ShakaCode. Ne concentrăm pe Ruby on Rails aplicații cu React front-end, de multe ori folosind TypeScript sau ReasonML. De asemenea, construim site-uri Gatsby. A se vedea munca noastră recentă pentru exemple de ceea ce facem.interesat în optimizarea configurare webpack pentru React on Rails, inclusiv codesplitting cu react-router, și încărcabile-componente cu randare server-side?Tocmai am făcut acest lucru pentru Popmenu, scăzând costurile Heroku cu 20-25%, obținând în același timp o scădere cu 73% a timpilor medii de răspuns.

Simțiți-vă liber pentru a contacta Justin Gordon, [email protected], întreținător al React on Rails, pentru mai multe informații.

Faceți clic pentru a vă alătura React + Rails Slack.

obiectivul proiectului

pentru a oferi un cadru de înaltă performanță pentru integrarea Ruby on Rails cu React prin intermediul gem Webpacker în special în ceea ce privește React randare Server-Side pentru o mai bună SEO și performanță îmbunătățită.

caracteristici și de ce reacționează pe șine?

având în vedere cărails/webpacker gem oferă deja integrarea react de bază, de ce ai folosi „React on Rails”?

1. trecerea ușoară a recuzitelor direct din vizualizarea Rails către componentele React, mai degrabă decât încărcarea Rails view și apoi faceți o solicitare separată către API.
2. integrare strânsă cu șine / webpacker.
3. randare Server-Side (SSR), adesea folosit pentru SEO crawler indexare și performanță UX, nu este oferit derails/webpacker.
4. Redux și React Router integrare cu server-side-randare.
5. internaționalizare (I18n) și (localizare)
6. o comunitate de susținere. Această căutare web arată modul în care site-urile publice live utilizează React on Rails.
7. motiv ML suport.

vezi Rails / Webpacker reacționează Opțiuni de integrare pentru comparații cu alte pietre.

vezi react-webpack-rails-tutorial pentru un exemplu de implementare live și cod.

ShakaCode Forum Premium Content

necesită crearea unui cont gratuit.

• cum se utilizează diferite versiuni ale unui fișier pentru randarea clientului și serverului
• cum se redă condiționat partea de server pe baza tipului de dispozitiv

documente

luați în considerare navigarea pe acest site web.

premise

Ruby pe șine> =5 și șine/webpacker 4.2+.

Noțiuni de bază

Notă, cel mai bun mod de a înțelege cum să utilizați ReactOnRails este de a studia câteva exemple simple. Puteți face o configurare demo rapidă, fie pe aplicația existentă sau pe o nouă aplicație Rails.

1. Faceți tutorialul rapid.
2. adăugați React on Rails la o aplicație Rails existentă conform instrucțiunilor.
3. Uită-te la spec/dummy, un simplu, nici un exemplu DB.
4. Uită-te la github.com/shakacode/react-webpack-rails-tutorial; este un exemplu full-featured live la www.reactrails.com.

instalare de bază

consultați și instrucțiunile pentru instalarea într-o aplicație Rails existentă.

1. adăugațireact_on_rails gem la Gemfile:

   bundle add react_on_rails --strict

2. comiteți acest lucru la git (altfel nu puteți rula generatorul decât dacă treceți opțiunea --ignore-warnings).

3. rulați generatorul:

   rails generate react_on_rails:install

4. porniți aplicația:

   rails s

5. vizitați http://localhost:3000/hello_world.

activarea randării serverului

cu codul de la rularea generatorului React on Rails de mai sus:

1. Editațiapp/views/hello_world/index.html.erb și setațiprerender latrue.
2. reîmprospătați pagina.

mai jos este linia în care porniți randarea serverului prin setarea prerender la true:

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

Notă, Dacă aveți o eroare în consola dvs. cu privire la „ReferenceError: window is not defined”,atunci trebuie să editați config/webpacker.yml și setați hmr: false și inline: false.A se vedea șine/WEBPACKER PR 2644 pentru un fix pentru thisissue.

utilizare de bază

configurare

• configurareconfig/initializers/react_on_rails.rb. Puteți ajusta unele setări și valori implicite necesare. Consultați documente de fișiere / Noțiuni de bază / configuration.md pentru documentarea tuturor opțiunilor de configurare.
• configureazăconfig/webpacker.yml. Dacă ați utilizat generatorul și configurarea implicită webpacker, nu trebuie să atingeți acest fișier. Dacă personalizați configurarea, consultați spec/dummy/config/webpacker.exemplu yml sau webpacker Oficial implicit.yml.
  • Tip: setați compile: false pentru Dezvoltare dacă știți că veți fi întotdeauna compilarea cu un proces de ceas. În caz contrar, fiecare solicitare va verifica dacă este necesară compilarea.
  • public_output_path trebuie să corespundă configurației Webpack personalizate pentruoutput a pachetelor dvs.
  • numai setațicache_manifest latrue în env de producție.

inclusiv componenta React pe șine vizualizările

• componenta React sunt redate prin intermediul vizualizărilor Rails. Iată un eșantion ERB:

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

• randare Server-Side: componenta react este mai întâi randat în HTML pe server. Utilizați opțiunea prerender:

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

• parametrulcomponent_name este un șir care se potrivește cu numele pe care l-ați folosit pentru a expune componenta React la nivel global. Deci, în exemplele de mai sus, dacă ați avea o componentă React numită „HelloWorld” , ați înregistra-o cu următoarele rânduri:

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

  expunerea componentei dvs. în acest fel este modul în care React on Rails este capabil să facă referire la componenta dvs. dintr-o vizualizare a șinelor. Puteți expune cât mai multe componente doriți, atâta timp cât numele lor nu se ciocnesc. Vedeți mai jos detaliile despre modul în care vă expuneți componentele prin intermediul configurației webpack react_on_rails. Puteți apela ReactOnRails.register de multe ori.

• @some_props poate fi un șir hash sau JSON. Acesta este un argument opțional presupunând că nu aveți nevoie pentru a trece orice opțiuni (dacă doriți să treacă opțiuni, cum ar fi prerender: true, dar nu doriți să treacă orice proprietăți, pur și simplu trece un hash gol {}). Acest lucru va face datele disponibile în componenta:

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

• aceasta este ceea ce HelloWorld ta.fișier js ar putea conține. RailsContext este întotdeauna disponibil pentru orice parametri pe care doriți întotdeauna disponibile pentru componentele React. Nu are nimic de-a face cu conceptul de context React. A se vedea render-funcții și RailsContext pentru mai multe detalii cu privire la acest subiect.

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

consultați API-ul View Helpers pentru mai multe detalii desprereact_component și funcția sa de fratereact_component_hash.

expunerea globală a componentelor React

pentru react on Rails view helperreact_component pentru a utiliza componentele React, va trebui să le înregistrați în codul JavaScript.

utilizați module la fel cum ați face atunci când utilizați Webpack și reacționați fără șine. Diferența este că, în loc să montați componentele React direct la un element folosind React.render, vă înregistrați Componentele la ReactOnRails și apoi le montați cu ajutoare în interiorul vizualizărilor șinelor.

acesta este modul de expunere a unei componente lareact_component view helper.

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

alt cod de randare pe partea de Server (și un pachet specific serverului)

poate doriți un cod diferit pentru componentele randate de server care rulează pe partea de server versus partea de client. De exemplu, dacă aveți o animație care rulează atunci când este afișată o componentă, poate fi necesar să o dezactivați atunci când randarea serverului. O modalitate de a gestiona acest lucru este codul condițional ca if (window) { doClientOnlyCode() }.

o altă modalitate este de a utiliza un fișier de configurare webpack separat, care poate utiliza un alt fișier de intrare pe partea de server, cum ar fi ‘serverRegistration.js ‘spre deosebire de’ clientRegistration.js.’Asta ar configura un cod diferit pentru redarea serverului.

Pentru detalii despre tehnicile de utilizare a codului diferit pentru randarea clientului și serverului, consultați: Cum se utilizează diferite versiuni ale unui fișier pentru randarea clientului și serverului. (Necesită crearea unui cont gratuit.)

specificarea componentelor React: înregistrați-vă direct sau utilizați funcțiile render

aveți două moduri de a specifica componentele React. Puteți înregistra fie componenta React (fie Funcția sau componenta de clasă) direct, sau puteți crea o funcție care returnează o componentă React, pe care am folosind numele unui „render-funcție”. Crearea unei funcții de randare permite:

1. să aveți acces larailsContext. Consultați documentația pentru railsContext în ceea ce privește motivul pentru care ați putea avea nevoie de ea. Aveți nevoie de o funcție de randare pentru a accesa railsContext.
2. puteți utiliza recuzita trecută pentru a inițializa un magazin redux sau pentru a configura react-router.
3. puteți returna diferite componente în funcție de ceea ce este în recuzită.

notă, valoarea returnată a unei funcții de randare ar trebui să fie fie o funcție React sau o componentă de clasă, fie un obiect care reprezintă rezultatele randării serverului.

nu returnați un element React (JSX).ReactOnRails va detecta automat o funcție de randare înregistrată prin faptul că funcția are mai mult de 1 parametru. Cu alte cuvinte, dacă doriți capacitatea de a furniza o funcție care revine acolocomponenta act, atunci trebuie să specificați cel puțin un al doilea parametru. Acesta este railsContext.Dacă nu utilizați acest parametru, declarați funcția cu param neutilizat:

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

astfel, nu există nicio diferență între înregistrarea unei componente React Function sau a unei componente class versus o „Render-Function.”Doar apelați ReactOnRails.register.

react_component_hash pentru funcțiile de randare

Un alt motiv pentru a utiliza o funcție de randare este că uneori în randarea serverului, în special cu React Router, trebuie să returnați rezultatul apelării ReactDOMServer.renderToString (element). Puteți face acest lucru returnând un obiect cu următoarea formă: { renderedHtml, redirectLocation, error }. Asigurați-vă că utilizați această funcție cu react_component_hash.

pentru randarea serverului, dacă doriți să returnați mai multe șiruri HTML dintr-o funcție de randare, puteți returna un obiect din funcția de randare cu o singură proprietate de nivel superior de renderedHtml. În interiorul acestui obiect, plasați o cheie numită componentHtml, împreună cu orice alte chei necesare. Un exemplu de scenariu în acest sens este atunci când utilizați biblioteci de efecte secundare precum React Helmet. Ruby va primi acest obiect ca un Hash care conține chei componentHtml și orice alte chei personalizate pe care le-ați adăugat:

{ renderedHtml: { componentHtml, customKey1, customKey2} }

Pentru detalii despre utilizarea react_component_hash cu react-cască, consultați documentația react-cască.

manipularea erorilor

• toate erorile din ReactOnRails vor fi de tip ReactOnRails::eroare.
• Prerendering (Server rendering) erori obține informații context pentru HoneyBadger și Sentry pentru depanare mai ușoară.

I18n

React on Rails oferă o opțiune pentru conversii automate de șine*.yml fișiere locale în*.json sau `.js.Vedeți cum se adaugă I18n pentru un rezumat al adăugării I18n.

mai multe detalii

răsfoiți linkurile din Rezumatul cuprins

iată câteva articole foarte recomandate pentru a citi următoarele:

1. cum reacționează pe șine funcționează
2. configurare Webpack
3. vizualizare Helpers API
4. Caching și performanță: React on Rails Pro.
5. implementare.

suport

Faceți clic pentru a vă alătura React + Rails Slack.

resurse comunitare

vă rugăm să faceți clic pentru a vă abona pentru a păstra legătura cu Justin Gordon și ShakaCode. Intenționez să trimit anunțuri despre noile versiuni ale React on Rails și despre cele mai recente articole și tutoriale de pe blog.

• Slack Room: contactați-ne pentru o invitație la Shakacode Slack room! Spuneți-ne dacă doriți să contribuiți.
• forum.shakacode.com: postați întrebările dumneavoastră
• @ railsonmaui pe Twitter
• pentru un live, open source, exemplu de această bijuterie, a se vedea www.reactrails.com.
• vezi proiecte folosind și KUDOS pentru React on Rails. Vă rugăm să trimiteți a ta! Vă rugăm să editați pagina sau să ne trimiteți un e-mail și vom adăuga informațiile dvs. De asemenea, iubim stelele, deoarece ne ajută să atragem noi Utilizatori și colaboratori.
• vezi NEWS.md pentru mai multe note în timp.

Contribuirea

rapoartele de erori și solicitările de tragere sunt binevenite. Consultați contribuția pentru a începe și lista problemelor de ajutor dorite.

React on Rails Pro

suport React on Rails Pro dezvoltare de a deveni un sponsor Github și a obține aceste beneficii.

React on Rails Pro include redare Server nod, cache fragment, Cod-divizare, și alte îmbunătățiri de performanță pentru React on Rails. Pentru un studiu de caz, consultați articolul reducerea cu 90% a timpului de răspuns al serverului de la React on Rails Pro. Wiki conține mai multe detalii.

planul de asistență React on Rails Pro vă poate ajuta!

• optimizarea setup-ul webpack la cele mai recente Webpack pentru React on Rails, inclusiv Cod de divizare cu incarcabil-componente.
• actualizarea aplicației pentru a utiliza curentrails/webpacker configurare care omite conducta de active pinioane.
• client de performanță mai bună și partea de server.
• cele mai bune practici bazate pe Peste 6 ani de experiență React on Rails pe multe proiecte de producție.
• folosind rațiunea cu (sau fără) reacționează pe șine.

ShakaCode vă poate ajuta, de asemenea, cu nevoile dvs. personalizate de dezvoltare de software. Suntem specializați în aplicații de piață și comerț electronic care utilizează atât Rails, cât și React. Pentru că noi deținem HiChee.com, putem folosi acel cod pentru aplicația ta!

vă rugăm să e-mail Justin Gordon [email protected], întreținătorul React on Rails, pentru mai multe informații.

Pro: Fragment Caching

Fragment caching este o React on Rails caracteristică Pro. Fragment caching este un rapel de performanță imens pentru aplicațiile. Utilizați cached_react_component și cached_react_component_hash. API-ul este la fel ca react_component și react_component_hash, dar pentru 2 diferențe:

1. cache_key ia aceiași parametri ca orice șine cache view helper.
2. recuzita sunt transmise printr-un bloc, astfel încât evaluarea recuzita nu se face decât dacă memoria cache este rupt. Să presupunem că ați pus calculul recuzită într-o metodă numită some_slow_method_that_returns_props:

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

o astfel de cache fragment salvează munca CPU pentru serverul web și reduce foarte mult timpul de solicitare. Acesta omite complet costurile de evaluare a:

1. apeluri de baze de date pentru a calcula recuzita.
2. serializare props valori hash într-un șir JSON pentru evaluarea JavaScript pentru server render.
3. costurile asociate cu evaluarea JavaScript din Codul Ruby.
4. crearea șirului HTML care conține recuzita și codul JavaScript randat de server.

notă, chiar și fără randarea serverului (fără Pasul 3 de mai sus), cache-ul fragmentelor este încă eficient.

Pro: integrarea cu Nodul.js pentru redarea serverului

redarea implicită a serverului se face de ExecJS. Dacă doriți să utilizați un nod.JS server pentru o mai bună performanță De redare server, e-mail [email protected]. ShakaCode a construit un server de randare nod premium, care face parte din React on Rails Pro.

mărturii pentru ShakaCode

mărturie HVMN, de Paul Benigeri, 12 octombrie 2018

prețul pe care l-am plătit pentru consultare + licența React on Rails pro a fost deja returnată de câteva ori doar din taxele de găzduire. Întregul proces a fost super hands off, iar echipa noastră de bază a reușit să se concentreze pe livrarea unei noi funcții în timpul acelui sprint.

Testimonial ResortPass, de Leora Juster, decembrie 10, 2018

Justin și echipa sa au avut un rol esențial în asistarea ne în stabilirea fundațiilor de proiectare și standarde pentru tranziția noastră la o react on rails cerere. Doar trei luni de lucru cu echipa de la Shaka code și avem o pagină principală a randării noastre pe partea serverului de aplicații la viteze îmbunătățite exponențial.

de la Joel Hooks, Co-fondator, șef tocilar la egghead.io, 30 ianuarie 2017:

pentru mai multe marturii, a se vedea proiecte Live și Kudos.

suporteri

următoarele companii susțin acest proiect open source, iar ShakaCode își folosește produsele! Justin scrie React on Rails pe RubyMine. Folosim Scout pentru a monitoriza performanța live a HiChee.com, Rails AutoScale pentru a scala dynos de HiChee, BrowserStack pentru a rezolva problemele cu browserele oddball.

clubhouse

tocmai am mutat dezvoltarea shakacode la clubhouse de la Trello. Vom face asta cu toate proiectele noastre. Dacă doriți să încercați ClubHouse și să obțineți 2 luni gratuite dincolo de perioada de încercare de 14 zile, faceți clic aici pentru a utiliza codul de recomandare al ShakaCode. Participăm la programul lor minunat de recomandare triplă, despre care puteți citi aici. Folosind codul nostru de recomandare, veți sprijini ShakaCode și, astfel, veți reacționa pe șine!

Dacă doriți să sprijiniți React on Rails și să aveți compania listată aici, luați legătura.

Aloha și cele mai bune urări de la Justin și echipa ShakaCode!

lucrează cu noi