-
在我继续之前发布一些代码例子，我必须提出：reactjs初学者会有一点困难，因为我最近一直用AngularJS代码。到现在为止，我不得不承认，他们帮助我们在UI中做的工作大不相同。主要区别我会发表另一个博客他们之间的对比。
在一个更高的水平，但是，有一些原因，我用了一个稍微险峻的学习路径，当我学习ReactJS：
面向构件：reactjs是面向组件的，这意味着你需要你认为UI元素的一个组成部分。有趣的是，组件可以合并。这意味着一个组件可以有一个或多个内部组件。下面的代码演示了这一点
JSX语法：它使用了一个有趣的JSX（XML）的语法写代码，JSX转换器（预编译器）是用来转换成一个明显的Javaｓｃｒｉｐｔ语法结构
事件代理模型：它遵循事件委托模型来捕获事件
下面是代码中显示的一些关键概念：
装配
事件代理
JSX语法
下面是组件已经实现的内容的简要描述
-输入框元素，用户可以输入它的用户名。在下面的文章中，提到输入框实际上是用户名组件。
- div层的元素，这是用来显示你好，用户名，在下面的文章中，就提到，div层实际上是一个hellotext组件
下面是如何设计它。此外，请找到可以表示以下概念的代码。
SayHello：可以结合元件
打招呼是父组件，包含两个部分。这个父组件是由两个内部组件。组件之一是用户名，它提供给用户的名字输入功能，另一个是hellotext，这是用来显示文字，如你好，世界。这父组件定义以下三种不同的API：
getinitialstate
handlenamesubmit
渲染（这是一个必需的接口，一个组件需要定义渲染来反映如何渲染组件）
/
这是包含两个内部组件的父组件。
组件之一是用户名，它用于允许用户输入他们的名字。
其他成分是hellotext显示/文本如你好，世界
VaR方法sayHello = react.createclass（{
用于设置此状态，
访问hellotext组件后 /显示更新的状态
getinitialstate：函数（）{
返回数据：‘'} {
}，
建议与任何儿童一起捕获事件/事件。
在父级，并设置适当地更新子对象的新状态
HandleNameSubmit：功能（name）{
this.setstate（{数据：名称}）；
}，
渲染方法包括 /两部件如用户名和hellotext
渲染：函数（）{
返回（
）；
}
}）；
用户名组件
用户名组件有以下两种方法：
HandleChange：用来捕捉onchange事件
渲染：用于渲染组件
VaR的用户名= React.createClass（{
HandleChange：函数（）{
VaR的用户名= this.refs.username.getdomnode（）Value.trim（）；
This.props.onNameSubmit（{用户名：用户名}）；
This.refs.username.getDOMNode（）价值= ''；
返回false；
}，
渲染：函数（）{
返回（
）；
}
}）；
hellotext组件
有hellotext组件的渲染组件只有一个方法
渲染：包含代码显示的hellotext成分含量
无功hellotext = react.createclass（{
渲染：函数（）{
返回（
你好，{这个。道具。数据}
）；
}
}）；
如果你想得到所有的代码，我把代码在GitHub上喂reactjs页。请自由发表意见或提出建议。