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-Non raderti quello Yak! con Justin Gordon.

1 ottobre 2020: Vedere il repository spec/dummy example per una semplice configurazione del webpack tramite la gemma rails / webpacker che supporta SSR.

2 agosto 2020: Vedi l’esempio repo di React on Rails Tutorial Con SSR, HMR fast refresh e TypeScript per un nuovo modo di configurare la creazione del tuo bundle SSR con rails/webpacker.

8 luglio 2020: rilascio v12 di React on Rails.

Miglioramenti importanti

1. React Hook Supporto per componenti di primo livello
2. Binding Typescript
3. rails / webpacker “funziona solo” con React on Rails per impostazione predefinita.
4. supporto i18n per la generazione di un file JSON piuttosto che un file JS.

Assicurati di vedere il CHANGELOG.md e leggere le istruzioni di aggiornamento: docs / basics / upgrading-react-on-rails.

• Vedi il discorso di Justin RailsConf: Webpacker, funziona, ma come?.
• Sei interessato al supporto per React on Rails? Vuoi usare il Nodo.js per eseguire il rendering lato server in modo che librerie come Emotion e componenti caricabili funzionino, rispetto al rendering tramite Ruby embedded JS? Se è così controlla React on Rails Pro.
• HMR sta lavorando con componenti caricabili per una straordinaria esperienza di sviluppo di ricarica a caldo e grandi prestazioni di runtime. Prego email me se si desidera utilizzare componenti caricabili codice Splitting per accelerare la vostra applicazione, riducendo le dimensioni del fascio e pigramente caricare il codice che è necessario.

Informazioni su

React on Rails integra Rails con (rendering del server) il framework front-end React di Facebook.

Questo progetto è gestito dalla società di consulenza software ShakaCode. Ci concentriamo su applicazioni Ruby on Rails con front-end React, spesso utilizzando TypeScript o ReasonML. Costruiamo anche siti Gatsby. Vedi il nostro recente lavoro per esempi di ciò che facciamo.

Sei interessato a ottimizzare la configurazione del tuo webpack per React on Rails,incluso il codesplitting con react-router e loadable-components con rendering lato server?Abbiamo appena fatto questo per Popmenu, abbassando i costi Heroku 20-25% mentre si ottiene una diminuzione del 73% nei tempi medi di risposta.

Non esitate a contattare Justin Gordon, [email protected], manutentore di React on Rails, per maggiori informazioni.

Fare clic per unire React + Rails Slack.

Obiettivo del progetto

Fornire un framework ad alte prestazioni per l’integrazione di Ruby on Rails con React tramite la gemma Webpacker, in particolare per quanto riguarda il rendering lato server di React per una migliore SEO e prestazioni migliorate.

Caratteristiche e perché reagire su rotaie?

Dato cherails/webpacker gem fornisce già l’integrazione di base di React, perché usare “React on Rails”?

1. Facile passaggio di oggetti di scena direttamente dalla vista Rails ai componenti React piuttosto che caricare la vista Rails e quindi effettuare una richiesta separata alla propria API.
2. Stretta integrazione con rails / webpacker.
3. Il rendering lato server (SSR), spesso utilizzato per l’indicizzazione SEO crawler e le prestazioni UX, non è offerto darails/webpacker.
4. Redux e React Router integrazione con server-side-rendering.
5. Internazionalizzazione (I18n) e (localizzazione)
6. Una comunità solidale. Questa ricerca web mostra come i siti pubblici dal vivo utilizzano React on Rails.
7. Motivo Supporto ML.

Vedi le opzioni di integrazione Rails / Webpacker React per i confronti con altre gemme.

Vedi il tutorial react-webpack-rails per un esempio di implementazione e codice live.

ShakaCode Forum Premium Content

Richiede la creazione di un account gratuito.

• Come utilizzare diverse versioni di un file per il rendering client e server
• Come eseguire il rendering condizionale lato server in base al tipo di dispositivo

Docs

Considera la navigazione sul nostro sito web.

Prerequisiti

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

Guida introduttiva

Nota, il modo migliore per capire come usare ReactOnRails è studiare alcuni semplici esempi. Puoi eseguire una configurazione demo rapida, sia sulla tua app esistente che su una nuova app Rails.

1. Fai il tutorial rapido.
2. Aggiungi React on Rails a un’app Rails esistente secondo le istruzioni.
3. Guarda spec / dummy, un esempio semplice, senza DB.
4. Guarda github.com/shakacode/react-webpack-rails-tutorial; è un esempio completo live at www.reactrails.com.

Installazione di base

Vedere anche le istruzioni per l’installazione in un’app Rails esistente.

1. Aggiungi la gemmareact_on_rails al file Gem:

   bundle add react_on_rails --strict

