React on Rails

LETS GET WHIMSICAL, BITCHES!

This route shows the baseline React on Rails flow: Rails passes props into a server-rendered React component, then the browser hydrates it for client-side interactivity.

Read the SSR tutorial

Hello, Stranger!

What this page shows

  • Controller props. The Rails controller sets @hello_world_props before rendering this view.
  • Server render + hydrate. react_component renders HTML on the server, then React attaches on the client.
  • Fast local iteration. Edit the HelloWorld component while bin/dev is running to watch the demo update.

Inspect these files next

  • app/javascript/src/HelloWorld/
    React source for the generated HelloWorld component.
  • app/controllers/hello_world_controller.rb
    Rails controller that sets the props for this page.
  • app/views/hello_world/index.html.erb
    Rails view that calls react_component for the demo.
  • bin/dev
    Runs Rails and the asset watcher together while you iterate.