<Surface> is OK，but do not render <Group> component

[lvanwenhai]

I'm new for react-canvas ,Now I'm using gulp+webpack+es6+react15 to write react-canvas demo,there is only a canvas redenered.no Group element,In fact it should render a circle on the top-left of the canvas

---

this is the main.js

'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import { Surface, Group, Image, Text, FontFace } from 'react-canvas'
class App extends React.Component{
constructor(props) {
super(props);
}

bindClick(){

}   

getSize () {
  return document.getElementById('main').getBoundingClientRect();
}

getPageStyle() {
  var size = this.getSize();
  return {
    width:20,
    height: 20,
    left:20,
    top:20,
    backgroundColor: '#eee',
    borderRadius:10
  }
}  

getTitleStyle() {
  return {
    top: 32,
    left: 80,
    width: this.props.width,
    height: 18,
    fontSize: 14,
    lineHeight: 18
  };
}

render(){
  var size = this.getSize();
  return  <Surface top={0} left={0} width={size.width} height={size.height}>
              <Group style={this.getPageStyle()} onClick={this.bindClick}>
              </Group>
          </Surface>
}

}

ReactDOM.render(<App/>, document.getElementById('main'));

next is my webpack.config file

var path = require('path');
module.exports = {
cache: true,
watch: true,
entry: './app/main',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015'],
retainLines: true
}
},
],
postLoaders: [
{ loader: "transform?brfs" }
]
},
resolve: {
extensions: ['', '.js', '.json', '.jsx']
}
};