2. Commit questo a git (altrimenti non è possibile eseguire il generatore a meno che non si passi l’opzione --ignore-warnings).

3. Eseguire il generatore:

   rails generate react_on_rails:install

4. Avviare l’applicazione:

   rails s

5. Visita http://localhost:3000/hello_world.

Attivazione del rendering del server

Con il codice da eseguire il generatore React on Rails sopra:

1. Modificaapp/views/hello_world/index.html.erb e impostaprerender sutrue.
2. Aggiorna la pagina.

di Seguito è la linea dove si gira di rendering del server impostando prerender true

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

Nota, se hai un errore nella console per quanto riguarda “ReferenceError: la finestra non definita”,quindi è necessario modificare config/webpacker.yml e impostare hmr: false e inline: false.Vedere rails / webpacker PR 2644 per una correzione per thisissue.

Utilizzo di base

Configurazione

• Configuraconfig/initializers/react_on_rails.rb. È possibile regolare alcune impostazioni e impostazioni predefinite necessarie. Vedere file docs / basics / configuration. md per la documentazione di tutte le opzioni di configurazione.
• Configura config/webpacker.yml. Se è stato utilizzato il generatore e la configurazione predefinita di webpacker, non è necessario toccare questo file. Se stai personalizzando la tua configurazione, consulta le specifiche / dummy/config / webpacker.esempio yml o il webpacker predefinito ufficiale.yml.
  • Suggerimento: imposta compile: false per lo sviluppo se sai che compilerai sempre con un processo di watch. In caso contrario, ogni richiesta controllerà se è necessaria la compilazione.
  • Il tuopublic_output_pathdeve corrispondere alla configurazione Webpack personalizzata peroutput dei tuoi bundle.
  • Imposta solo cache_manifestsutrue nel tuo env di produzione.

Incluso il componente React sulle viste Rails

• Il componente React viene reso tramite le Viste Rails. Ecco un campione ERB:

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

• Rendering lato server: il componente react viene prima reso in HTML sul server. Utilizzare l’opzione prerender:

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

• Il parametro component_name è una stringa corrispondente al nome utilizzato per esporre globalmente il componente React. Quindi, negli esempi precedenti, se avessi un componente React chiamato “HelloWorld”, lo registreresti con le seguenti righe:

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

  Esporre il componente in questo modo è come React on Rails è in grado di fare riferimento al componente da una vista Rails. Puoi esporre tutti i componenti che vuoi, purché i loro nomi non si scontrino. Vedi sotto per i dettagli su come esporre i componenti tramite la configurazione del webpack react_on_rails. Puoi chiamareReactOnRails.register molte volte.

• @some_props può essere una stringa hash o JSON. Questo è un argomento facoltativo supponendo che non sia necessario passare alcuna opzione (se si desidera passare opzioni, come prerender: true, ma non si desidera passare alcuna proprietà, è sufficiente passare un hash vuoto {}). Questo renderà i dati disponibili nel tuo componente:

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

• Questo è ciò che il tuo HelloWorld.il file js potrebbe contenere. railsContext è sempre disponibile per tutti i parametri che si desidera sempre disponibili per i componenti React. Non ha nulla a che fare con il concetto del contesto React. Vedere Render-Functions e RailsContext per maggiori dettagli su questo argomento.

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

Vedere l’API View Helpers per maggiori dettagli su react_componente la sua funzione fratello react_component_hash.

Esposizione globale dei componenti React

Per l’helper React on Rails viewreact_component per utilizzare i componenti React, è necessario registrarli nel codice JavaScript.

Usa i moduli proprio come faresti quando usi Webpack e Reagisci senza binari. La differenza è che invece di montare i componenti React direttamente su un elemento utilizzando React.render, si registrano i componenti per ReactOnRails e quindi si montano con gli helper all’interno delle viste Rails.

Ecco come esporre un componente all’helper di visualizzazionereact_component.

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

Codice di rendering lato server diverso (e un bundle specifico del server)

È possibile che sia necessario un codice diverso per i componenti renderizzati dal server che eseguono il lato server rispetto al lato client. Ad esempio, se si dispone di un’animazione che viene eseguita quando viene visualizzato un componente, potrebbe essere necessario disattivarla durante il rendering del server. Un modo per gestire questo è il codice condizionale come if (window) { doClientOnlyCode() }.

Un altro modo è quello di utilizzare un file di configurazione webpack separato che può utilizzare un file di inserimento lato server diverso, come ‘serverRegistration.js’ al contrario di ‘ clientRegistration.js.”Ciò configurerebbe un codice diverso per il rendering del server.

Per i dettagli sulle tecniche per utilizzare codice diverso per il rendering client e server, vedere: Come utilizzare diverse versioni di un file per il rendering client e server. (Richiede la creazione di un account gratuito.)

Specificare i componenti React: registrati direttamente o usa le funzioni di rendering

