React on Rails项目：Rails与Webpacker的React集成方案详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01153/article/details/148506369

React on Rails项目：Rails与Webpacker的React集成方案详解

react_on_rails shakacode/react_on_rails: 是一个用于将 React 和 Rails 集成在一起的 Rails 插件。适合用于在 Rails 应用程序中实现高性能和现代化的前端开发。特点是提供了简单的 API，支持多种 React 和 Rails 集成方式，并且可以自定义前端开发和行为。项目地址: https://gitcode.com/gh_mirrors/re/react_on_rails

前言

在现代Web开发中，React与Rails的集成已经成为一种常见的技术组合。本文将深入探讨React on Rails项目提供的多种集成方案，帮助开发者根据项目需求选择最适合的集成方式。

核心集成方案对比

React on Rails项目提供了三种主要的集成方案，每种方案都有其特点和适用场景：

| 功能特性 | React on Rails | react-rails | webpacker-react | |------------------------------|----------------|-------------|-----------------| | Props数据传递 | 支持 | 支持 | 支持 | | 服务端渲染(SSR) | 支持 | 支持 | 不支持 | | 热模块替换(HMR) | 支持 | 不支持 | 不支持 | | React-Router支持 | 支持 | 不支持 | 不支持 | | 代码分割支持 | 支持 | 不支持 | 不支持 | | Node服务端渲染 | 支持 | 不支持 | 不支持 |

服务端渲染(SSR)的重要性

服务端渲染主要带来两大优势：

SEO优化：搜索引擎爬虫能够直接抓取渲染后的HTML内容
首屏性能提升：用户无需等待JavaScript加载完成就能看到内容

虽然SSR不是必须的，但React on Rails提供了完整的SSR解决方案，包括与React-Router和代码分割的兼容性。

基础集成方案

即使不使用任何Gem，开发者也可以实现基本的React集成：

<%# 在Rails视图中 %>
<%= content_tag :div,
  id: "react-root",
  data: {
    greeting: '你好',
    username: '开发者'
}.to_json do %>
<% end %>

// 在React组件中
const Greeting = ({greeting, username}) => (
  <div className="app-container">
    <h3>{greeting} {username}!</h3>
  </div>
);

// 初始化渲染
document.addEventListener('DOMContentLoaded', () => {
  const root = document.getElementById('react-root');
  const props = JSON.parse(root.getAttribute('data'));
  
  ReactDOM.render(<Greeting {...props} />, root);
});

这种方案简单直接，适合不需要复杂功能的小型应用。

常见问题解决方案

React 18以下版本的警告处理

使用React 18以下版本时，可能会遇到关于react-dom/client的警告。可以通过Webpack配置忽略这个警告：

// webpack配置示例
const { webpackConfig: baseConfig, merge } = require('shakapacker');

const ignoreWarnings = {
  ignoreWarnings: [/Module not found: Error: Can't resolve 'react-dom\/client'/]
};

module.exports = merge(baseConfig, ignoreWarnings);

热模块替换(HMR)配置

热模块替换能显著提升开发体验，React on Rails支持两种实现方式：

1. 推荐方案：React Refresh

配置步骤：

安装依赖包
更新Babel配置
修改Webpack开发环境配置

// 开发环境Webpack配置示例
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

if (process.env.WEBPACK_DEV_SERVER) {
  environment.plugins.append(
    'ReactRefreshPlugin',
    new ReactRefreshPlugin({
      overlay: {
        sockPort: 3035
      }
    })
  );
}