This post is also published in blog.saeloun.com
With the React-Rails gem,
we can render React components within our DOM using the
react_component view helper.
We simply need to provide the component name
and its props as arguments.
When the page changes,
the React-Rails gem takes care of mounting the component automatically.
the components won’t be mounted automatically.
In such a scenario,
we have to manually mount the React components by using,
Let’s check out an example,
In the below form, there are two react components for the phone number and departure time fields,
We are attaching this form to DOM by a JS request but those react components won’t mount when the server generated elements are attached to DOM.
React-rails gem allows us to manually mount the react component by triggering
This function call will mount all the react components that are on the page.
In conclusion, manually mounting React components can be a powerful technique for web developers seeking greater control and flexibility over their applications. Whether we’re building a single-page application or a more complex web platform, understanding how to manually mount React components can help us optimize performance and improve the user experience.