An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
Rails link to React (No API). Yes that's possible!
Rails link to React (No API) Yes that's possible
Everyone will agree that Rails and React combo are a powerful duo! But we all know that building and linking a backend and a frontend take time and resource. Not anymore...
Discover Inertia.js: Inertia is not another javascript framework. Inertia is glue code that easily bring React and Rails together like they was one!
Once setup completed, using inertia is very simple, easy and intuitive.
Imagine be able to render a React component from Rails with a classic render:
The routing is still manage by Rails (Yeah!):
root 'home#show'
Rails home controller:
def show # Rails will render a React Component with props! render inertia: 'Hello', props: { name: 'Mike Taylor' }end
React Hello component
function Hello(props) { return <h1>Hello {props.name}</h1>}export default Hello
Of course we could had send something more complex than a string. It is also easy to return database data. Example:
def show event = Event.find(params[:id]) render inertia: 'Event/Show', props: { event: event.as_json( only: [ :id, :title, :start_date, :description ] ) } end
Ok you got my attention. So what exactly is Inertia?
With Inertia you build apps just like you've always done with your server-side web Rails framework. You use Rails existing functionality for routing, controllers, middleware, authentication, authorization, data fetching, and more.
The only thing that's different is your view layer. Instead of using server-side rendering (eg. ERB templates), the views are JavaScript page components. This allows you to build your entire front-end using React, Vue or Svelte.
Inertia also have option for server side rendering, forms helper, modal helper, validation helper and more.
How can I install and try Inertia?
Create a new rails app with React pre-configure
rails new demo --webpack=reactcd demonpm install @inertiajs/inertia @inertiajs/inertia-react
Add into Gemfile
gem 'inertia_rails'
Install GEM
bundle install
Add to 'app/javascript/packs/application.js'
import { App } from '@inertiajs/inertia-react'import React from 'react'import { render } from 'react-dom'const el = document.getElementById('app')render( <App initialPage={JSON.parse(el.dataset.page)} resolveComponent={name => require(`./Pages/${name}`).default} />, el)
Create a React component:
app/javascript/packs/Pages/hello.js
import React from 'react'function Hello(props) { return <h1>Hello {props.name}</h1>}export default Hello
Then create your route:
config/routes.rb
Rails.application.routes.draw do root 'home#show'end
Create home controler
rails g controller home
class HomeController < ApplicationController def show render inertia: 'Hello', props: { name: 'Mike Taylor' } endend
Run your rails app
rails s
What's next
For complete detail info about Inertia visit there web site at: https://inertiajs.com/
Inertia.js position himself to be a serious and powerful alternative to api. Of course usage in a real big project need to be tested and like everything else, I guess, some limitations will rise. For now the first impression is more than good and the team behind Inertia.js is professional and seem here for the long run.
Conclusion
That's it for this Inertia.js introduction. If you want me to do more inertia post let me know and let me know what you would like me to test?
I am new on twitter so if you want to make me happy
Follow me!: Follow @justericchapman
Original Link: https://dev.to/ericchapman/rails-link-to-react-no-api-yes-that-s-possible-5726
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To