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 – ¡No Afeites Ese Yak! con Justin Gordon.

1 de octubre de 2020: Consulte el repositorio de ejemplo spec/dummy para obtener una configuración simple de webpack a través de la gema rails/webpacker que admite SSR.

2 de agosto de 2020: Consulte el tutorial repo de ejemplo de React on Rails Con SSR, actualización rápida HMR y TypeScript para ver una nueva forma de configurar la creación de su paquete SSR con rails/webpacker.

8 de julio de 2020: Lanzamiento v12 de React on Rails.

Mejoras importantes

1. Soporte de ganchos de React para componentes de nivel superior
2. Enlaces de Typescript
3. rails / webpacker «solo funciona» con React on Rails de forma predeterminada.
4. soporte para i18n para generar un archivo JSON en lugar de un archivo JS.

Asegúrese de ver el CHANGELOG.md y lea las instrucciones de actualización: docs / basics / upgrading-react-on-rails.

• Vea la charla de Justin sobre RailsConf: Webpacker, Simplemente Funciona, Pero ¿Cómo?.
• ¿Está interesado en el soporte para React on Rails? Quieres usar Node.js para hacer su renderizado del lado del servidor para que las bibliotecas como Emotion y los Componentes cargables funcionen, en comparación con el renderizado a través de JS incrustados en Ruby? Si es así, echa un vistazo a React on Rails Pro.
• HMR está trabajando con componentes cargables para una experiencia de desarrollador de recarga en caliente increíble y un gran rendimiento en tiempo de ejecución. Envíeme un correo electrónico si desea utilizar la división de código de componentes cargables para acelerar su aplicación al reducir el tamaño de sus paquetes y cargar perezosamente el código que necesita.

Acerca de

React on Rails integra Rails con el framework de front-end React de Facebook (renderizado de servidor).

Este proyecto es mantenido por la consultora de software ShakaCode. Nos centramos en aplicaciones Ruby on Rails con front-ends de React, a menudo usando TypeScript o ReasonML. También construimos sitios Gatsby. Vea nuestro trabajo reciente para ver ejemplos de lo que hacemos.

¿Está interesado en optimizar la configuración de su paquete web para React on Rails,incluido el divisor de códigos con react-router y los componentes cargables con renderizado del lado del servidor?Acabamos de hacer esto para Popmenu, reduciendo los costos de Heroku entre un 20 y un 25% y obteniendo una disminución del 73% en los tiempos de respuesta promedio.

No dude en ponerse en contacto con Justin Gordon, [email protected], mantenedor de React on Rails, para más información.

Haga clic para unirse a React + Rails Slack.

Objetivo del proyecto

Proporcionar un marco de alto rendimiento para integrar Ruby on Rails con React a través de la gema Webpacker, especialmente en lo que respecta a la renderización del lado del servidor de React para un mejor SEO y un rendimiento mejorado.Características de

y por qué React on Rails?

Dado que rails/webpacker gem ya proporciona integración básica de React, ¿por qué usarías «React on Rails»?

1. Fácil paso de accesorios directamente desde la vista de Rails a los componentes de React en lugar de que la vista de Rails se cargue y luego realice una solicitud por separado a la API.
2. Estrecha integración con rails / webpacker.
3. El renderizado del lado del servidor (SSR), a menudo utilizado para la indexación de rastreadores SEO y el rendimiento de UX, no es ofrecido por rails/webpacker.
4. Redux y React Integración de enrutador con renderizado del lado del servidor.
5. Internacionalización (I18n) y localización)
6. Una comunidad de apoyo. Esta búsqueda en la web muestra cómo los sitios públicos en vivo están usando React on Rails.
7. Soporte de Reason ML.

Consulte Opciones de integración de Rails/Webpacker React para comparar con otras gemas.

Consulte el tutorial react-webpack-rails para ver un ejemplo de implementación y código en vivo.

El contenido Premium del Foro ShakaCode

Requiere crear una cuenta gratuita.

• Cómo usar diferentes versiones de un archivo para renderizar cliente y servidor
• Cómo renderizar condicionalmente el lado del servidor en función del tipo de dispositivo

Documentos

Considere navegar por este sitio web.

Requisitos previos

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

Primeros pasos

Nota, la mejor manera de entender cómo usar ReactOnRails es estudiar algunos ejemplos simples. Puede hacer una configuración de demostración rápida, ya sea en su aplicación existente o en una nueva aplicación Rails.

1. Haga el tutorial rápido.
2. Agregue React on Rails a una aplicación Rails existente según las instrucciones.
3. Mira spec / dummy, un ejemplo simple, sin base de datos.
4. Mira github.com/shakacode/react-webpack-rails-tutorial; es un ejemplo completo en vivo en www.reactrails.com.

Instalación básica

Consulte también las instrucciones para instalar en una aplicación Rails existente.

