Webpack выбивает ошибку, не понимает синтакс React?

Question

[dhat]

Сел разбиратся с webpack. Смотрю вступительное видео, повторяю за ним. Элементарный проект, но webpack выдает ошибку:

ERROR in ./index.js
Module build failed: SyntaxError: Unexpected token (5:15)

  3 | const App = React.createClass({
  4 |     render() {
> 5 |         return <h1>h1 lol</h1>
    |                ^
  6 |     }
  7 | })
  8 |

index.html:

<section id="target">not rendered yet</section>

index.js:

const React = require('react')

const App = React.createClass({
    render() {
        return <h1>h1 lol</h1>
    }
})

React.render(<App/>, window.document.getElementById('target'))

webpack.config.js:

module.exports = {
    entry: "./index.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { loader: "babel" }
        ]
    }
}

Где ошибка? Мне нужно просто отрендерить фразу для проверки что все работает.

Answer 1

[dhat]

Разобрался. Нужен ReactDOM.render() и модуль react-dom

Answer 2

[Mikhail Osher]

babel-preset-react

Comments

[dhat]

Спасибо, установил babel-preset-react и исправил на:
module.exports = {
entry: "./index.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.js$/, loader: "babel", query: { presets:['react'] } }
]
}
}

Ошибку не выбивает, bundle.js создал, но все равно не рендерится.