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.

Solution 1:

I solved it using type = "text/babel"

<script src="js/reactjs/main.js" type = "text/babel"></script>

Solution 2:

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.

Solution 3:

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