React-Rails：.js.jsx 文件使 Rails 应用程序崩溃

Question

我是 Rails 和 ReactJS 的新手。

在 Windows 7 上运行的 Rails 5.0.2 上使用 react-rails gem 渲染一个简单的“Hello World”组件时遇到了很多问题。

如果我在 components 文件夹中包含一个 .js.jsx 文件，我的应用程序会崩溃。有趣的是，如果我用普通的 .js 版本的 ReactJS 替换它（并且不做任何更改），我的应用程序不会崩溃并且组件会呈现在我的页面上。但是，我真的很想学习在我的 Rails 应用程序中使用 JSX，以供学习（如果有的话）。

它说我有一个 SyntaxError，但这只会让我感到困惑，因为使用常规 JS 版本不会引发此错误。所以我猜 JSX 没有被转译成普通的 JavaScript 或其他东西？ react-rails 没有这个内置的吗？此错误是否与我的 Gemfile 中缺少的 Gem 有关？

This is the closest SO answer I found with the same problem.我尝试降级到 4.2.5.1，但仍然遇到同样的问题。

我非常感谢任何关于此事的建议或指示！

app/views/layouts/application.html.erb 中的错误消息：

SyntaxError: Invalid character
...          
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

app/assets/javascripts/components/main.js.jsx

/** 
 * @jsx React.DOM 
 */

var Main = React.createClass({
    render() {
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        );
    }
});
//I have also tried using React.renderComponent and gotten the same result
//I've also considered using class Main extends Component 

app/views/index/helloworld.html.erb

<div id="content">
    ...
    <%= react_component('Main') %>
    //I have also tried <%= react_component 'Main' %> and gotten the same result
    ...
</div>

宝石文件：

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '5.0.2'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platform: :mri
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console', '>= 3.3.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

# Fix issues with running Rails on Windows
gem 'coffee-script-source', '1.8.0' 

gem 'react-rails', '~> 1.7', '>= 1.7.1'
gem 'jquery-rails', '~> 4.1', '>= 4.1.1'

Answer 1

可以肯定的是，您是否在安装 gem 后重新启动了您的开发服务器 (rails s)？必须重新启动它才能为.jsx 添加 Sprockets 处理器。

你能添加完整的Gemfile.lock 吗？我有兴趣查看 Sprockets 版本并查看您使用的 ExecJS 后端。

Answer 2

您似乎试图在 js.jsx 组件中使用 ES6 语法。

这里

var Main = React.createClass({
 -->>> render() {
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        );
    }
});

这应该是：

var Main = React.createClass({
    render: function(){
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        );
    }
});