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 ( 
 
              
{this.props.text}
           
 ) }
});

儿子2 : avatar.jsx

/** @jsx React.DOM */
var React = require('react');
module.exports = React.createClass({ 
render: function() { 
return ( 
 
 
 ) }
});

父亲：

/** @jsx React.DOM */
var React = require('react');
var Avatar = require('./Avatar.jsx');
var Bio = require('./Bio.jsx');
module.exports = React.createClass({ 
render: function() { return ( 
  
 
    
{this.props.username}                
    
 
    
 
      
        
    
 
  
 ) }
});

入口文件：

/** @jsx React.DOM */
var React = require('react');
var ReactDOM = require('react-dom')
var Profile =require('./Profile.jsx');
ReactDOM.render( 
, document.body);

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