React and webpack appropriate loader error - reactjs

Question

Hi I'm new in react I just starting to learn reactjs.
I have some problems and i don't know how to fix it.
This is my package.json file
{
"name": "react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "5.8.*",
"babel-loader": "5.3.*",
"react": "0.13.*",
"webpack": "1.12.*",
"webpack-dev-server": "1.10.*"
}
}
webpack.config,js file
module.exports = {
entry: [
'./src/App.js'
],
output: {
path: __dirname,
filename: 'app.js'
},
module: {
loader: [{
test: /\.jsx?$/,
loader: 'babel'
}]
}
};
and app.js file
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>alo</h1>
</div>
)
}
}
React.render(<App />, document.getElementById('app'));
and the error when I run webpack
ERROR in ./src/App.js
Module parse failed: C:\Users\mkrtc\Desktop\react\src\App.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react';
|
| class App extends React.Component {
# multi main

Answer 1

You need to set up your babel configuration. Unlike babel 5, Babel 6 doesn't do anything out of the box. plugins and presets need to set. Create a .bablerc file at the root level like this:
"presets": [
"react",
"stage-0"
],
this enables the features from presets react and stage-0