1. Añadir la gema react_on_rails al Gemfile:

   bundle add react_on_rails --strict

2. Confirme esto a git (de lo contrario, no puede ejecutar el generador a menos que pase la opción --ignore-warnings).

3. Ejecutar el generador:

   rails generate react_on_rails:install

4. Inicie la aplicación:

   rails s

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

Activar el renderizado del servidor

Con el código de ejecución del generador React on Rails anterior:

1. Editar app/views/hello_world/index.html.erb y set prerender a true.
2. Actualizar la página.

A continuación se muestra la línea en la que activa la representación del servidor configurando prerender a verdadero:

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

Nota, si tiene un error en su consola con respecto a «ReferenceError: window is not defined»,entonces debe editar config/webpacker.yml y establecer hmr: false y inline: false.Consulte rails / webpacker PR 2644 para obtener una solución para este problema.

Uso básico

Configuración

• Configurar config/initializers/react_on_rails.rb. Puede ajustar algunos ajustes y valores predeterminados necesarios. Consulte el archivo docs / basics / configuration. md para obtener documentación de todas las opciones de configuración.
• Configure config/webpacker.yml. Si ha utilizado el generador y la configuración predeterminada del webpacker, no necesita tocar este archivo. Si está personalizando su configuración, consulte spec / dummy/config / webpacker.ejemplo de yml o el webpacker oficial predeterminado.yml.
  • Tip: establezca compile: false para el desarrollo si sabe que siempre estará compilando con un proceso de vigilancia. De lo contrario, cada solicitud comprobará si es necesaria la compilación.
  • Su public_output_path debe coincidir con su configuración de paquete web personalizada para output de sus paquetes.
  • Solo establezca cache_manifesten true en su entorno de producción.

Incluir el componente React en las Vistas de Rails

• El componente React se renderiza a través de las Vistas de Rails. Aquí hay una muestra de ERB:

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

• Renderizado del lado del servidor: Su componente react se renderiza primero en HTML en el servidor. Utilice la opción prerender:

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

• El parámetro component_name es una cadena que coincide con el nombre que utilizó para exponer su componente de React de forma global. Por lo tanto, en los ejemplos anteriores, si tuviera un componente de React llamado «HelloWorld», lo registraría con las siguientes líneas:

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

  Exponer su componente de esta manera es cómo React on Rails puede hacer referencia a su componente desde una vista de Rails. Puede exponer tantos componentes como desee, siempre y cuando sus nombres no choquen. Vea a continuación los detalles de cómo expone sus componentes a través de la configuración del paquete web react_on_rails. Puede llamar a ReactOnRails.register muchas veces.

• @some_props puede ser un hash o cadena JSON. Este es un argumento opcional asumiendo que no necesita pasar ninguna opción (si desea pasar opciones, como prerender: true, pero no desea pasar ninguna propiedad, simplemente pase un hash vacío {}). Esto hará que los datos disponibles en su componente:

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

• Esto es lo que su HelloWorld.el archivo js puede contener. railsContext siempre está disponible para cualquier parámetro que siempre desee que esté disponible para sus componentes de React. No tiene nada que ver con el concepto del Contexto React. Consulte Funciones de renderizado y RailsContext para obtener más detalles sobre este tema.

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

Consulte la API de Ayudantes de vista para obtener más detalles sobre react_componenty su función hermana react_component_hash.

Exponiendo globalmente Sus Componentes de React

Para el ayudante de vista de React on Rails react_component para usar sus componentes de React, deberá registrarlos en su código JavaScript.

Utilice módulos tal y como lo haría al usar Webpack y React sin Rails. La diferencia es que en lugar de montar componentes de React directamente en un elemento usando React.render, registra sus componentes en ReactOnRails y luego los monta con ayudantes dentro de sus vistas de Rieles.

Así se expone un componente al ayudante de vista react_component.

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

Código de renderizado del lado del servidor diferente (y un Paquete específico del servidor)

Es posible que desee un código diferente para los componentes renderizados del servidor que ejecutan el lado del servidor frente al lado del cliente. Por ejemplo, si tiene una animación que se ejecuta cuando se muestra un componente, es posible que deba desactivarla al renderizar el servidor. Una forma de manejar esto es el código condicional como if (window) { doClientOnlyCode() }.

Otra forma es usar un archivo de configuración de paquete web separado que pueda usar un archivo de entrada del lado del servidor diferente, como ‘ Registro del servidor.js ‘en lugar de’ Registro de clientes.js.’Eso configuraría un código diferente para el renderizado del servidor.

Para obtener más información sobre las técnicas para usar código diferente para renderizar clientes y servidores, consulte: Cómo usar diferentes versiones de un archivo para la representación de cliente y servidor. (Requiere crear una cuenta gratuita.)