Hai due modi per specificare i componenti React. È possibile registrare direttamente il componente React (componente function o class) oppure creare una funzione che restituisce un componente React, che usiamo il nome di una”render-function”. La creazione di una funzione di rendering consente:

1. Di avere accesso a railsContext. Vedere la documentazione per railsContext in termini di perché potrebbe essere necessario. È necessaria una funzione di rendering per accedere a railsContext.
2. È possibile utilizzare gli oggetti di scena passati per inizializzare un negozio redux o impostare react-router.
3. È possibile restituire componenti diversi a seconda di ciò che è negli oggetti di scena.

Nota, il valore restituito di una funzione di rendering deve essere una funzione React o un componente di classe o un oggetto che rappresenta i risultati del rendering del server.

Non restituire un elemento React (JSX).

ReactOnRails rileverà automaticamente una funzione di rendering registrata dal fatto che la funzione takesmore di 1 parametro. In altre parole, se si desidera la possibilità di fornire una funzione che restituisce ilcomponente ACT, quindi è necessario specificare almeno un secondo parametro. Questo è il railsContext.Se non si utilizza questo parametro, dichiarare la funzione con il parametro non utilizzato:

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

Pertanto, non vi è alcuna differenza tra la registrazione di un componente della funzione React o di un componente di classe rispetto a una “Render-Function.”Basta chiamare ReactOnRails.register.

react_component_hash per le funzioni di rendering

Un altro motivo per utilizzare una funzione di rendering è che a volte nel rendering del server, in particolare con React Router, è necessario restituire il risultato della chiamata a ReactDOMServer.renderToString (elemento). È possibile farlo restituendo un oggetto con la seguente forma: {renderedHtml, redirectLocation, error }. Assicurati di utilizzare questa funzione con react_component_hash.

Per il rendering del server, se si desidera restituire più stringhe HTML da una funzione di rendering, è possibile restituire un oggetto dalla funzione di rendering con una singola proprietà di primo livello direnderedHtml. All’interno di questo oggetto, posiziona una chiave chiamata componentHtml, insieme a qualsiasi altra chiave necessaria. Uno scenario di esempio di questo è quando si utilizzano librerie di effetti collaterali come React Helmet. Il tuo codice Ruby otterrà questo oggetto come Hash contenente chiavi componentHtml e qualsiasi altra chiave personalizzata che hai aggiunto:

{ renderedHtml: { componentHtml, customKey1, customKey2} }

Per i dettagli sull’utilizzo di react_component_hash con react-helmet, consultare la documentazione di react-helmet.

Gestione degli errori

• Tutti gli errori da ReactOnRails saranno di tipo ReactOnRails::Error.
• Prerendering (server rendering) errori ottenere informazioni di contesto per HoneyBadger e Sentry per facilitare il debug.

I18n

