Ruby on Rails - adding a simple react component to our app in ruby on rails - ruby on rails tutorial - rails guides - rails tutorial - ruby rails
Step1
- Add the hyperloop gem to our rails (4.0 - 5.1) Gemfile
Step2
- bundle install
step3
- Hyperloop manifest to the application.js file:
// app/assets/javascripts/application.js
...
//= hyperloop-loaderClicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
Step4
- Create our react components, and place them in the hyperloop/components directory
# app/hyperloop/components/hello_world.rb
class HelloWorld < Hyperloop::Component
after_mount do
every(1.second) { mutate.current_time(Time.now) }
end
render do
"Hello World! The time is now: #{state.current_time}"
end
endClicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
Step5
- Components act just like views.
- They are "mounted" using the render_component method in a controller:
# somewhere in a controller:
...
def hello_world
render_component # renders HelloWorld based on method name
end