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應用程序

回答

相關問題