blocks|key|164679|text|我用type+=“text/BA贝尔”解决了这个问题|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|164680|<script+src="js/reactjs/main.js"+type+=+"text/babel"></script>|code-block|syntax|javascript|164681|entityMap^0|2|H|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>I solved it using <strong>type = "text/babel"</strong></p>

<pre><code>&lt;script src="js/reactjs/main.js" type = "text/babel"&gt;&lt;/script&gt;
</code></pre>


blocks|key|168470|text|更新：在React+0.12%2B中，不再需要JSX杂注。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|168471|168472|确保在文件顶部包含JSX杂注：|168473|/**+@jsx+React.DOM+*/|code-block|syntax|javascript|168474|如果没有此行，jsx二进制文件和浏览器内转换器将保持文件不变。|CODE|168475|entityMap^0|0|3|0|0|0|0|7|3|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|V|8|@]|D|@]|E|$]]|$1|G|3|H|5|6|7|W|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|X|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|Y|8|@$9|Z|A|10|B|P]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

<p><strong>UPDATE:</strong> In React 0.12+, the JSX pragma is no longer necessary.</p>

<hr>

<p>Make sure include the JSX pragma at the top of your files:</p>

<pre><code>/** @jsx React.DOM */
</code></pre>

<p>Without this line, the <code>jsx</code> binary and in-browser transformer will leave your files unchanged.</p>


blocks|key|2762867|text|问题意外令牌'<'是因为缺少巴别塔预设。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2762868|解决方案:您需要配置您的webpack配置，如下所示|2762869|{
++test+++:+/\.jsx?$/,
++exclude:+/(node_modules%7Cbower_components)/,
++loader+:+'babel',
++query++:+{
++++presets:[+'react',+'es2015'+]
++}
}|code-block|syntax|javascript|2762870|在这里，.jsx同时检查.js和.jsx格式。|2762871|您只需使用node安装babel依赖项，如下所示|2762872|npm+install+babel-preset-react|2762873|谢谢|2762874|entityMap^0|2|7|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|12|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|14|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|V|$]]

<p>The issue <strong>Unexpected token '&lt;'</strong> is because of missing the babel preset.</p>

<p>Solution : You have to configure your webpack configuration as follows</p>

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

<p>here .jsx checks both .js and .jsx formats.</p>

<p>you can simply install the babel dependency using node as follows</p>

<pre><code>npm install babel-preset-react
</code></pre>

<p>Thank you</p>


blocks|key|2762855|text|在我的例子中，我没有在脚本标记中包含type属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2762856|<script+type="text/jsx">|code-block|syntax|javascript|2762857|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>in my case, i had failed to include the type attribute on my script tag.</p>

<pre><code>&lt;script type="text/jsx"&gt;
</code></pre>


