Reactjs: Unexpected token '<' Error

问题:

i am just starting with Reactjs and was writing a simple component to display
li tag and came across this error:

Unexpected token '

I have put the example at jsbin below http://jsbin.com/UWOquRA/1/edit?html,js,console,output

Please let me know what i am doing wrong.

回答1:

UPDATE: In React 0.12+, the JSX pragma is no longer necessary.

---

Make sure include the JSX pragma at the top of your files:

/** @jsx React.DOM */ 

Without this line, the jsx binary and in-browser transformer will leave your files unchanged.

回答2:

I solved it using type = "text/babel"

回答3:

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

回答4:

The issue Unexpected token ' is because of missing the babel preset.

Solution : You have to configure your webpack configuration as follows

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

here .jsx checks both .js and .jsx formats.

you can simply install the babel dependency using node as follows

npm install babel-preset-react 

Thank you

回答5:

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

Look at http://facebook.github.io/react/docs/getting-started.html and take note of the tags, you need those included for JSX to work in the browser.

回答6:

Here is a working example from your jsbin:

HTML:

jsx:

Run this code from a single file and your it should work.

回答7:

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

回答8:

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 script, add type="text/jsx" and this`ll resolve the problem.

回答9:

You can use code like this:

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(, document.getElementById('main-content')); 

And don't forget add

into the body in your html

But in your package.json file you should use this dependencies:

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

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

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

回答10:

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

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

then the below code example will work:

ReactDOM.render(   
Hello, world!
,   document.getElementById('root') );  

回答11:

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.

HTML code:

JS code:

var LikeOrNot = React.createClass({     render: function () {       return (         
Like
       );     } });  ReactDOM.render(,                 document.getElementById('main-content')); 

Hope this solves your issue. :-)

回答12:

In my case, besides the babel presets, I also had to add this to my .eslintrc:

{   "extends": "react-app",   ... } 

文章来源: Reactjs: Unexpected token '