首先要吐槽的是国内的文档真心坑啊。最近一年之外的都不能轻信了。
学习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的渲染了。
