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

我是Rails和ReactJS的新手。React-Rails：.js.jsx文件崩溃Rails应用程序

我一直有on Rails的5.0.2很多渲染一个简单的“Hello World”的成分与反应护栏宝石的问题，在Windows 7

运行如果我包括.js.jsx组件文件夹中的文件，我的应用程序崩溃。有趣的是，如果我将它替换为纯正的.js版本的ReactJS（并且没有其他更改），我的应用程序不会崩溃，并且组件在我的页面上呈现。但是，为了学习，我真的很想学习在我的Rails应用程序中使用JSX，如果有的话。

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

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

我非常感谢您对此事的任何意见或建议！在应用程序/视图/布局/ application.html.erb

错误消息：

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

应用程序/资产/ Javascript角/组件/ 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

应用/视图/索引/ helloworld.html.erb

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

的Gemfile：

# 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'

来源

2017-03-12 ariyo

可以肯定，在安装gem之后，您是否重新启动了开发服务器（rails s）？必须重新启动以为.jsx添加链轮处理器。

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

来源

2017-03-17 17:58:23 rmosolgo

它看起来像你试图在你的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> 
     ); 
    } 
});

来源

2017-03-19 20:07:19 Groovej

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

回答

相关问题