附录 - Rails 前端开发：必备工具

Hotwire 与 React 的对比 Hotwire 和 React 是两种用于构建现代 Web 应用程序的前端技术，但它们在设计理念、使用方式和适用场景上存在显著差异。 1. 核心理念 - React：采用组件化架构，通过虚拟 DOM 实现高效的视图更新。开发者以 JavaScript 编写 UI 组件，数据驱动视图变化。 - Hotwire：由 Ruby on Rails 团队推出，强调“无 JavaScript 框架”的开发体验。它利用原生 HTML、CSS 和少量 JavaScript（如 Turbo 和 Stimulus）实现动态交互，避免复杂的前端框架开销。 2. 开发复杂度 - React：需要学习 JSX、状态管理（如 Redux）、生命周期方法等概念，适合中大型项目，但入门门槛较高。 - Hotwire：基于 Rails 的现有生态，无需编写大量 JavaScript，更贴近传统服务端渲染（SSR）模式，适合快速开发中小型应用。 3. 性能与加载速度 - React：首次加载可能较慢（需下载 JS 包），但后续交互流畅，适合高度动态的单页应用（SPA）。 - Hotwire：页面初始加载快，通过 Turbo 加速页面跳转，减少重复请求，适合内容密集型网站或对性能敏感的应用。 4. 服务器与客户端协作 - React：通常完全运行在客户端，依赖 API 与后端通信。 - Hotwire：保持服务器主导，通过 HTML 响应直接更新页面，客户端仅负责轻量级交互逻辑。 5. 适用场景 - React：适合构建复杂的交互式应用，如社交平台、实时协作工具、仪表盘等。 - Hotwire：适合内容驱动的网站，如博客、电商后台、管理面板，尤其适合已有 Rails 项目的渐进式现代化改造。总结： React 提供强大的灵活性和丰富的生态系统，适合追求极致交互体验的复杂应用；而 Hotwire 更注重简洁性与开发效率，特别适合希望减少前端复杂度、快速交付功能的团队。选择哪种技术取决于项目需求、团队技能和对性能与开发速度的权衡。

入门

客户端 Rails

层叠样式表

Turbo

TypeScript

Stimulus 基础

Webpack

React

Webpacker

与服务器通信

与 ActionCable 实时通信

在 Stimulus 代码中管理状态

React 中的状态管理

使用 Redux 管理状态

使用高级 TypeScript 验证代码

使用 Cypress 进行测试

更多测试与故障排查基础

附录

Hotwire 与 React 对比

Hotwire 与 React 对比

课程内容已锁定