Especificando sus componentes de React: Regístrese directamente o use funciones de renderizado

Tiene dos formas de especificar sus componentes de React. Puede registrar el componente de React (ya sea un componente de función o de clase) directamente, o puede crear una función que devuelva un componente de React, que usaremos con el nombre de «función de renderizado». Crear una función de renderizado le permite:

1. Tener acceso a railsContext. Consulte la documentación de railsContext para saber por qué podría necesitarlo. Necesita una función de procesamiento para acceder a railsContext.
2. Puede usar los accesorios pasados para inicializar una tienda redux o configurar react-router.
3. Puede devolver diferentes componentes dependiendo de lo que haya en los accesorios.

Nota, el valor devuelto de una Función de Renderizado debe ser una Función React o un Componente de Clase, o un objeto que represente los resultados de renderizado del servidor.

No devuelve un elemento React (JSX).

ReactOnRails detectará automáticamente una función de renderizado registrada por el hecho de que la función toma más de 1 parámetro. En otras palabras, si desea la capacidad de proporcionar una función que devuelva el componente theReact, debe especificar al menos un segundo parámetro. Este es el railsContext.Si no está utilizando este parámetro, declare su función con el parámetro no utilizado:

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

Por lo tanto, no hay diferencia entre registrar un Componente de Función React o un Componente de clase versus una «Función de Renderizado».»Simplemente llame a ReactOnRails.register.

react_component_hash para Funciones de Renderizado

Otra razón para usar una función de renderizado es que a veces en el renderizado del servidor, específicamente con el enrutador React, necesita devolver el resultado de llamar a ReactDOMServer.Renderizado (elemento). Puede hacer esto devolviendo un objeto con la siguiente forma: { renderedHtml, redirectLocation, error }. Asegúrese de usar esta función con react_component_hash.

Para el renderizado del servidor, si desea devolver varias cadenas HTML de una Función de Renderizado, puede devolver un Objeto de su Función de renderizado con una sola propiedad de nivel superior de renderedHtml. Dentro de este objeto, coloque una clave llamada componentHtml, junto con cualquier otra clave necesaria. Un escenario de ejemplo de esto es cuando está utilizando bibliotecas de efectos secundarios como React Helmet. Su código Ruby obtendrá este objeto como un Hash que contiene las claves componentHtml y cualquier otra clave personalizada que haya agregado:

{ renderedHtml: { componentHtml, customKey1, customKey2} }

Para obtener más información sobre el uso de react_component_hash con react-helmet, consulte nuestra documentación de react-helmet.

Manejo de errores

• Todos los errores de ReactOnRails serán de tipo ReactOnRails:: Error.Los errores de pre-representación (renderizado del servidor) obtienen información de contexto para HoneyBadger y Sentry para facilitar la depuración.

I18n

