React: Syntax Error – Unexpected Token <

I’ve just started to learn React. I followed some of tutorials. When I run sample code from all of tutorials above, I was getting SyntaxError: Unexpected token error like this:

...
ERROR in ./app/main.jsx
Module build failed: SyntaxError: /home/edward/learn/react-webpack-cookbook/app/main.jsx: Unexpected token (7:17)
  5 | 
  6 | function main() {
> 7 |     React.render(<Hello />, document.getElementById('app'));
    |                  ^
  8 | }
  9 | 
    at Parser.pp.raise (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/util.js:91:8)
    at Parser.pp.parseExprAtom (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/expression.js:507:12)
    at Parser.pp.parseExprSubscripts (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/expression.js:260:19)
    at Parser.pp.parseMaybeUnary (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/expression.js:240:19)
    at Parser.pp.parseExprOps (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/expression.js:171:19)
    at Parser.pp.parseMaybeConditional (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/expression.js:153:19)
    at Parser.pp.parseMaybeAssign (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/expression.js:120:19)
    at Parser.pp.parseExprListItem (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/expression.js:966:16)
    at Parser.pp.parseCallExpressionArguments (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/expression.js:336:20)
 @ multi main
webpack: bundle is now VALID.

I found some working React project starter kit (here and here). I noticed that they use BabelJS 5 and mine is BabelJS 6. BabelJS released the new major version a few days ago (29-Oct) and made breaking changes.

So, in order to use BabelJS 6 with React and ES6, we need to use babel-preset-react and babel-preset-es2015 by running:

npm install --save-dev babel-preset-react babel-preset-es2015

And then, create a .babelrc file in your root project:

{
  "presets": ["es2015", "react"]
}

In your webpack.config.js, you need to tweak your *.jsx loader to use babel-preset-react:

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

After that, you can compile your React code without getting syntax error.