-
Notifications
You must be signed in to change notification settings - Fork 757
React Rails, Coffeescript, JSX and Webpacker
Greg Myers edited this page Oct 3, 2017
·
3 revisions
This guide works on Webpacker 3, based on https://github.com/BookOfGreg/react-rails-example-app/pull/1/files
- Add the cjsx loader to your package.json.
yarn add cjsx-loader
If you're on older versions of Webpacker you may need to add the coffee-loader also as it comes with @rails/webpacker in V3+ .
yarn add coffee-loader
- Add the loaders to webpack.
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
environment.loaders.set('coffee', {
test: /\.coffee$/,
use: ['cjsx-loader', 'coffee-loader']
})
module.exports = environment
- Create your coffee file. The generators for coffeescript will be updated to this style in #792
app/javascript/components/Todo.coffee
import React from 'react'
import PropTypes from 'prop-types'
class Todo extends React.Component
@propTypes =
task: PropTypes.string
render: ->
`<div>
<div>Task: {this.props.task}</div>
</div>`
export default Todo
- Render out your new Coffee + JSX component!
app/views/controller/action.html.erb
<%= react_component 'Todo', { task: 'A working coffee component' } %>