114

私はReactjsを使い始めたばかりで、
liタグを表示するための単純なコンポーネントを書いていて、このエラーに遭遇しました:

予期しないトークン '<'

http://jsbin.com/UWOquRA/1/edit?html,js,console,outputの下のjsbinに例を置きました

私が間違っていることを教えてください。

4

17 に答える 17

64

type = "text/babel"を使用して解決しました

<script src="js/reactjs/main.js" type = "text/babel"></script>
于 2015-11-02T15:46:25.567 に答える
30

更新: React 0.12 以降では、JSX プラグマは不要になりました。

ファイルの先頭に JSX プラグマを必ず含めてください。

/** @jsx React.DOM */

この行がないと、jsxバイナリおよびブラウザー内トランスフォーマーはファイルを変更しません。

于 2014-01-03T22:18:20.573 に答える
30

問題Unexpected token '<'は、babel プリセットがないためです。

解決策：次のようにwebpack構成を構成する必要があります

{
  test   : /\.jsx?$/,
  exclude: /(node_modules|bower_components)/,
  loader : 'babel',
  query  : {
    presets:[ 'react', 'es2015' ]
  }
}

ここで .jsx は、.js と .jsx の両方の形式をチェックします。

次のようにノードを使用してbabel依存関係を簡単にインストールできます

npm install babel-preset-react

ありがとうございました

于 2016-06-03T07:07:11.247 に答える
8

このエラーがあり、2 日間解決できませんでした。したがって、エラーの修正は非常に簡単です。body に を接続する場所scriptに追加するtype="text/jsx"と、問題が解決します。

于 2017-11-29T13:36:11.750 に答える
7

そのJSXコードをjavascriptにトランスパイル/コンパイルするか、ブラウザー内トランスフォーマーを使用する必要があります

http://facebook.github.io/react/docs/getting-started.htmlを見て、タグに注意してください<script>。JSX がブラウザーで動作するには、タグが含まれている必要があります。

于 2014-01-03T14:03:42.850 に答える
3

jsbin の実際の例を次に示します。

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.9.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="main-content"></div>
</body>
</html>

jsx:

<script type="text/jsx">
/** @jsx React.DOM */
var LikeOrNot = React.createClass({
    render: function () {
      return (
        <p>Like</p>
      );
    }
});

React.renderComponent(<LikeOrNot />, document.getElementById('main-content'));
</script>

単一のファイルからこのコードを実行すると、動作するはずです。

于 2014-05-01T19:13:11.130 に答える
0

次のようなコードを使用できます。

import React from 'react';
import ReactDOM from 'react-dom';

var LikeOrNot = React.createClass({
    displayName: 'Like',
    render: function () {
      return (
        React.createElement("li", null, "Like")
      );
    }
});
ReactDOM.render(<LikeOrNot />, document.getElementById('main-content'));

<div id='main-content'></div>に追加することを忘れないbodyでくださいhtml

ただし、package.json ファイルでは、次の依存関係を使用する必要があります。

  "dependencies": {
...
    "babel-core": "^6.18.2",
    "babel-preset-react": "^6.16.0",
...
}
"devDependencies": {
...   
    "babel": "^6.5.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "jsx-loader": "^0.13.2",
...
}

それは私にとってはうまくいきますが、このオプションで（webpack.config.jsに）webpackも使用しました：

  module: {
    loaders: [
      { 
        test: /\.jsx?$/,         // Match both .js and .jsx files
        exclude: /node_modules/, 
        loader: "babel-loader", 
        query:
        {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
于 2017-01-15T10:53:55.730 に答える