React-rails: How do you handle React with turbolink?

[ankitsinghaniyaz]

Help us help you! Please choose one:

• [ ] My app crashes with react-rails, so I've included the stack trace and the exact steps which make it crash.
• [ ] My app doesn't crash, but I'm getting unexpected behavior. So, I've described the unexpected behavior and suggested a new behavior.
• [ ] I'm trying to use react-rails with another library, but I'm having trouble. I've described my JavaScript management setup (eg, Sprockets, Webpack...), how I'm trying to use this other library, and why it's not working.
• [x ] I have another issue to discuss.

---

I am not sure if this is the right place to ask this question. I am trying to use vue.js with rails and I want to keep using Turbolinks. I see that react-rails gem allows us to use Turbolink. I would love to get some tips how can I go about doing this for vue. Any help and pointers are appreciated.

[rmosolgo]

Hi, thanks for asking!

At page load, we try to detect what page events will occur. If we detect Turbolinks, we attach listeners to Turbolinks events which mount & unmount React components in when those events are triggered.

Is that helpful?

[ankitsinghaniyaz]

@rmosolgo
Hi, Thanks for answering. I follow that. Now I understand what is happening. I still have 2 naive questions to ask.

1. What is ReactRailsUJS?
2. Which components will it mount and unmount?

edit

https://github.com/reactjs/react-rails/blob/332608a41fdc79d3b5c2542483fc9c9a05b6559a/lib/assets/javascripts/react_ujs_mount.js

I followed this file and understood that you are using react-data-class to find the attribute and mount them and removing all other instances. and before render you remove all the unwanted nodes.

edit

I understand the js flow now, but can you also tell me about your view helper?
I got an idea about how to go about creating a view helper. I do not need this full power but I can refer this and create.
https://github.com/reactjs/react-rails/blob/master/lib/react/rails/component_mount.rb

Thanks for your help, I will love to get any tips you might have.

[rmosolgo]

The view helper is rather complicated in order to support all kinds of customization, but it boils down to a fairly straightforward HTML generator:

<%= react_component("MyComponent", { prop1: 1, prop2: "two" }) %>

becomes

<div data-react-class="MyComponent" data-react-props="{\"prop1\":1,\"prop2\":\"two\"}"></div>

Basically:

def react_component(name, props) 
 content_tag(:div, data: { :"react-class" => name, props: JSON.dump(props) })
end 

[rmosolgo]

Hope that was helpful!

[abitdodgy]

@rmosolgo the links in your comment are broken. Do you have any other examples how to handle reactjs with Turbolinks?

[rmosolgo]

react_ujs is now built from this directory:

https://github.com/reactjs/react-rails/tree/master/react_ujs