由ReactJS的Hello world说开来
这篇文章提供了代码实例和在React.js（一个Facebook工程师开发的被用于构建用户界面的Javascript库）中高水平的概念.这些概念会被详细的发表在下面的文章里.在此，我必须提示如果你是一名ReactJS专家并且感觉这些代码需要改善，请您把建议写信给我，我会及时适当的更新这篇文章/代码.
在我继续发表一些代码实例之前，我必须特别的提出：初学ReactJS会有一点困难，因为最近我一直在AngularJS上写代码.到现在为止，我需要承认他们之间在帮助我们做UI工作时有很大的不同.我将发表另一篇博文对比他们之间的主要差异.
然而，在较高的水平上，下面是一些原因关于我为何在学习ReactJS时使用了略有些“陡峭”的学习路线：
- 面向组件的：ReactJS是面向组件的，也就意味着，需要你将UI元素看作是组件。有趣的是，组件是可组合的。这意味着一个组件可以具有一个或多个内部组件。下面的代码演示了这一点
- JSXSyntax：它使用了一个有趣的JSX（XML式的）语法来编写代码。JSX转换器（一个预编译器）用来将这种语法结构转换为明显的JavaScript
事件代理模型：它遵循了事件委托模型，用以捕获事件
下面是一些显示在代码中的关键概念：
- 组件
- 事件代理
- JSX语法
以下是组件已实现内容的简要描述
-输入框元素，用户可输入其用户名。在下面的文章中会提到，这个输入框实际是“UserName”组件
-div层元素，用于展示“Hello,userName”。在下面的文章中会提到，这个div层实际是“HelloText”组件
以下是其如何设计的。此外，请找到能代表下面概念的代码。
SayHello:可组合的元件
SayHello是一个父组件，包含两个组件。这个父组件是由两个内部组件构成。其中一个组件是UserName，用来为用户提供输入姓名的功能，另一个组件是HelloText，用于展示文本，比如Hello,world。这个父组件定义了下列三个不同的API：
- getInitialState
- handleNameSubmit
- render（这是一个必需的接口，一个组件需要定义render来告诉React响应如何渲染组件）
/
//Thisistheparentcomponentcomprisingoftwoinnercomponents
//OneofthecomponentisUserNamewhichisusedtoallowusertoentertheirname
//OthercomponentisHelloTextwhichdisplaysthetextsuchasHello,World
//
varSayHello=React.createClass({
//Thisisusedtosetthestate,"data"whichis
//accessedlaterinHelloTextcomponenttodisplaytheupdatedstate
//
getInitialState:function(){
return{data:'World'}
},
//Itisrecommendedtocaptureeventshappeningwithanychildren
//attheparentlevelandsetthenewstatethatupdatesthechildrenappropriately
handleNameSubmit:function(name){
this.setState({data:name});
},
//RendermethodwhichiscomprisedoftwocomponentssuchasUserNameandHelloText
//
render:function(){
return(
<div>
<UserNameonNameSubmit={this.handleNameSubmit}/>
<HelloTextdata={this.state.data}/>
</div>
);
}
});
UserName组件
UserName组件有下列两个方法：
- handleChange：用来捕获onChange事件
- render：用于渲染组件
varUserName=React.createClass({
handleChange:function(){
varusername=this.refs.username.getDOMNode().value.trim();
this.props.onNameSubmit({username:username});
this.refs.username.getDOMNode().value='';
returnfalse;
},
render:function(){
return(
<formrole="form"onChange={this.handleChange}>
<divclassName="input-groupinput-group-lg">
<inputtype="text"className="form-controlcol-md-8"placeholder="TypeYourName"ref="username"/>
</div>
</form>
);
}
});
HelloText组件
HelloText组件仅有一个方法用于渲染组件
render：包含了展示HelloText组件内容的代码
varHelloText=React.createClass({
render:function(){
return(
<div>
<h3>Hello,{this.props.data}</h3>
</div>
);
}
});
如果你希望得到全部的代码，我已经将代码挂在githubhello-reactjspage。请各位自由评论或给出建议。