React on Rails fornisce un’opzione per le conversioni automatiche dei file Rails*.yml locali in*.json o `.js.Vedi Come aggiungere I18n per un riepilogo dell’aggiunta di I18n.

Maggiori dettagli

Sfoglia i link nella tabella riassuntiva dei contenuti

Ecco alcuni prossimi articoli altamente consigliati da leggere:

1. Come funziona React on Rails
2. Configurazione del Webpack
3. Visualizza Helper API
4. Caching e prestazioni: React on Rails Pro.
5. Distribuzione.

Supporto

Fare clic per aderire React + Rails Slack.

Risorse della comunità

Clicca per iscriverti per rimanere in contatto con Justin Gordon e ShakaCode. Ho intenzione di inviare annunci di nuove versioni di React on Rails e dei nostri ultimi articoli di blog e tutorial.

• Sala Slack: Contattaci per un invito alla sala Slack ShakaCode! Fateci sapere se volete contribuire.
• forum.shakacode.com: Pubblica le tue domande
• @railsonmaui su Twitter
• Per un live, open source, esempio di questa gemma, vedi www.reactrails.com.
• Vedi Progetti che usano e COMPLIMENTI per React on Rails. Si prega di inviare il vostro! Si prega di modificare una pagina o e-mail e noi aggiungeremo le tue informazioni. Amiamo anche le stelle in quanto ci aiuta ad attirare nuovi utenti e contributori.
• Vedi NEWS.md per ulteriori note nel tempo.

Contribuire

Segnalazioni di bug e richieste pull sono i benvenuti. Vedi Contribuire per iniziare e l’elenco dei problemi relativi alla richiesta di aiuto.

React on Rails Pro

Supporta lo sviluppo di React on Rails Pro diventando uno sponsor Github e ottenere questi vantaggi.

React on Rails Pro include il rendering del server dei nodi, il caching dei frammenti, la suddivisione del codice e altri miglioramenti delle prestazioni di React on Rails. Per un caso di studio, vedere l’articolo di HVMN Riduzione del 90% del tempo di risposta del server da React on Rails Pro. Il Wiki contiene maggiori dettagli.

Il piano di supporto React on Rails Pro può aiutare!

• Ottimizzazione della configurazione del webpack all’ultimo Webpack per React on Rails, inclusa la suddivisione del codice con componenti caricabili.
• Aggiornare l’app per utilizzare l’impostazione corrente rails/webpacker che salta la pipeline delle risorse pignoni.
• Prestazioni migliori lato client e server.
• Best practice basate su oltre 6 anni di esperienza React on Rails su molti progetti di produzione.
• Usando Reason con (o senza) React on Rails.

ShakaCode può anche aiutarti con le tue esigenze di sviluppo software personalizzato. Siamo specializzati in applicazioni di mercato ed e-commerce che utilizzano sia Rails che React. Perché possediamo HiChee.com, possiamo sfruttare quel codice per la tua app!

Si prega di e-mail Justin Gordon [email protected], il manutentore di React on Rails, per maggiori informazioni.

Pro: Fragment Caching

Fragment caching è una funzione React on Rails Pro. Il caching dei frammenti è un ENORME potenziamento delle prestazioni per le tue app. Utilizzare il cached_react_componentecached_react_component_hash. L’API è la stessa react_component e react_component_hash, ma per 2 differenze:

1. cache_key prende gli stessi parametri come qualsiasi Rails cache view helper.
2. Gli oggetti di scena vengono passati tramite un blocco in modo che la valutazione degli oggetti di scena non venga eseguita a meno che la cache non sia rotta. Supponiamo di inserire il calcolo degli oggetti di scena in un metodo chiamato some_slow_method_that_returns_props:

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

Tale memorizzazione nella cache dei frammenti consente di risparmiare il lavoro della CPU per il server Web e riduce notevolmente il tempo di richiesta. Salta completamente i costi di valutazione di:

1. Chiamate al database per calcolare gli oggetti di scena.
2. Serializzazione i valori props hash in una stringa JSON per la valutazione di JavaScript per il rendering del server.
3. Costi associati alla valutazione di JavaScript dal tuo codice Ruby.
4. Creazione della stringa HTML contenente gli oggetti di scena e il codice JavaScript reso dal server.

Nota, anche senza il rendering del server (senza il passaggio 3 sopra), il caching dei frammenti è ancora efficace.

Pro: Integrazione con il nodo.js per il rendering del server

Il rendering predefinito del server viene eseguito da ExecJS. Se si desidera utilizzare un Nodo.server js per il rendering del server più performante, e-mail [email protected]. ShakaCode ha costruito un server di rendering Nodo premium che fa parte di React on Rails Pro.

Testimonianze per ShakaCode

HVMN Testimonial, di Paul Benigeri, ottobre 12, 2018

Il prezzo che abbiamo pagato per la consultazione + la licenza React on Rails pro è già stata restituita un paio di volte dalle sole tariffe di hosting. L’intero processo è stato super hands off, e il nostro core team è stato in grado di concentrarsi sulla spedizione di nuove funzionalità durante quello sprint.

ResortPass Testimonial, da Leora Juster, dicembre 10, 2018

Justin e il suo team sono stati determinanti per aiutarci a stabilire le basi di progettazione e gli standard per la nostra transizione ad un react on rails applicazione. Solo tre mesi di lavoro con il team di Shaka code e abbiamo una pagina principale del nostro rendering lato server delle applicazioni a velocità esponenzialmente migliorate.

Da Joel Hooks, co-fondatore, Capo Nerd a egghead.io, 30 Gennaio 2017:

Per ulteriori testimonianze, vedere Progetti dal vivo e Complimenti.

Sostenitori

Le seguenti aziende supportano questo progetto open source, e ShakaCode utilizza i loro prodotti! Justin scrive Reagire su rotaie su RubyMine. Usiamo Scout per monitorare la performance dal vivo di HiChee.com, Rails AutoScale per scalare i dynos di HiChee, BrowserStack per risolvere problemi con browser oddball.

Clubhouse

mi sono appena trasferito ShakaCode sviluppo di spogliatoi di Trello. Lo faremo con tutti i nostri progetti. Se vuoi provare ClubHouse e ottenere 2 mesi gratuiti oltre il periodo di prova di 14 giorni, clicca qui per utilizzare il codice di riferimento di ShakaCode. Stiamo partecipando al loro fantastico programma di referral a tre facce, che puoi leggere qui. Utilizzando il nostro codice di riferimento sarete sostenere ShakaCode e, quindi, Reagire su rotaie!

Se desideri supportare React on Rails e avere la tua azienda elencata qui, mettiti in contatto.

Aloha e i migliori auguri da Justin e il team ShakaCode!

Lavora con noi