{"id":40831,"date":"2026-01-02T13:42:25","date_gmt":"2026-01-02T13:42:25","guid":{"rendered":"https:\/\/www.railscarma.com\/?p=40831"},"modified":"2026-01-02T13:42:29","modified_gmt":"2026-01-02T13:42:29","slug":"react-on-rails-explained-frontend-development-with-rails","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/es\/blog\/react-on-rails-explained-frontend-development-with-rails\/","title":{"rendered":"React on Rails Explained: Modern Frontend Development with Rails 8"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"40831\" class=\"elementor elementor-40831\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5815f7d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5815f7d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-35c1455\" data-id=\"35c1455\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-127e943 elementor-widget elementor-widget-text-editor\" data-id=\"127e943\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As of early 2026, <strong>Ruby on Rails<\/strong> (commonly called Rails) continues to be a leading framework for building robust, convention-driven web applications. Rails 8.0, released in November 2024, introduced significant simplifications with features like Kamal for deployment, Solid Cache\/Queue\/Cable for built-in alternatives to external services, Propshaft as the default asset pipeline, and a native authentication generator. Rails 8.1, released in October 2025, added further enhancements such as Active Job Continuations and Local CI.<\/p><p>Rails&#8217; default frontend stack emphasizes <strong>Hotwire<\/strong> (Turbo and Stimulus), delivering highly interactive experiences through server-rendered HTML updates\u2014&#8221;HTML over the wire.&#8221; This approach minimizes JavaScript complexity and enables rapid development for many applications.<\/p><p>However, for projects demanding rich client-side interactivity, advanced state management, or extensive component ecosystems, developers often integrate <strong>Reaccione<\/strong>. This &#8220;React on Rails&#8221; hybrid leverages Rails&#8217; backend strengths (API, authentication, routing) while using React for dynamic UI components.<\/p><p>This guide covers the rationale, setup options, best practices, and real-world considerations for using React with Rails 8 in 2026.<\/p><h3><strong>Why Integrate React with Rails 8?<\/strong><\/h3><p>Rails 8&#8217;s Hotwire stack excels at progressive enhancement: fast page loads, real-time updates via Turbo Streams, and sprinkle-style JavaScript with Stimulus. It&#8217;s ideal for <a href=\"https:\/\/www.carmatec.com\/blog\/building-a-crud-application-with-ruby-on-rails-step-by-step-guide\/\">CRUD apps<\/a>, admin panels, and content-driven sites.<\/p><p>React shines when you need:<\/p><ul><li>Complex, stateful interfaces (e.g., drag-and-drop, real-time collaboration tools, canvas editors).<\/li><li>Reusable component libraries (e.g., Material UI, Chakra UI, or custom design systems).<\/li><li>Advanced client-side routing and state (e.g., Redux Toolkit, Zustand).<\/li><li>Shared code with mobile apps via React Native.<\/li><li>SEO-friendly server-side rendering (SSR) for dynamic content.<\/li><\/ul><p>Many production apps combine Rails backends with React frontends. The hybrid model balances Rails&#8217; productivity with React&#8217;s interactivity. In 2026, community trends favor &#8220;islands&#8221; architecture: Hotwire for most pages, React for specific complex sections.<\/p><p>Hotwire vs. React: Choose Hotwire for simplicity and speed in server-heavy apps; React for SPA-like experiences, accepting added build complexity.<\/p><h3><strong>Benefits of Combining Rails and React<\/strong><\/h3><p>Rails handles:<\/p><ul><li>Robust API endpoints, authentication, and database interactions.<\/li><li>Rapid prototyping with generators and conventions.<\/li><li>Real-time features via Action Cable.<\/li><\/ul><p>React adds:<\/p><ul><li>Declarative, reusable components for complex UIs.<\/li><li>Efficient updates via Virtual DOM.<\/li><li>Mature libraries (e.g., TanStack Query, Framer Motion, Shadcn UI).<\/li><\/ul><p>Together, they enable:<\/p><ul><li>Progressive enhancement: Hotwire for simple pages, React for interactive sections.<\/li><li>Scalable apps: From MVPs to enterprise dashboards.<\/li><li>Team flexibility: Ruby experts on backend, JS specialists on frontend.<\/li><\/ul><p>In 2026, trends favor hybrids\u2014Rails for core logic, React for &#8220;islands&#8221; of interactivity\u2014avoiding full SPA overhead unless needed.<\/p><h3><strong>Setting Up React in a New Rails 8 App<\/strong><\/h3><p>Rails 8 defaults to <strong>importmap-rails<\/strong> for lightweight JavaScript (no bundler needed) and Propshaft for assets. For React, which requires JSX transformation and module bundling, use a JavaScript bundler.<\/p><p>Popular options in 2026:<\/p><ul><li><strong>jsbundling-rails<\/strong> with esbuild (simple, fast).<\/li><li><strong>vite_ruby<\/strong> (Vite integration\u2014excellent HMR, ecosystem support).<\/li><\/ul><h3><strong>Setup with jsbundling-rails and esbuild (Recommended for Simplicity)<\/strong><\/h3><ol><li>Create the app, skipping default JavaScript:<pre>bash\nrails new myapp --skip-javascript\ncd myapp<\/pre><\/li><li>Add bundling support:<pre>bash\nbundle add jsbundling-rails\nrails javascript:install:esbuild<\/pre><\/li><li>Install React:<pre>bash\nnpm install react react-dom\n<em># Or yarn add react react-dom<\/em><\/pre><\/li><li>Configure esbuild for JSX (edit <code>package.json<\/code> scripts if needed):<pre>json\n\"scripts\": {\n  \"build\": \"esbuild app\/javascript\/application.js --bundle --sourcemap --loader:.js=jsx --outdir=app\/assets\/builds --minify\",\n  \"build:watch\": \"esbuild app\/javascript\/application.js --bundle --sourcemap --loader:.js=jsx --outdir=app\/assets\/builds --watch\"\n}<\/pre><\/li><li>Create entrypoint <code>app\/javascript\/application.js<\/code>:<pre>javascript\nimport React from 'react';\nimport { createRoot } from 'react-dom\/client';\nimport App from '.\/components\/App.jsx';\n\ndocument.addEventListener('turbo:load', () =&gt; {\n  const root = document.getElementById('react-root');\n  if (root) {\n \u00a0\u00a0 createRoot(root).render(&lt;App \/&gt;);\n  }\n});<\/pre><\/li><li>Sample component <code>app\/javascript\/components\/App.jsx<\/code>:<pre>jsx\nimport React from &#039;react&#039;;\n\nexport default function App() {\n  return &lt;h1&gt;Hello from React in Rails 8!&lt;\/h1&gt;;\n}<\/pre><\/li><li>In a view (<code>app\/views\/home\/index.html.erb<\/code>):<pre>erb\n&lt;div id=&quot;react-root&quot;&gt;&lt;\/div&gt;\n&lt;%= javascript_importmap_tags %&gt;<\/pre><\/li><\/ol><p>Correr <code>.\/bin\/dev<\/code> (starts Rails + esbuild watch) and visit the page\u2014React mounts seamlessly.<\/p><p>For TypeScript: Add <code>--loader:.ts=tsx<\/code> and rename files.<\/p><h3><strong>Alternative: Vite with vite_ruby (Faster Dev Experience)<\/strong><\/h3><p>Vite is widely adopted in 2026 for its speed and modern features.<\/p><ol><li>In a new app (<code>--skip-javascript<\/code>):<pre>bash\nbundle add vite_rails\nbin\/vite install<\/pre><\/li><li>Install React:<pre>bash\nnpm install react react-dom<\/pre><\/li><li>Configure entrypoints (e.g., <code>app\/frontend\/entrypoints\/application.js<\/code>):<pre>javascript\nimport React from 'react';\nimport { createRoot } from 'react-dom\/client';\nimport App from '..\/components\/App.jsx';\n\n<em>\/\/ Similar mounting logic<\/em><\/pre><\/li><\/ol><p>Vite handles HMR, splitting, and more out-of-the-box. Use helpers like <code>&lt;%= vite_javascript_tag 'application' %&gt;<\/code>.<\/p><p>Many prefer Vite for larger React apps due to better ecosystem compatibility.<\/p><h3><strong>Advanced Integration Options<\/strong><\/h3><h4><strong>Inertia.js<\/strong><\/h4><p>Inertia bridges Rails and React without a full JSON API. Pages feel server-routed but render client-side React components.<\/p><p>Add <code>inertia_rails<\/code> gem, configure with React adapter. Ideal for migrating from Hotwire or progressive enhancement.<\/p><h4><strong>Separate SPA + Rails API<\/strong><\/h4><p>For full decoupling:<\/p><pre>bash\nrails new backend --api<\/pre><p>Build a Vite\/Create React App frontend, consuming Rails JSON endpoints. Use authentication tokens (Rails 8 native auth helps).<\/p><p>Pros: Independent deploys, team separation. Cons: More infrastructure.<\/p><h4><strong>Gems for React<\/strong><\/h4><ul><li><strong>react_on_rails<\/strong>: Mature, supports SSR for SEO\/performance. Maintained in 2026.<\/li><li><strong>react-rails<\/strong>: Simpler view helpers, but less feature-rich for modern React.<\/li><\/ul><p>These work with bundlers but add overhead\u2014prefer manual setup for control.<\/p><h4><strong>Data Flow and Communication<\/strong><\/h4><p>In hybrid apps:<\/p><ul><li>Mount React &#8220;islands&#8221; in ERB views.<\/li><li>Pass initial data via <code>data-props<\/code> attributes or inline JSON.<\/li><li>Utilice <code>fetch<\/code> or libraries (TanStack Query, SWR) for API calls.<\/li><li>Combine with Turbo Streams for real-time (e.g., broadcast updates to React via WebSockets).<\/li><\/ul><p>Authentication: Rails 8&#8217;s built-in generator provides sessions\/tokens\u2014share via cookies or headers.<\/p><p>CSRF: Ensure protection in API endpoints.<\/p><h3><strong>Best Practices for Using React on Rails in 2026<\/strong><\/h3><ul><li>Start with Hotwire; add React only where needed (islands pattern).<\/li><li>Use Propshaft for efficient asset serving.<\/li><li>Pair with Tailwind CSS (easy via cssbundling-rails or Vite).<\/li><li>Test: RSpec\/System tests for Rails, Vitest\/React Testing Library for frontend.<\/li><li>Deploy with Kamal (Rails 8 default)\u2014works great with bundled assets.<\/li><li>Optimize bundles: Code-split, lazy-load components.<\/li><li>Monitor size: Avoid bloat with tree-shaking.<\/li><\/ul><p>Pitfalls:<\/p><ul><li>Premature React adoption (overcomplicates simple apps).<\/li><li>Ignoring Turbo compatibility (use <code>turbo:load<\/code> events).<\/li><li>Bundle bloat impacting load times.<\/li><\/ul><h2><strong>Conclusi\u00f3n<\/strong><\/h2><p>En <a href=\"https:\/\/www.railscarma.com\/es\"><strong>RielesCarma<\/strong><\/a>, we see <strong>Rails 8<\/strong> as a powerful platform that simplifies backend development and deployment while fully supporting modern frontend frameworks. By integrating <strong>React with Rails<\/strong>, teams gain the flexibility to build rich, dynamic user experiences without moving away from Rails\u2019 proven conventions and productivity.<\/p><p>Whether it\u2019s using <strong>esbuild for quick project kick-offs<\/strong>, <strong>Vite for refined development workflows<\/strong>, or leveraging gems like <strong>react_on_rails<\/strong> for server-side rendering, Rails 8 offers multiple integration paths. This hybrid approach allows developers to use <strong>Hotwire for broad, fast interactions<\/strong> y <strong>React for complex, interactive components<\/strong>\u2014getting the best of both worlds.<\/p><p>Con <strong>Rails 8<\/strong>, experimentation is encouraged. You can start small by mounting a React component alongside Turbo and scale as your application evolves. As we move into <strong>2026<\/strong>, the Rails ecosystem continues to thrive, and RailsCarma as a top<a href=\"https:\/\/www.railscarma.com\/es\"> empresa de desarrollo ruby on rails<\/a> helps businesses and teams harness this flexibility to build modern, future-ready applications.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t  <div class=\"related-post slider\">\r\n        <div class=\"headline\">Art\u00edculos Relacionados<\/div>\r\n    <div class=\"post-list owl-carousel\">\r\n\r\n            <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Qu\u00e9 es Offliberty Ruby Gem y c\u00f3mo funciona\" href=\"https:\/\/www.railscarma.com\/es\/blog\/what-is-offliberty-ruby-gem-and-how-it-works\/?related_post_from=41304\">\r\n\r\n      <img decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/What-is-Offliberty-Ruby-Gem-and-How-It-Works.png\" class=\"attachment-full size-full wp-post-image\" alt=\"Offliberty Ruby Gem\" srcset=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/What-is-Offliberty-Ruby-Gem-and-How-It-Works.png 800w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/What-is-Offliberty-Ruby-Gem-and-How-It-Works-300x113.png 300w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/What-is-Offliberty-Ruby-Gem-and-How-It-Works-768x288.png 768w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/What-is-Offliberty-Ruby-Gem-and-How-It-Works-18x7.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Qu\u00e9 es Offliberty Ruby Gem y c\u00f3mo funciona\" href=\"https:\/\/www.railscarma.com\/es\/blog\/what-is-offliberty-ruby-gem-and-how-it-works\/?related_post_from=41304\">\r\n        Qu\u00e9 es Offliberty Ruby Gem y c\u00f3mo funciona  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"M\u00e9todo link_to de Rails: La gu\u00eda completa con ejemplos\" href=\"https:\/\/www.railscarma.com\/es\/blog\/rails-metodo-link_to-la-guia-completa-con-ejemplos\/?related_post_from=41296\">\r\n\r\n      <img decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/Rails-link_to-Method-The-Complete-Guide-with-Examples.png\" class=\"attachment-full size-full wp-post-image\" alt=\"M\u00e9todo link_to de Rails\" srcset=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/Rails-link_to-Method-The-Complete-Guide-with-Examples.png 800w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/Rails-link_to-Method-The-Complete-Guide-with-Examples-300x113.png 300w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/Rails-link_to-Method-The-Complete-Guide-with-Examples-768x288.png 768w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/Rails-link_to-Method-The-Complete-Guide-with-Examples-18x7.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"M\u00e9todo link_to de Rails: La gu\u00eda completa con ejemplos\" href=\"https:\/\/www.railscarma.com\/es\/blog\/rails-metodo-link_to-la-guia-completa-con-ejemplos\/?related_post_from=41296\">\r\n        M\u00e9todo link_to de Rails: La gu\u00eda completa con ejemplos  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"C\u00f3mo crear una plataforma SaaS escalable con Ruby on Rails\" href=\"https:\/\/www.railscarma.com\/es\/blog\/how-to-build-a-scalable-saas-platform-using-ruby-on-rails\/?related_post_from=41273\">\r\n\r\n      <img decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/Build-a-SaaS-Platform-Using-Ruby-on-Rails.png\" class=\"attachment-full size-full wp-post-image\" alt=\"Crear una plataforma SaaS con Ruby on Rails\" srcset=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/Build-a-SaaS-Platform-Using-Ruby-on-Rails.png 800w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/Build-a-SaaS-Platform-Using-Ruby-on-Rails-300x113.png 300w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/Build-a-SaaS-Platform-Using-Ruby-on-Rails-768x288.png 768w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/Build-a-SaaS-Platform-Using-Ruby-on-Rails-18x7.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"C\u00f3mo crear una plataforma SaaS escalable con Ruby on Rails\" href=\"https:\/\/www.railscarma.com\/es\/blog\/how-to-build-a-scalable-saas-platform-using-ruby-on-rails\/?related_post_from=41273\">\r\n        C\u00f3mo crear una plataforma SaaS escalable con Ruby on Rails  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Ruby Regex Match Guide (2026) con Ejemplos\" href=\"https:\/\/www.railscarma.com\/es\/blog\/ruby-regex-match-guide-with-examples\/?related_post_from=41249\">\r\n\r\n      <img decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/Ruby-Regex-Match-Guide-with-Examples.png\" class=\"attachment-full size-full wp-post-image\" alt=\"Ruby Regex Match\" srcset=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/Ruby-Regex-Match-Guide-with-Examples.png 800w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/Ruby-Regex-Match-Guide-with-Examples-300x113.png 300w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/Ruby-Regex-Match-Guide-with-Examples-768x288.png 768w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/04\/Ruby-Regex-Match-Guide-with-Examples-18x7.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Ruby Regex Match Guide (2026) con Ejemplos\" href=\"https:\/\/www.railscarma.com\/es\/blog\/ruby-regex-match-guide-with-examples\/?related_post_from=41249\">\r\n        Ruby Regex Match Guide (2026) con Ejemplos  <\/a>\r\n\r\n        <\/div>\r\n      \r\n  <\/div>\r\n\r\n  <script>\r\n      <\/script>\r\n  <style>\r\n    .related-post {}\r\n\r\n    .related-post .post-list {\r\n      text-align: left;\r\n          }\r\n\r\n    .related-post .post-list .item {\r\n      margin: 10px;\r\n      padding: 10px;\r\n          }\r\n\r\n    .related-post .headline {\r\n      font-size: 14px !important;\r\n      color: #999999 !important;\r\n          }\r\n\r\n    .related-post .post-list .item .post_thumb {\r\n      max-height: 220px;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n          }\r\n\r\n    .related-post .post-list .item .post_title {\r\n      font-size: 14px;\r\n      color: #000000;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .post-list .item .post_excerpt {\r\n      font-size: 12px;\r\n      color: #3f3f3f;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .owl-dots .owl-dot {\r\n          }\r\n\r\n      <\/style>\r\n      <script>\r\n      jQuery(document).ready(function($) {\r\n        $(\".related-post .post-list\").owlCarousel({\r\n          items: 2,\r\n          responsiveClass: true,\r\n          responsive: {\r\n            0: {\r\n              items: 1,\r\n            },\r\n            768: {\r\n              items: 2,\r\n            },\r\n            1200: {\r\n              items: 2,\r\n            }\r\n          },\r\n                      rewind: true,\r\n                                loop: true,\r\n                                center: false,\r\n                                autoplay: true,\r\n            autoplayHoverPause: true,\r\n                                nav: true,\r\n            navSpeed: 1000,\r\n            navText: ['<i class=\"fas fa-chevron-left\"><\/i>', '<i class=\"fas fa-chevron-right\"><\/i>'],\r\n                                dots: false,\r\n            dotsSpeed: 1200,\r\n                                                    rtl: false,\r\n          \r\n        });\r\n      });\r\n    <\/script>\r\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>As of early 2026, Ruby on Rails (commonly called Rails) continues to be a leading framework for building robust, convention-driven web applications. Rails 8.0, released in November 2024, introduced significant simplifications with features like Kamal for deployment, Solid Cache\/Queue\/Cable for built-in alternatives to external services, Propshaft as the default asset pipeline, and a native authentication &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.railscarma.com\/es\/blog\/ruby-regex-match-guide-with-examples\/\"> <span class=\"screen-reader-text\">Ruby Regex Match Guide (2026) con Ejemplos<\/span> Leer m\u00e1s \u00bb<\/a><\/p>","protected":false},"author":11,"featured_media":40838,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1224],"tags":[],"class_list":["post-40831","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React on Rails Explained: Frontend Development with Rails 8<\/title>\n<meta name=\"description\" content=\"React on Rails explained with Rails 8\u2014learn how to build modern, dynamic frontends while retaining Rails conventions and performance.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.railscarma.com\/es\/blog\/react-on-rails-explained-frontend-development-with-rails\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React on Rails Explained: Frontend Development with Rails 8\" \/>\n<meta property=\"og:description\" content=\"React on Rails explained with Rails 8\u2014learn how to build modern, dynamic frontends while retaining Rails conventions and performance.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.railscarma.com\/es\/blog\/react-on-rails-explained-frontend-development-with-rails\/\" \/>\n<meta property=\"og:site_name\" content=\"RailsCarma - Ruby on Rails Development Company specializing in Offshore Development\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/RailsCarma\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-02T13:42:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-02T13:42:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/01\/React-on-Rails-Explained-Modern-Frontend-Development-with-Rails-8.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ashish\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@railscarma\" \/>\n<meta name=\"twitter:site\" content=\"@railscarma\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"ashish\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/\"},\"author\":{\"name\":\"ashish\",\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/person\/9699b14852b308edfeb03096b33c7a7a\"},\"headline\":\"React on Rails Explained: Modern Frontend Development with Rails 8\",\"datePublished\":\"2026-01-02T13:42:25+00:00\",\"dateModified\":\"2026-01-02T13:42:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/\"},\"wordCount\":969,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.railscarma.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/01\/React-on-Rails-Explained-Modern-Frontend-Development-with-Rails-8.png\",\"articleSection\":[\"Blogs\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/\",\"url\":\"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/\",\"name\":\"React on Rails Explained: Frontend Development with Rails 8\",\"isPartOf\":{\"@id\":\"https:\/\/www.railscarma.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/01\/React-on-Rails-Explained-Modern-Frontend-Development-with-Rails-8.png\",\"datePublished\":\"2026-01-02T13:42:25+00:00\",\"dateModified\":\"2026-01-02T13:42:29+00:00\",\"description\":\"React on Rails explained with Rails 8\u2014learn how to build modern, dynamic frontends while retaining Rails conventions and performance.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/#primaryimage\",\"url\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/01\/React-on-Rails-Explained-Modern-Frontend-Development-with-Rails-8.png\",\"contentUrl\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/01\/React-on-Rails-Explained-Modern-Frontend-Development-with-Rails-8.png\",\"width\":800,\"height\":300,\"caption\":\"React on Rails\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.railscarma.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React on Rails Explained: Modern Frontend Development with Rails 8\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.railscarma.com\/#website\",\"url\":\"https:\/\/www.railscarma.com\/\",\"name\":\"RailsCarma - Ruby on Rails Development Company specializing in Offshore Development\",\"description\":\"RailsCarma is a Ruby on Rails Development Company in Bangalore. We specialize in Offshore Ruby on Rails Development based out in USA and India. Hire experienced Ruby on Rails developers for the ultimate Web Experience.\",\"publisher\":{\"@id\":\"https:\/\/www.railscarma.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.railscarma.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.railscarma.com\/#organization\",\"name\":\"RailsCarma\",\"url\":\"https:\/\/www.railscarma.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/08\/railscarma_logo.png\",\"contentUrl\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/08\/railscarma_logo.png\",\"width\":200,\"height\":46,\"caption\":\"RailsCarma\"},\"image\":{\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/RailsCarma\/\",\"https:\/\/x.com\/railscarma\",\"https:\/\/www.linkedin.com\/company\/railscarma\/\",\"https:\/\/myspace.com\/railscarma\",\"https:\/\/in.pinterest.com\/railscarma\/\",\"https:\/\/www.youtube.com\/channel\/UCx3Wil-aAnDARuatTEyMdpg\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/person\/9699b14852b308edfeb03096b33c7a7a\",\"name\":\"ashish\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/204411c7d72714bc32d5ac6398e0596896318386bd537860fdd14ce905a79e07?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/204411c7d72714bc32d5ac6398e0596896318386bd537860fdd14ce905a79e07?s=96&d=mm&r=g\",\"caption\":\"ashish\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React on Rails Explained: Frontend Development with Rails 8","description":"React on Rails explained with Rails 8\u2014learn how to build modern, dynamic frontends while retaining Rails conventions and performance.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.railscarma.com\/es\/blog\/react-on-rails-explained-frontend-development-with-rails\/","og_locale":"es_ES","og_type":"article","og_title":"React on Rails Explained: Frontend Development with Rails 8","og_description":"React on Rails explained with Rails 8\u2014learn how to build modern, dynamic frontends while retaining Rails conventions and performance.","og_url":"https:\/\/www.railscarma.com\/es\/blog\/react-on-rails-explained-frontend-development-with-rails\/","og_site_name":"RailsCarma - Ruby on Rails Development Company specializing in Offshore Development","article_publisher":"https:\/\/www.facebook.com\/RailsCarma\/","article_published_time":"2026-01-02T13:42:25+00:00","article_modified_time":"2026-01-02T13:42:29+00:00","og_image":[{"width":800,"height":300,"url":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/01\/React-on-Rails-Explained-Modern-Frontend-Development-with-Rails-8.png","type":"image\/png"}],"author":"ashish","twitter_card":"summary_large_image","twitter_creator":"@railscarma","twitter_site":"@railscarma","twitter_misc":{"Escrito por":"ashish","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/#article","isPartOf":{"@id":"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/"},"author":{"name":"ashish","@id":"https:\/\/www.railscarma.com\/#\/schema\/person\/9699b14852b308edfeb03096b33c7a7a"},"headline":"React on Rails Explained: Modern Frontend Development with Rails 8","datePublished":"2026-01-02T13:42:25+00:00","dateModified":"2026-01-02T13:42:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/"},"wordCount":969,"commentCount":0,"publisher":{"@id":"https:\/\/www.railscarma.com\/#organization"},"image":{"@id":"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/#primaryimage"},"thumbnailUrl":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/01\/React-on-Rails-Explained-Modern-Frontend-Development-with-Rails-8.png","articleSection":["Blogs"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/","url":"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/","name":"React on Rails Explained: Frontend Development with Rails 8","isPartOf":{"@id":"https:\/\/www.railscarma.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/#primaryimage"},"image":{"@id":"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/#primaryimage"},"thumbnailUrl":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/01\/React-on-Rails-Explained-Modern-Frontend-Development-with-Rails-8.png","datePublished":"2026-01-02T13:42:25+00:00","dateModified":"2026-01-02T13:42:29+00:00","description":"React on Rails explained with Rails 8\u2014learn how to build modern, dynamic frontends while retaining Rails conventions and performance.","breadcrumb":{"@id":"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/#primaryimage","url":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/01\/React-on-Rails-Explained-Modern-Frontend-Development-with-Rails-8.png","contentUrl":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2026\/01\/React-on-Rails-Explained-Modern-Frontend-Development-with-Rails-8.png","width":800,"height":300,"caption":"React on Rails"},{"@type":"BreadcrumbList","@id":"https:\/\/www.railscarma.com\/blog\/react-on-rails-explained-frontend-development-with-rails\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.railscarma.com\/"},{"@type":"ListItem","position":2,"name":"React on Rails Explained: Modern Frontend Development with Rails 8"}]},{"@type":"WebSite","@id":"https:\/\/www.railscarma.com\/#website","url":"https:\/\/www.railscarma.com\/","name":"RailsCarma - Empresa de desarrollo Ruby on Rails especializada en desarrollo offshore","description":"RailsCarma es una empresa de desarrollo de Ruby on Rails en Bangalore. Nos especializamos en el desarrollo offshore de Ruby on Rails con sede en EE. UU. e India. Contrate desarrolladores experimentados de Ruby on Rails para disfrutar de la mejor experiencia web.","publisher":{"@id":"https:\/\/www.railscarma.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.railscarma.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.railscarma.com\/#organization","name":"RielesCarma","url":"https:\/\/www.railscarma.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.railscarma.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/08\/railscarma_logo.png","contentUrl":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/08\/railscarma_logo.png","width":200,"height":46,"caption":"RailsCarma"},"image":{"@id":"https:\/\/www.railscarma.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/RailsCarma\/","https:\/\/x.com\/railscarma","https:\/\/www.linkedin.com\/company\/railscarma\/","https:\/\/myspace.com\/railscarma","https:\/\/in.pinterest.com\/railscarma\/","https:\/\/www.youtube.com\/channel\/UCx3Wil-aAnDARuatTEyMdpg"]},{"@type":"Person","@id":"https:\/\/www.railscarma.com\/#\/schema\/person\/9699b14852b308edfeb03096b33c7a7a","name":"ashish","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.railscarma.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/204411c7d72714bc32d5ac6398e0596896318386bd537860fdd14ce905a79e07?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/204411c7d72714bc32d5ac6398e0596896318386bd537860fdd14ce905a79e07?s=96&d=mm&r=g","caption":"ashish"}}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.railscarma.com\/es\/wp-json\/wp\/v2\/posts\/40831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.railscarma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.railscarma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.railscarma.com\/es\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.railscarma.com\/es\/wp-json\/wp\/v2\/comments?post=40831"}],"version-history":[{"count":0,"href":"https:\/\/www.railscarma.com\/es\/wp-json\/wp\/v2\/posts\/40831\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.railscarma.com\/es\/wp-json\/wp\/v2\/media\/40838"}],"wp:attachment":[{"href":"https:\/\/www.railscarma.com\/es\/wp-json\/wp\/v2\/media?parent=40831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.railscarma.com\/es\/wp-json\/wp\/v2\/categories?post=40831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.railscarma.com\/es\/wp-json\/wp\/v2\/tags?post=40831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}