- Notifications
You must be signed in to change notification settings - Fork750
React Rails, Coffeescript, JSX and Webpacker
Greg Myers edited this pageOct 3, 2017 ·3 revisions
This guide works on Webpacker 3, based onhttps://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
importReactfrom'react'importPropTypesfrom'prop-types'classTodoextendsReact.Component@propTypes=task:PropTypes.stringrender:-> `<div> <div>Task: {this.props.task}</div> </div>`exportdefault Todo
- Render out your new Coffee + JSX component!
app/views/controller/action.html.erb
<%= react_component 'Todo', { task: 'A working coffee component' } %>