Reactjs：意外的标记“<”错误
我刚刚开始使用Reactjs，并正在编写一个简单的组件来显示
li标签，并遇到这个错误：
意外的标记“<”
我把这个例子放在http://jsbin.com/UWOquRA/1/edit?html,js,console,output下的jsbin
请让我知道我做错了什么。
更新：在React 0.12+中，JSX杂注不再是必需的。
确保在您的文件顶部包含JSX杂注：
/** @jsx React.DOM */
如果没有这一行， jsx二进制和浏览器内的转换器将保持文件不变。
我使用type =“text / babel”解决了这个问题
<script src="js/reactjs/main.js" type = "text/babel"></script>
在我的情况下，我没有在我的脚本标签中包含type属性。
<script type="text/jsx">
问题意外的标记“<”是因为缺less巴贝尔预设。
解决scheme：您必须按照以下步骤configuration您的webpackconfiguration
{ test :/\.jsx?$/, exclude:/(node_modules|bower_components)/, loader :'babel', query :{ presets:['react','es2015'] } }
这里.jsx检查.js和.jsx格式。
你可以简单地使用节点安装babel依赖项，如下所示
npm install babel-preset-react
谢谢
您需要将JSX代码转换/编译为javascript或使用浏览器内转换器
看一下http://facebook.github.io/react/docs/getting-started.html并记下;<script>标签，你需要JSX包含在浏览器中。
下面是你的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>
从一个文件运行这个代码，你应该可以工作。
为了正确的标签parsing，你需要使用这个babel版本： https : //cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js和属性“type ='text / babel'”在脚本中。 另外，你的自定义脚本应该在“body”标签内。
你可以使用这样的代码：
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'));
别忘了在你的html添加<div id='main-content'></div>到body中
但是在你的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，这个选项（进入webpack.config.js）：
module: { loaders: [ { test: /\.jsx?$/, // Match both .js and .jsx files exclude: /node_modules/, loader: "babel-loader", query: { presets: ['es2015', 'react'] } } ] }
在我的情况下，除了babel预设，我还必须添加到我的.eslintrc ：
{ "extends": "react-app", ... }
如果我们考虑你的真实网站configuration，比你需要在头上运行ReactJS
<!-- Babel ECMAScript 6 injunction --> <script src="babel-standalone@6/babel.min.js"></script>
并添加属性到你的js文件 – type =“text / babel”之类的
<script src="../js/r1HeadBabel.js" type="text/babel"></script>
那么下面的代码示例将工作：
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );
使用下面的代码。 我添加了对React和React DOM的引用。 使用ES6 / Babel将您的JS代码转换为vanilla JavaScript。 请注意，Render方法来自ReactDOM，并确保render方法具有在DOM中指定的目标。 有时你可能会面临render（）方法找不到目标元素的问题。 发生这种情况是因为反应代码在DOM呈现之前执行。 为了对付这个，使用jQuery ready（）来调用React的render（）方法。 这样你就可以确定首先渲染DOM。 您也可以在应用程序脚本上使用defer属性。
HTML代码：
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div id='main-content'></div> <script src="CDN link to/react-15.1.0.js"></script> <script src="CDN link to/react-dom-15.1.0.js"></script> </body> </html>
JS代码：
var LikeOrNot = React.createClass({ render: function () { return ( <li>Like</li> ); } }); ReactDOM.render(<LikeOrNot />, document.getElementById('main-content'));
希望这可以解决你的问题。 🙂