React on Rails proporciona una opción para convertir automáticamente los archivos de configuración regional de Rails *.yml en *.json o `.js.Consulte Cómo agregar I18n para obtener un resumen de cómo agregar I18n.

Más detalles

Navegue por los enlaces de la Tabla de contenido de resumen

Aquí encontrará algunos artículos siguientes muy recomendados para leer:

1. Cómo funciona React on Rails
2. Configuración del paquete web
3. Ver la API de ayudantes
4. Almacenamiento en caché y rendimiento: React on Rails Pro.Despliegue
5. .

Soporte

Haga clic para unirse a React + Rails Slack.

Recursos de la comunidad

Por favor, haga clic para suscribirse y mantenerse en contacto con Justin Gordon y ShakaCode. Tengo la intención de enviar anuncios de nuevas versiones de React on Rails y de nuestros últimos artículos de blog y tutoriales.

• Sala de Slack: ¡Póngase en contacto con nosotros para recibir una invitación a la sala de Slack de ShakaCode! Háganos saber si desea contribuir.
• forum.shakacode.com: Publique sus preguntas
• @railsonmaui en Twitter
• Para ver un ejemplo en vivo de código abierto de esta joya, consulte www.reactrails.com.
• Ver Proyectos que usan y FELICITACIONES para React on Rails. Por favor, envíe el suyo! Edite la página o envíenos un correo electrónico y agregaremos su información. También nos encantan las estrellas, ya que nos ayudan a atraer nuevos usuarios y colaboradores.
• Ver NEWS.md para más notas a lo largo del tiempo.

Contribuir

Los informes de errores y las solicitudes de extracción son bienvenidos. Consulte Contribuir para comenzar y la lista de problemas que se necesitan para recibir ayuda.

React on Rails Pro

Apoye el desarrollo de React on Rails Pro convirtiéndose en patrocinador de Github y obtenga estos beneficios.

React on Rails Pro incluye renderizado de servidores de nodos, almacenamiento en caché de fragmentos, división de código y otras mejoras de rendimiento para React on Rails. Para ver un caso práctico, consulte el artículo Reducción del 90% del tiempo de respuesta del servidor de HVMN de React on Rails Pro. El Wiki contiene más detalles.

El Plan de soporte de React on Rails Pro puede ayudar!

• Optimizando la configuración de su paquete web al último paquete Web para React on Rails, incluida la división de código con componentes cargables.
• Actualizar la aplicación para usar la configuración actual rails/webpacker que omite la canalización de recursos de piñones.
• Mejor rendimiento del lado del cliente y del servidor.
• Mejores prácticas basadas en más de 6 años de experiencia de React on Rails en muchos proyectos de producción.
• Usando Reason con (o sin) React on Rails.

ShakaCode también puede ayudarlo con sus necesidades de desarrollo de software personalizado. Nos especializamos en aplicaciones de mercado y comercio electrónico que utilizan Rails y React. Porque somos dueños HiChee.com, podemos aprovechar ese código para su aplicación!

Por favor, envíe un correo electrónico a Justin Gordon [email protected], el mantenedor de React on Rails, para más información.

Pro: Almacenamiento en caché de fragmentos

El almacenamiento en caché de fragmentos es una característica de React on Rails Pro. El almacenamiento en caché de fragmentos es un gran refuerzo de rendimiento para sus aplicaciones. Utilice cached_react_component y cached_react_component_hash. El API es el mismo como react_component y react_component_hash, pero para 2 diferencias:

1. cache_key tiene los mismos parámetros que cualquier Rails cache view helper.
2. Los accesorios se pasan a través de un bloque para que la evaluación de los accesorios no se realice a menos que la caché esté rota. Supongamos que coloca su cálculo de accesorios en algún método llamado some_slow_method_that_returns_props:

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

El almacenamiento en caché de fragmentos ahorra trabajo de CPU para su servidor web y reduce en gran medida el tiempo de solicitud. Omite completamente los costos de evaluación de:

1. Llamadas a bases de datos para calcular los accesorios.
2. Serialización del hash de los valores de props en una cadena JSON para evaluar el procesamiento de JavaScript en el servidor.
3. Costos asociados con la evaluación de JavaScript a partir de su código Ruby.
4. Crear la cadena HTML que contiene los accesorios y el código JavaScript renderizado por el servidor.

Nota, incluso sin la representación del servidor (sin el paso 3 anterior), el almacenamiento en caché de fragmentos sigue siendo efectivo.

Pro: Integración con Node.js para renderizado de servidor

El renderizado de servidor predeterminado es realizado por ExecJS. Si desea utilizar un Nodo.servidor js para un mejor rendimiento de renderizado de servidor, correo electrónico [email protected]. ShakaCode ha creado un servidor de renderizado de nodos premium que forma parte de React on Rails Pro.

Testimonios para ShakaCode

Testimonio HVMN, por Paul Benigeri, 12 de octubre de 2018

El precio que pagamos por la consulta + la licencia React on Rails pro ya se ha devuelto un par de veces solo de las tarifas de alojamiento. Todo el proceso fue súper fácil, y nuestro equipo principal pudo centrarse en el envío de nuevas funciones durante ese sprint.

Testimonio de ResortPass, por Leora Juster, 10 de diciembre de 2018

Justin y su equipo fueron fundamentales para ayudarnos a establecer los cimientos y estándares de diseño para nuestra transición a una aplicación react on rails. Solo tres meses de trabajo con el equipo de Shaka code y tenemos una página principal de nuestra renderización del lado del servidor de aplicaciones a velocidades exponencialmente mejoradas.

De Joel Hooks, Cofundador, Empollón Jefe de egghead.io, 30 de enero de 2017:

Para obtener más testimonios, consulte Proyectos en vivo y Felicitaciones.

los Partidarios

Las siguientes empresas apoyan este proyecto de código abierto, y ShakaCode utiliza sus productos! Justin escribe React on Rails en RubyMine. Usamos Scout para monitorear la actuación en vivo de HiChee.com, Rails AutoScale para escalar los bancos de pruebas de HiChee, BrowserStack para resolver problemas con navegadores excéntricos.

Club

me acabo de mudar de ShakaCode el desarrollo de Club de Trello. Vamos a hacer esto con todos nuestros proyectos. Si quieres probar ClubHouse y obtener 2 meses gratis después del período de prueba de 14 días, haz clic aquí para usar el código de referencia de ShakaCode. Estamos participando en su increíble programa de referencia de tres caras, que puedes leer aquí. Al usar nuestro código de referencia, apoyarás a ShakaCode y, por lo tanto, a React on Rails.

Si quieres dar soporte a React on Rails y hacer que tu empresa aparezca en la lista, ponte en contacto con nosotros.

¡Aloha y los mejores deseos de Justin y el equipo de ShakaCode!

trabaja con Nosotros