React on Rails
summary
Eighteen months of incremental migration turns a Rails app from untested jQuery spaghetti into a componentized UI using React + JSX with Babel and Webpack (hot reload), CSS modules, and Jest tests and snapshot testing; source maps force splitting Webpack assets out of Sprockets and ultimately replacing Sprockets via webpack-manifest, adding Redux, React Router, React Motion and Immutable.js. Outcomes: ~50-person product team, 10 dev teams, a quarter of the app experimenting with Elm, and an embarrassing 15 different button styles to consolidate.
AI-written summary · about
chapters (10)
- 0:00Start
- 12:05Default Rails Asset Pipeline
- 13:11Adding Webpack - Step 1
- 15:31Registering and Rendering React Components
- 17:53Testing Component Output with Shallow Rendering
- 19:01Testing Component Output with Snapshot Tests
- 19:48Introducing CSS Modules
- 20:51Getting rid of Sprockets
- 22:27Adding Single Page Transitions
- 27:33Using Defined Record Types
related talks
36mFront-End Sadness to Happiness: The React on Rails Story
31mReact.js on Rails
28mBack to React: The Story of Two Apps
18mReact-ing to Rails: Why Ruby on Rails is the best Stop for Web Developer
21mMigrating critical apps to React
28mOverreacting—From React to Hotwire
23mReact-ing to Hotwire
32mThe How, What and Why of Migrating to ReactJS