Why not sprinkle your Rails application with React components?
Prerequisites
- Upgrade to Rails 6.x.x
- Be using Webpacker in your application
- Turbolinks
Install React &c.
In your project directory:
bin/rails webpacker:install:react
This will install react react-dom and some Babel packages with yarn. The Babel config and webpacker yml files are updated. (A sample hello world is also created under javascript/packs - should delete this upon studying)
Create a new pack for your component
Under
javascript/packsname a file after the component you are using e.g chonky.js
The basic demo for Chonky looks like this in the new pack file:
// chonky.jsimport * as React from 'react'
import { render } from 'react-dom'
import { setChonkyDefaults } from 'chonky'
import { ChonkyIconFA } from 'chonky-icon-fontawesome'
import { FullFileBrowser } from 'chonky'
setChonkyDefaults({ iconComponent: ChonkyIconFA })
document.addEventListener("turbolinks:load", (e) => {
const el = document.getElementById("chonky-browser")
if (el) {
const files = [
{ id: 'lht', name: 'Projects', isDir: true },
{
id: 'mcd',
name: 'chonky-sphere-v2.png',
thumbnailUrl: 'https://chonky.io/chonky-sphere-v2.png',
},
]
const folderChain = [{ id: 'xcv', name: 'Demo', isDir: true }]
render(<FullFileBrowser files={files} folderChain={folderChain} />, el)
}
})
Add pack tag to application head
Within the head tags of
application.html.erbadd
<%= javascript_pack_tag 'chonky', 'data-turbolinks-track': 'reload' %>
Add element to HTML page passed to render function
<div id="chonky-browser"></div>
