ReactJS Hello World教程：组件、JSX与事件代理详解

ReactJS入门概述

本文提供了代码实例，并介绍了React.js（由Facebook工程师开发、用于构建用户界面的JavaScript库）中的高层概念。这些概念将在后续文章中详细展开。在此需提示：如果您是ReactJS专家且认为代码有改进空间，欢迎来信提出建议，我将及时更新文章与代码。

在继续展示代码实例前，需特别说明：初学者学习ReactJS可能具有一定难度，因为我近期主要使用AngularJS进行开发。目前看来，两者在辅助UI工作方面存在显著差异。我将另发博文对比两者的主要区别。

ReactJS学习路径与核心特性

然而，从宏观层面来看，以下是我在学习ReactJS时选择了一条相对“陡峭”学习路径的原因：

组件导向：ReactJS采用组件导向设计，意味着需将UI元素视为组件。有趣的是，组件具备可组合性，即一个组件可包含一个或多个内部子组件。以下代码展示了这一特性。
JSX语法：该框架使用一种独特的JSX（类XML）语法编写代码。JSX转换器（一种预编译器）负责将此语法结构转换为标准的JavaScript。

事件代理模型：React遵循事件委托模型来捕获和处理事件。

关键概念：组件、事件代理与JSX

以下代码展示了几个关键概念：

组件
事件代理
JSX语法

组件实现细节

以下是组件已实现功能的简要描述：

- 输入框元素：用户可在此输入用户名。在后续文章中会提到，该输入框实际对应“UserName”组件。

- div层元素：用于展示“Hello, userName”。在后续文章中会提到，该div层实际对应“HelloText”组件。

以下是其设计方式。此外，请查阅代表上述概念的代码。

SayHello父组件设计

SayHello：可组合组件

SayHello是一个父组件，包含两个子组件。该父组件由两个内部组件构成：一个是UserName，用于提供输入姓名的功能；另一个是HelloText，用于展示文本（如Hello,world）。该父组件定义了以下三个不同的API：

getInitialState
handleNameSubmit
render（这是一个必需接口，组件需定义render以告知React如何渲染组件）

SayHello组件代码实现


/
 // 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组件

UserName组件包含以下两个方法：

handleChange：用于捕获onChange事件
render：用于渲染组件

UserName组件代码实现


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组件

HelloText组件仅有一个用于渲染组件的方法。

HelloText组件代码实现


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

完整代码获取与反馈

如需获取完整代码，我已将代码托管至GitHub的hello-reactjs页面。欢迎自由评论或提供建议。

ReactJS入门：Hello World组件化架构解析