Why does code format matter when using jsx?

Question

I'm trying to write simple React component.

import React, { Component } from 'react';
export default class App extends Component {
render() {
      return (
         <div>Hello world</div>
      );
   }
}

And all is good. But when I want to format code in such way that I like:

import React, { Component } from 'react';

export default class App extends Component 
{
  render() 
  {
    return     
    (
         <div>Hello world</div>
    );
  }
}

I get the error

Uncaught Error: Invariant Violation: App.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

I've not found any word in any doc about that some code formatting stile is mandatory (I love to see curly braces in single vertical line and can't understand why this is not common JavaScript formatting style). So why code formatting is matter in this case?

P.S. I'm using webpack with babel. Webpack config looks like

var path = require('path');
module.exports = 
{
  devtool: 'eval',
  entry: './src/index',
  output: 
  {
    filename: 'bundle.js',
    path:path.join(__dirname,'public')
  },
  module: 
  {
      loaders:[{
                  test: /\.js[x]?$/,
                  exclude: /node_modules/,
                  loader: 'babel-loader?presets[]=es2015&presets[]=react'
                }]
  },
  resolve: 
  {
    extensions: ['', '.js', '.json']
  }
};