reactjs+webpack中的父子组件分离

首先要吐槽的是国内的文档真心坑啊。最近一年之外的都不能轻信了。
学习reactjs的过程中借鉴了这篇翻译，十分受用。
搭建webpack+reactjs则参考了这篇。
然后遇到了一个问题是：我想把父子组建分开写，而不是像官方文档一样写在一起。但是官方文档并没告诉我怎么分离....
写组件的引入时，官方使用了require(...)样式的语法，但试图拆分父子组件时却百般出错。我有同事使用了es6语法的import来写，但脾气暴躁的我还是喜欢写require。经过很过坑之后，发现国外大神日志，于是学习之。
儿子1： bio.jsx

/** @jsx React.DOM */
var React = require('react');
module.exports = React.createClass({ 
  render: function() {
 return ( <div className="Bio"> 
              <p className="Bio-text">{this.props.text}</p>
           </div>
 ) }
});

儿子2 : avatar.jsx

/** @jsx React.DOM */
var React = require('react');
module.exports = React.createClass({ 
render: function() { 
return ( <div className="Avatar"> 
<img className="Avatar-img" src={this.props.imgSrc} alt="" /> 
</div> ) }
});

父亲：

/** @jsx React.DOM */
var React = require('react');
var Avatar = require('./Avatar.jsx');
var Bio = require('./Bio.jsx');
module.exports = React.createClass({ 
render: function() { return ( 
  <div className="Profile"> 
    <h2 className="Profile-title">{this.props.username}                
    </h2> 
    <div className="Profile-body"> 
      <Avatar imgSrc={this.props.avatar} />
       <Bio text={this.props.bio} /> 
    </div> 
  </div> ) }
});

入口文件：

/** @jsx React.DOM */
var React = require('react');
var ReactDOM = require('react-dom')
var Profile =require('./Profile.jsx');
ReactDOM.render( 
<Profile username="Simon" bio="My name is Simon. I make websites" avatar="http://simonsmith.io/assets/images/me.jpg" />, document.body);

入口文件与之前博客里的入口写的不同，是因为现在都用react-dom来做dom的渲染了。