React Rails, Coffeescript, JSX and Webpacker

This guide works on Webpacker 3, based on https://github.com/BookOfGreg/react-rails-example-app/pull/1/files

1. 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

2. 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

3. 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

4. Render out your new Coffee + JSX component!

app/views/controller/action.html.erb

<%= react_component 'Todo', { task: 'A working coffee component' } %>