React/Rails error

Question

I am following a tutorial about how to use React within Rails. My component seems to be throwing an error. Here is my component:

@Lifts = React.createClass
    getInitialState: ->
        lifts: @props.data
    getDefaultProps: ->
        lifts: []
    render: ->
        React.DOM.div
            className: 'lifts'
            React.DOM.h1
                className: 'title'
                'Lifts'
            React.DOM.table
                className: 'table table-bordered'
                React.DOM.thead null, 
                    React.DOM.th null, 'Date'
                    React.DOM.th null, 'Lift Name'
                    React.DOM.th null, 'Weight Lifted'
                    React.DOM.th null, 'Reps Performed'
                    React.DOM.th null, '1 RM'
                React.DOM.tbody null, 
                    for lift in @state.lifts
                        React.createElement Lift, key: lift.id, lift: lift

I get this error from Rails:

SyntaxError: [stdin]:4:1: unexpected indentation

One, can anyone see what my error is? I am basically brand new to coffeescript and I can't see what I'm doing wrong.

Two, for my own information, is coffeescript more used than JSX? I've used the JSX format before and found it easier. If JSX is more used, can anyone recommend a tutorial that uses JSX and Rails?

Can you try to simplify the component a bit until you know which line is giving you a problem, it seems to be an indentation but I can't find where!! Personally I am a bit oppose to the fact of building react component with this syntax. I find it a bit harder to debug as well. Have you considered trying a gem call react_on_rails it makes a clear separation between client js code and ruby on rails framework. — cabolanoz
– cabolanoz, Commented Apr 19, 2017 at 19:14

Julien TASSIN · Accepted Answer · 2017-04-19 20:26:03Z

For your coffee problem, you have a problem line 4. That is a typical coffeescript issue. I does not handle tab and spaces the same way. So you can think and see that it is well indented but its not.

You must delete all indent on your whole line and reindent it the same way than the rest of the code (with tabs or spaces).

Concerning the use of react and coffeescript, IMAO (I work on a coffeescript/rails/es6 webapp) it's far from usable. JSX is way better than coffeescript for react (I also think that ES6 is better than coffeescript in most cases, but, that's an other story).

To use JSX with rails, you must webpack. Here are the 2 solutions for this :

You are a luck person and use rails >= 5

You can use webpacker wich belongs to rails. And can be used instead of sprocket.

You use rails < 5

You can use webpack-rails to replace sprocket too. I use it on my webapp and it works like a charm.

Than you have to create your own webpack configuration and use babel-loader to handle JSX correctly.

Collectives™ on Stack Overflow

React/Rails error

1 Answer 1

You are a luck person and use rails >= 5

You use rails < 5

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

You are a luck person and use rails >= 5

You use rails < 5

Comments

Related