Hotwiring My React Brain

Hi. Have you been writing Rails API-mode json backends for React front ends for the last few years? Me too.

Aji Slater

Development Team Lead, thoughtbot

Attendees

Jeremy
Reed

Relevancy	Interesting
9	5

Notes

React patterns don’t work in Hotwire. Hotwire is the default front-end in Rails 7. Made up of Turbo and Stimulus. Single Page Application (SPA) is a broad term. Hotwire has the same feel. React’s mental model is a tree of components. Each element can render DOM elements. Data can only flow down the tree. Data flow is fundamental (“Data Down”). Network requests are irrelevant. A component gets some props and conditionally renders children. Forget that React makes network calls. Only way to return data back up the tree is actions (“Actions Up”). State changes cause updates.

Rails Guides site example
- Pages, Chapters, and Paragraphs
- Start as if there is no JS
- _navigation_frame.html.erb partial (in layout?)
- show.html.erb hold content
- In React, only way to another frame is back up the tree
- Make first request and receive Chapter 1
- Click link and turbo sends Chapter 2
- Turbo removes old turbo frame and updates the part that needs changing
- Apply turbo frame to pages region
- Data tells link to target a specific frame
- Turbo frame tag has option to set source path
- Adding live in-line editing
- Need to toggle between read and edit mode
- React uses local state and two components, one for each mode
- Hotwire starts with standard Rails controller
- Paragraphs are sent into Kramdown for Markdown rendering
- Move rendering to a partial and wrap it in turbo frame with dom_id
- Add link to RESTful edit route
- Closer we stick to convention the easier this will be
- Edit template is standard Rails form
- Hotwire opens possibilities without JS
- Stimulus adds interactivity
- Adding keydown listener
- Add data-controller to application layout body
- Same controller#action convention as Rails
- Modal wraps a Rails form with Stimulus attributes
- Response scoped to empty turbo frame
Watch Thoughtbot blog for updates to this talk