blocks|key|2975903|text|我有这个错误，无法为两个days.So解决这个问题，修复错误非常简单。在body中，在连接script的地方添加type="text/jsx"，这样就可以解决问题了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2975904|entityMap^0|19|6|1K|F|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>I have this error and could not solve this for two days.So the fix of error is very simple.
In body ,where you connect your <code>script</code>, add <code>type="text/jsx"</code> and this`ll resolve the problem.</p>


blocks|key|166752|text|您需要将JSX代码转换/编译为javascript，或者使用浏览器内的transformator|type|unstyled|depth|inlineStyleRanges|entityRanges|data|166753|查看http://facebook.github.io/react/docs/getting-started.html并注意<script>标记，您需要包含这些标记才能在浏览器中工作。|offset|length|style|CODE|166754|entityMap|0|LINK|mutability|MUTABLE|url|http://facebook.github.io/react/docs/getting-started.html^0|0|1Q|8|2|1L|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@$D|R|E|S|F|G]]|9|@$D|T|E|U|1|V]]|A|$]]|$1|H|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

<p>You need to either transpile/compile that JSX code to javascript or use the in-browser transformator</p>

<p>Look at <a href="http://facebook.github.io/react/docs/getting-started.html">http://facebook.github.io/react/docs/getting-started.html</a> and take note of the <code>&lt;script&gt;</code> tags, you need those included for JSX to work in the browser.</p>


blocks|key|165699|text|下面是jsbin中的一个工作示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|165700|HTML：|165701|<!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>|code-block|syntax|javascript|165702|jsx：|165703|<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>|165704|从一个单独的文件运行这段代码，它应该可以工作。|165705|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Here is a working example from your jsbin:</p>

<p>HTML:</p>

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

<p>jsx:</p>

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

React.renderComponent(&lt;LikeOrNot /&gt;, document.getElementById('main-content'));
&lt;/script&gt;
</code></pre>

<p>Run this code from a single file and your it should work.</p>


blocks|key|165835|text|如果你像我一样容易犯愚蠢的错误，也要检查你的package.json是否包含你的巴别塔预设：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|165836|++"babel":+{
++++"presets":+[
++++++"env",
++++++"react",
++++++"stage-2"
++++]
++},|code-block|syntax|javascript|165837|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you're like me and prone to silly mistakes, also check your package.json if it contains your babel preset:</p>

<pre><code>  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },
</code></pre>


blocks|key|2763272|text|检查.babelrc是否在应用程序根文件夹中，而不是子文件夹中。如果是这种情况，请将文件移动到根目录。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2763273|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Check if .babelrc is inside your application root folder, not inside a subfolder.  if that's the case move file to root.</p>


blocks|key|2762884|text|为了正确解析标签，您需要在脚本中使用这个babel版本：https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js和属性"type='text/babel'“。此外，您的自定义脚本应该在"body“标记内。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2762885|entityMap|0|LINK|mutability|MUTABLE|url|https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js^0|S|1V|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>For correct tag parsing you'll need to use this babel version : <a href="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js" rel="nofollow">https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js</a>  and attribute "type='text/babel'" in the script. Besides, your custom script should be within   "body" tags.  </p>


blocks|key|2975737|text|如果我们考虑您的实际站点配置，那么您需要在头部运行ReactJS|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2975738|++
<script+src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>|code-block|syntax|javascript|2975739|并将属性添加到js文件中-+type="text/babel“，如下所示|2975740|<script+src="../js/r1HeadBabel.js"+type="text/babel"></script>|2975741|然后，下面的代码示例将起作用：|2975742|ReactDOM.render(
++<h1>Hello,+world!</h1>,
++document.getElementById('root')
);+|2975743|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>if we consider your real site configuration, than you need to run ReactJS in the head</p>

<pre><code>&lt;!-- Babel ECMAScript 6 injunction --&gt;  
&lt;script src="https://unpkg.com/babel-standalone@6/babel.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>and add attribute to your js file - type="text/babel" like</p>

<pre><code>&lt;script src="../js/r1HeadBabel.js" type="text/babel"&gt;&lt;/script&gt;
</code></pre>

<p>then the below code example will work:</p>

<pre><code>ReactDOM.render(
  &lt;h1&gt;Hello, world!&lt;/h1&gt;,
  document.getElementById('root')
); 
</code></pre>


blocks|key|165812|text|使用以下代码。我添加了对React和React+DOM的引用。使用ES6/Babel将JS代码转换为普通的JavaScript。注意，Render方法来自ReactDOM，并确保render方法有一个在DOM中指定的目标。有时，您可能会遇到render()方法找不到目标元素的问题。这是因为react代码是在DOM呈现之前执行的。为了解决这个问题，使用jQuery+ready()来调用React的render()方法。这样，您就可以确保首先呈现DOM。你也可以在你的应用脚本中使用defer属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|165813|HTML代码：|165814|<!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>|code-block|syntax|javascript|165815|JS代码：|165816|var+LikeOrNot+=+React.createClass({
++++render:+function+()+{
++++++return+(
++++++++<li>Like</li>
++++++);
++++}
});

ReactDOM.render(<LikeOrNot+/>,
++++++++++++++++document.getElementById('main-content'));|165817|希望这能解决你的问题。:-)|165818|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Use the following code. I have added reference to React and React DOM. Use ES6/Babel to transform you JS code into vanilla JavaScript. Note that Render method comes from ReactDOM and make sure that render method has a target specified in the DOM.
Sometimes you might face an issue that the render() method can't find the target element. This happens because the react code is executed before the DOM renders. To counter this use jQuery ready() to call the render() method of React. This way you will be sure about DOM being rendered first. You can also use defer attribute on your app script.</p>

<p>HTML code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=utf-8 /&gt;
&lt;title&gt;JS Bin&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id='main-content'&gt;&lt;/div&gt;
&lt;script src="CDN link to/react-15.1.0.js"&gt;&lt;/script&gt;
&lt;script src="CDN link to/react-dom-15.1.0.js"&gt;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>JS code:</p>

<pre><code>var LikeOrNot = React.createClass({
    render: function () {
      return (
        &lt;li&gt;Like&lt;/li&gt;
      );
    }
});

ReactDOM.render(&lt;LikeOrNot /&gt;,
                document.getElementById('main-content'));
</code></pre>

<p>Hope this solves your issue. :-)</p>


blocks|key|2762898|text|您可以使用如下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2762899|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'));|code-block|syntax|javascript|2762900|不要忘记将<div+id='main-content'></div>添加到html中的body中|offset|length|style|CODE|2762901|但在package.json文件中，您应该使用以下依赖关系：|2762902|++"dependencies":+{
...
++++"babel-core":+"%5E6.18.2",
++++"babel-preset-react":+"%5E6.16.0",
...
}
"devDependencies":+{
...+++
++++"babel":+"%5E6.5.2",
++++"babel-loader":+"%5E6.2.7",
++++"babel-preset-es2015":+"%5E6.18.0",
++++"jsx-loader":+"%5E0.13.2",
...
}|2762903|这是我的工作，但我也使用了webpack，带有以下选项(转换为webpack.config.js)：|2762904|++module:+{
++++loaders:+[
++++++{+
++++++++test:+/\.jsx?$/,+++++++++//+Match+both+.js+and+.jsx+files
++++++++exclude:+/node_modules/,+
++++++++loader:+"babel-loader",+
++++++++query:
++++++++{
++++++++++presets:+['es2015',+'react']
++++++++}
++++++}
++++]
++}|2762905|entityMap^0|0|0|5|T|11|4|17|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]|$I|13|J|14|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|U|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|V|$]]

<p>You can use code like this:</p>

<pre><code>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(&lt;LikeOrNot /&gt;, document.getElementById('main-content'));
</code></pre>

<p>And don't forget add <code>&lt;div id='main-content'&gt;&lt;/div&gt;</code> into the <code>body</code> in your <code>html</code></p>

<p>But in your package.json file you should use this dependencies:</p>

<pre><code>  "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",
...
}
</code></pre>

<p>It's work for me but i used webpack also, with this options (into webpack.config.js):</p>

<pre><code>  module: {
    loaders: [
      { 
        test: /\.jsx?$/,         // Match both .js and .jsx files
        exclude: /node_modules/, 
        loader: "babel-loader", 
        query:
        {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
</code></pre>


blocks|key|164691|text|在我的例子中，除了babel预置之外，我还必须在我的.eslintrc中添加这个|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|164692|{
++"extends":+"react-app",
++...
}|code-block|syntax|javascript|164693|entityMap^0|9|5|Q|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>In my case, besides the <code>babel</code> presets, I also had to add this to my <code>.eslintrc</code>:</p>

<pre><code>{
  "extends": "react-app",
  ...
}
</code></pre>


blocks|key|168605|text|我今天刚开始学习React，也面临着同样的问题。下面是我写的代码。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|168606|<script+type="text/babel">
++++class+Hello+extends+React.Component+{
++++++++render(){
++++++++++++return+(
++++++++++++++++<div>
++++++++++++++++++++<h1>Hello+World</h1>
++++++++++++++++</div>
++++++++++++)
++++++++}
++++}
++++ReactDOM.render(
++++++++<Hello/>
++++++++document.getElementById('react-container')
++++)


</script>|code-block|syntax|javascript|168607|正如您所看到的，在使用<Hello/>之后，我漏掉了一个逗号(，)。错误本身说明了我们需要查看哪一行。|168608|​|168609|📷|atomic|168610|168611|因此，一旦我在ReactDOM.render()函数的第二个参数前添加了一个逗号，一切都开始正常工作。|168612|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/606fa9c9e89965547bf5428d7821b935.png|imageAlt^0|8|5|0|0|B|8|0|0|0|1|0|0|0|7|H|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1A|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|R|3|N|5|6|7|1F|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11|12|-4]]]]

<p>I just started learning <code>React</code> today and was facing the same problem. Below is the code I had written.</p>



<pre><code>&lt;script type="text/babel"&gt;
    class Hello extends React.Component {
        render(){
            return (
                &lt;div&gt;
                    &lt;h1&gt;Hello World&lt;/h1&gt;
                &lt;/div&gt;
            )
        }
    }
    ReactDOM.render(
        &lt;Hello/&gt;
        document.getElementById('react-container')
    )


&lt;/script&gt;
</code></pre>

<p>And as you can see that I had missed a comma (,) after I use <code>&lt;Hello/&gt;</code>. And error itself is saying on which line we need to look. </p>

<p><a href="https://i.stack.imgur.com/2kgrE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2kgrE.png" alt="enter image description here"></a></p>

<p>So once I add a comma before the second parameter for the <code>ReactDOM.render()</code> function, all started working fine.</p>


blocks|key|168651|text|这是另一种方法，你可以这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|168652|<head>
++++<title>Parcel+Sandbox</title>
++++<meta+charset="UTF-8"+/>
</head>

<body>
+++++<div+id="app"></div>

++++<script+src="src/index.js"></script>
</body>

</html>|code-block|syntax|javascript|168653|路径为src/index.js的index.js文件|168654|import+React+from+"react";
import+{+render+}+from+"react-dom";

import+"./styles.scss";

const+App+=+()+=>+(
++<div>
++++<h1>Hello+test</h1>
++</div>
);

render(<App+/>,+document.getElementById("app"));|168655|使用此package.json将使您快速启动和运行|168656|{
++"name":+"test-app",
++"version":+"1.0.0",
++"description":+"",
++"main":+"index.html",
++"scripts":+{
++++"start":+"parcel+index.html+--open",
++++"build":+"parcel+build+index.html"
++},
++"dependencies":+{
++++"react":+"16.2.0",
++++"react-dom":+"16.2.0",
++++"react-native":+"0.57.5"
++},
++"devDependencies":+{
++++"@types/react-native":+"0.57.13",
++++"parcel-bundler":+"%5E1.6.1"
++},
++"keywords":+[]
}|168657|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>heres another way you can do it
html 
    </p>

<pre><code>&lt;head&gt;
    &lt;title&gt;Parcel Sandbox&lt;/title&gt;
    &lt;meta charset="UTF-8" /&gt;
&lt;/head&gt;

&lt;body&gt;
     &lt;div id="app"&gt;&lt;/div&gt;

    &lt;script src="src/index.js"&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>index.js file with path src/index.js</p>

<pre><code>import React from "react";
import { render } from "react-dom";

import "./styles.scss";

const App = () =&gt; (
  &lt;div&gt;
    &lt;h1&gt;Hello test&lt;/h1&gt;
  &lt;/div&gt;
);

render(&lt;App /&gt;, document.getElementById("app"));
</code></pre>

<p>use this package.json will get u up and running quickly</p>

<pre><code>{
  "name": "test-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "react": "16.2.0",
    "react-dom": "16.2.0",
    "react-native": "0.57.5"
  },
  "devDependencies": {
    "@types/react-native": "0.57.13",
    "parcel-bundler": "^1.6.1"
  },
  "keywords": []
}
</code></pre>


blocks|key|2976097|text|不过，我的.babelrc配置文件中有所有合适的babel加载器。这个带有parcel-bundler的构建脚本在手动页面刷新时在浏览器控制台中产生了意外的令牌错误<和mime类型错误。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2976098|"scripts":+{
++++"build":+"parcel+build+ui/index.html+--public-url+./",
++++"dev":+"parcel+watch+ui/index.html"
+}|code-block|syntax|javascript|2976099|更新构建脚本为我修复了这些问题。|2976100|"scripts":+{
++++"build":+"parcel+build+ui/index.html",
++++"ui":+"parcel+watch+ui/index.html"
+}|2976101|entityMap^0|1G|15|0|0|0|G|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>Although, I had all proper babel loaders in my .babelrc config file. This <strong>build script with parcel-bundler</strong> was producing the unexpected token error &lt; and mime type errors in the browser console for me on manual page refresh.</p>

<pre><code>"scripts": {
    "build": "parcel build ui/index.html --public-url ./",
    "dev": "parcel watch ui/index.html"
 }
</code></pre>

<p>Updating the build script fixed the issues for me.</p>

<pre><code>"scripts": {
    "build": "parcel build ui/index.html",
    "ui": "parcel watch ui/index.html"
 }
</code></pre>


<p>i am just starting with Reactjs and was writing a simple component to display 
<br />
<code>li</code> tag and came across this error: </p>

<blockquote>
  <p>Unexpected token '&lt;'</p>
</blockquote>

<p>I have put the example at jsbin below
<a href="http://jsbin.com/UWOquRA/1/edit?html,js,console,output">http://jsbin.com/UWOquRA/1/edit?html,js,console,output</a></p>

<p>Please let me know what i am doing wrong.</p>


Reactjs: Unexpected token '<' Error

jQuery

我刚刚开始使用Reactjs，并且编写了一个简单的组件来显示li标记，并遇到此错误：意外标记'<‘我已经将示例放在下面的jsbin中。请告诉我我做错了什么。

问Reactjs:意外的标记'<‘错误
EN

回答 17

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Reactjs:意外的标记'<‘错误EN

回答 17

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Reactjs:意外的标记'<‘错误
EN