Error de sintaxis en ReactJS

Estoy empezando a aprender ReactJS y estoy siguiendo las instrucciones en un libro sobre cómo comenzar. La estructura de mi directorio se ve así:

app/App.js
node_modules
index.html
package.json
webpack.config.js

Creo que el culpable del problema es este mensaje de error de CLI:

ERROR in ./app/App.js
Module build failed: SyntaxError: c:/code/pro-react/my-app/app/App.js: Unexpected token (6:6)
  4 |   render() {
  5 |     return (
> 6 |       <h1>Hello World</h1>
    |       ^
  7 |     );
  8 |   }
  9 | }

Los contenidos deApp.js son:

import React from 'react';

class Hello extends React.Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

React.render(<Hello />, document.getElementById('root'));

Aquí está el contenido depackage.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node_modules/.bin/webpack-dev-server --progress",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "webpack": "^1.12.11",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "react": "^0.14.6"
  }
}

Y los contenidos dewebpack.config.js son:

module.exports = {
  entry: __dirname + "/app/App.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel'
    }]
  }
};

Lanzo la aplicación desde la CLI con el comando:

npm start

Y cuando voy ahttp://localhost:8080 en Dev Tools hay un mensaje de error:

GET http://localhost:8080/bundle.js 404 (Not Found)

Pero como dije, creo que el culpable es que no le gusta la sintaxis, por lo que no hace que elbundle.js archivo. Por favor, hágame saber lo que estoy haciendo mal.

Respuestas a la pregunta(1)

Su respuesta a la pregunta