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-Don’t Shave That Yak! com o Justin Gordon.

1 de outubro de 2020: veja o repo exemplo spec/dummy para uma configuração simples de webpack via rails/webpacker gem that supports SSR.

ugust 2, 2020: See the example repo of React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript for a new way to setup the creation of your SSR bundle with rails/webpacker.8 de julho de 2020: libertação de V12 de React on Rails.

melhorias importantes

1. Reat Hooks Support for top level components

Typescript bindings

2. rails / webpacker “just works” with React on Rails by default.suporte a
3. i18n para gerar um ficheiro JSON em vez de um ficheiro JS.não se esqueça de ver a CHANGELOG.md e leia as instruções de actualização: docs / basics / Upgrade-react-on-rails.
   • veja a Conversa de Justin RailsConf: Webpacker, It-Just-Works, But How?.está interessado em apoiar a reacção sobre carris? Quer usar o nó?js para fazer a renderização do lado do servidor de modo que bibliotecas como emoção e Componentes carregáveis apenas funcionam, em comparação com a renderização via Ruby embedded JS? Em caso afirmativo, Reat on Rails Pro.
   • HMR está trabalhando com componentes carregáveis para uma experiência incrível de desenvolvimento de recarga quente e grande desempenho em tempo de execução. Por favor, envie-me um e-mail se quiser usar a divisão de códigos de componentes carregáveis para acelerar o seu aplicativo, reduzindo o tamanho do seu pacote e carregando preguiçosamente o código que é necessário.

   sobre

   Reat on Rails integra Rails com (a representação do servidor) a estrutura React front-end do Facebook.este projeto é mantido pela empresa de consultoria de software ShakaCode. Nós nos concentramos em Ruby em aplicações de Rails com front-ends React, muitas vezes usando TypeScript ou ReasonML. Também construímos sites de Gatsby. Veja nosso trabalho recente para exemplos do que fazemos.

   interessado em otimizar a configuração do seu webpack para Reat on Rails, incluindo codesplitting com reat-router, e loadable-components com renderização do lado do servidor?Acabamos de fazer isso para Popmenu, baixando os custos de Heroku 20-25%, enquanto obter uma diminuição de 73% nos tempos de Resposta média.Sinta-se à vontade para contactar o Justin Gordon. [email protected], mantenedor de Reat on Rails, para mais informações.Clique para ligar Reat + Rails Slack.

   objectivo do projecto

   proporcionar um quadro de alto desempenho para integrar o Ruby on Rails com a reacção através da gema do Webpacker, especialmente no que diz respeito à representação do lado do servidor para melhor SEO e melhor desempenho.características e porquê reagir sobre carris?

   dado querails/webpacker gem já fornece a integração básica de reacção, por que você usaria “React on Rails”?passagem fácil de adereços directamente do seu Carris para os seus componentes de reacção, em vez de ter o seu Carris para a carga e, em seguida, fazer um pedido separado para a sua API.integração apertada com Carris/webpacker.

4. renderização do lado do servidor( SSR), muitas vezes usado para indexação de SEO crawler e desempenho UX, não é oferecido por rails/webpacker.
5. Redux and React Router integration with server-side-rendering.internacionalização (I18n) e (localização) uma comunidade de apoio. Esta pesquisa na web mostra como os sites públicos ao vivo estão usando Reat on Rails.Suporte para Reason ML.

See Rails/Webpacker Reat Integration Options for comparisons to other gems.

See the react-webpack-rails-tutorial for an example of a live implementation and code.

conteúdo premium do Fórum ShakaCode

requer a criação de uma conta livre.

• Como utilizar diferentes versões de um ficheiro para a renderização do cliente e servidor
• Como criar condicionalmente o lado do servidor com base no tipo de dispositivo

Docs

considere navegar por isto no nosso website.

pré-Requisitos

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

introdução

Nota, a melhor maneira de entender como usar ReactOnRails é estudar alguns exemplos simples. Você pode fazer uma configuração de demonstração rápida, tanto em seu aplicativo existente ou em um novo aplicativo Rails.

1. Faça o tutorial rápido.adicionar reacção sobre carris a uma aplicação de Carris existente de acordo com as instruções.
2. Look at spec / dummy, a simple, no DB example.olha para isto. github.com/shakacode/react-webpack-rails-tutorial; é um exemplo completo ao vivo em www.reactrails.com.

instalação básica

Ver também as instruções para instalar numa aplicação de Carris existente.

1. adicione oreact_on_rails gem ao Gemfile:

   bundle add react_on_rails --strict

2. Commit este git (ou outra coisa que você não pode executar o gerador, a menos que você passe a opção --ignore-warnings).

3. Executar o gerador de:

   rails generate react_on_rails:install

4. Iniciar o aplicativo:

   rails s

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

ligar a renderização do servidor

com o código de executar o gerador Reat on Rails acima:

1. Editar app/views/hello_world/index.html.erb e set prerendertrue.actualizar a página.

Abaixo é a linha onde você ativar o processamento do servidor, definindo prerender true

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

Nota, se você tem um erro no seu console em relação a “ReferenceError: janela não está definido”,em seguida, você precisa editar config/webpacker.yml e set hmr: false e inline: false.Veja rails / webpacker PR 2644 para uma correção para este assunto.

utilização básica

configuração

• configurar config/initializers/react_on_rails.rb. Você pode ajustar algumas configurações e predefinições necessárias. Veja o ficheiro docs / basics / configuration.md para a documentação de todas as opções de configuração.
• Configure config/webpacker.yml. Se você usou o gerador e a configuração padrão do webpacker, você não precisa tocar neste arquivo. Se estiver a personalizar a sua configuração, então consulte o spec/dummy/config/webpacker.exemplo yml ou o webpacker padrão oficial.yml.
  • Tip: definir compile: false para o desenvolvimento se souber que estará sempre a compilar com um processo de observação. Caso contrário, cada pedido irá verificar se a compilação é necessária.
  • o seu public_output_pathdeve corresponder à sua configuração personalizada do Webpack paraoutput dos seus pacotes.
  • apenas setcache_manifest totrue in your production env.

incluindo o seu componente de reacção nos seus Carris, os componentes de reacção são representados através dos seus Carris. Aqui está uma amostra ERB.:

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

Server-Side Rendering: o seu componente react é apresentado pela primeira vez em HTML no servidor. Use a opção pré -ender:

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

o parâmetro component_name é uma cadeia que corresponde ao nome que usou para expor o seu componente React globalmente. Assim, nos exemplos acima, se você tivesse um componente React chamado “HelloWorld”, você registrá-lo-ia com as seguintes linhas:

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

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

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

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

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

{ renderedHtml: { componentHtml, customKey1, customKey2} }

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