Modern Front-End Development for Rails: Webpacker, Stimulus, and React

Rappin, Noel



Improve the user experience for your Rails app with rich, engaging client-side interactions. Learn to use the Rails 6 tools and simplify the complex JavaScript ecosystem. It's easier than ever to build user interactions with the Webpacker gem and Stimulus. You can add great front-end flair without much extra complication. Add React to build an even more extensive set of client-side features. Structure your code for different levels of client-side needs with these powerful options. Add to your toolkit today

It's hard to have a Rails application without integrating some client-side logic. But client-side coding tools, and the Rails tools for integrating with them, all change continuously. Rails 6 simplifies client-side integration with the Webpacker gem. It's the default tool for building client-side assets for use by web browsers. Learn how to use Rails 6 and Webpacker to build rich front-end logic into your Rails applications. The job is even easier with Stimulus, a library that brings Rails conventions to JavaScript tools. Add in some React, a popular framework that automatically updates the browser when your data changes.

Learn the basics of webpack, Webpacker, and TypeScript, and add pizazz to your application. Structure your web application to best manage your state. Learn how to interact with data on the server while still keeping the user experience interactive. Use the type system in TypeScript to expand on JavaScript and help prevent error conditions. Debug and test your front-end application with tools specific to each framework.

There are a lot of ways to do client-side coding, and Rails is here to help.

What You Need:

This book requires Ruby on Rails 6.0+, React 16.8.0+. Other dependencies will be added by Rails.


提升你的 Rails 應用程式的使用者體驗,透過豐富且引人入勝的客戶端互動。學習使用 Rails 6 工具,簡化複雜的 JavaScript 生態系統。透過 Webpacker gem 和 Stimulus,建立使用者互動變得比以往更容易。你可以輕鬆地增加前端特色,而不需要太多額外的複雜性。加入 React,建立更多豐富的客戶端功能。使用這些強大的選項,為不同層次的客戶端需求結構化你的程式碼。立即將它們加入你的工具箱。

在沒有整合一些客戶端邏輯的情況下,很難擁有一個 Rails 應用程式。但是客戶端編碼工具以及與之整合的 Rails 工具都在不斷變化。Rails 6 透過 Webpacker gem 簡化了客戶端整合。它是用於建立供網頁瀏覽器使用的客戶端資產的預設工具。學習如何使用 Rails 6 和 Webpacker,在你的 Rails 應用程式中建立豐富的前端邏輯。有了 Stimulus,一個將 Rails 慣例帶入 JavaScript 工具的庫,這項工作變得更容易。再加上一些 React,一個流行的框架,當你的資料變動時,它會自動更新瀏覽器。

學習 webpack、Webpacker 和 TypeScript 的基礎知識,為你的應用程式增添活力。結構化你的網頁應用程式以最佳管理你的狀態。學習如何在與伺服器互動的同時保持互動的使用者體驗。使用 TypeScript 中的型別系統擴展 JavaScript,並幫助預防錯誤狀況。使用特定於每個框架的工具來進行前端應用程式的除錯和測試。

有很多方法可以進行客戶端編碼,而 Rails 就在這裡提供幫助。

本書需要 Ruby on Rails 6.0+、React 16.8.0+。其他相依性將由 Rails 自動添加。


Noel Rappin is a Principal Developer at Table XI, and the host of the Tech Done Right podcast. Noel is the author of multiple technical books, including Rails 5 Test Prescriptions. Follow Noel on Twitter @noelrap, and online at


Noel Rappin 是 Table XI 的首席開發人員,也是 Tech Done Right podcast 的主持人。Noel 是多本技術書籍的作者,包括 Rails 5 Test Prescriptions。在 Twitter 上可以追蹤 Noel @noelrap,網站為。