由ReactJS的Hello world说开来

这篇文章提供了代码实例和在react.js（一个facebook工程师开发的被用于构建用户界面的javascript库）中高水平的概念.这些概念会被详细的发表在下面的文章里.在此，我必须提示如果你是一名reactjs专家并且感觉这些代码需要改善，请您把建议写信给我，我会及时适当的更新这篇文章/代码.

在我继续发表一些代码实例之前，我必须特别的提出：初学reactjs会有一点困难，因为最近我一直在angularjs上写代码.到现在为止，我需要承认他们之间在帮助我们做ui工作时有很大的不同.我将发表另一篇博文对比他们之间的主要差异.

然而，在较高的水平上，下面是一些原因关于我为何在学习 reactjs 时使用了略有些“陡峭”的学习路线：

•     面向组件的：reactjs是面向组件的，也就意味着，需要你将ui元素看作是组件。有趣的是，组件是可组合的。这意味着一个组件可以具有一个或多个内部组件。下面的代码演示了这一点
•     jsx syntax：它使用了一个有趣的jsx（xml式的）语法来编写代码。jsx转换器（一个预编译器）用来将这种语法结构转换为明显的javascript

    事件代理模型：它遵循了事件委托模型，用以捕获事件

下面是一些显示在代码中的关键概念：

•     组件
•     事件代理
•     jsx 语法

以下是组件已实现内容的简要描述

- 输入框元素，用户可输入其用户名。在下面的文章中会提到，这个输入框实际是“username”组件

- div层元素，用于展示“hello, username”。在下面的文章中会提到，这个div层实际是“hellotext”组件

以下是其如何设计的。此外，请找到能代表下面概念的代码。

sayhello: 可组合的元件

sayhello是一个父组件，包含两个组件。这个父组件是由两个内部组件构成。其中一个组件是username，用来为用户提供输入姓名的功能，另一个组件是hellotext，用于展示文本，比如hello,world。这个父组件定义了下列三个不同的api：

1.     getinitialstate
2.     handlenamesubmit
3.     render（这是一个必需的接口，一个组件需要定义render来告诉react响应如何渲染组件） 

/
 // this is the parent component comprising of two inner components
 // one of the component is username which is used to allow user to enter their name
 // other component is hellotext which displays the text such as hello, world
 //
 var sayhello = react.createclass({
 // this is used to set the state, "data" which is 
 // accessed later in hellotext component to display the updated state
 // 
 getinitialstate: function() {
  return {data: 'world'}
 },
 // it is recommended to capture events happening with any children
 // at the parent level and set the new state that updates the children appropriately
 handlenamesubmit: function(name) {
  this.setstate({data: name});
 },
 // render method which is comprised of two components such as username and hellotext
 //
 render: function() {
  return(
  <div>
  <username onnamesubmit={this.handlenamesubmit}/>
  <hellotext data={this.state.data}/>
  </div>
  );
 }
 });

username组件

username组件有下列两个方法：

1.     handlechange：用来捕获onchange事件
2.     render：用于渲染组件

var username = react.createclass({
 handlechange: function() {
  var username = this.refs.username.getdomnode().value.trim();
  this.props.onnamesubmit({username: username });
  this.refs.username.getdomnode().value = '';
  return false;
 },
 render: function() {
  return(
  <form role="form" onchange={this.handlechange}>
   <div classname="input-group input-group-lg">
   <input type="text" classname="form-control col-md-8" placeholder="type your name" ref="username"/>
   </div>
  </form>
  );
 }
 });

hellotext组件

hellotext组件仅有一个方法用于渲染组件

 render：包含了展示hellotext组件内容的代码
 
var hellotext = react.createclass({
  render: function() {
  return (
  <div>
   <h3>hello, {this.props.data}</h3>
  </div>
  );
  }
 });

如果你希望得到全部的代码，我已经将代码挂在 github hello-reactjs page。请各位*评论或给出建议。