ReactJS 的 Hello world 示例程序 已翻译 100%

oschina 投递于 2014/08/14 08:20 (共 4 段, 翻译完成于 08-27)
阅读 9868
收藏 41
4
加载中

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

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

袁玉明
翻译于 2014/08/14 21:58
2

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

  • 面向组件的:ReactJS是面向组件的,也就意味着,需要你将UI元素看作是组件。有趣的是,组件是可组合的。这意味着一个组件可以具有一个或多个内部组件。下面的代码演示了这一点

  • JSX Syntax:它使用了一个有趣的JSX(XML式的)语法来编写代码。JSX转换器(一个预编译器)用来将这种语法结构转换为明显的JavaScript

  • 事件代理模型:它遵循了事件委托模型,用以捕获事件

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

  • 组件

  • 事件代理

  • JSX 语法

0x0bject
0x0bject
翻译于 2014/08/27 10:35
1

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

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

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

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

0x0bject
0x0bject
翻译于 2014/08/14 12:03
2

SayHello: 可组合的元件

SayHello是一个父组件,包含两个组件。这个父组件是由两个内部组件构成。其中一个组件是UserName,用来为用户提供输入姓名的功能,另一个组件是HelloText,用于展示文本,比如Hello,world。这个父组件定义了下列三个不同的API:

  • getInitialState

  • handleNameSubmit

  • 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组件有下列两个方法:

  • handleChange:用来捕获onChange事件

  • 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。请各位自由评论或给出建议。

0x0bject
0x0bject
翻译于 2014/08/14 12:23
2
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(11)

凡梦星尘
凡梦星尘
到底MVVM好还是不好呀,头痛的选择!!!
yak
yak
onChange={this.handleChange} 跟直接用js写 onchange=function(){ xxx }
有什么区别呢?
a
astars
用 React.js 的工程师鄙视用 AngularJS 的工程师,用 AngularJS 的工程师鄙视用 jQuery 的工程师,用 jQuery 的工程师鄙视用 Vanilla JavaScript 的工程师,用 Vanilla JavaScript 的工程师鄙视 IE 的用户。
Sam_yi
Sam_yi
还是比较喜欢angular 模板和逻辑分开
码农不会耕田
码农不会耕田

引用来自“lc-soft”的评论

一个简单的HelloWorld居然被整成这样。
呵呵 这个还是值得star 一下的
mengjoey
mengjoey
还是模板好点
中奖啦
中奖啦

引用来自“zzeric”的评论

JS这样写没有语法错误?

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>
);
了解了一下,这是JSX的语法,可以编译成JavaScript。
zzeric
zzeric
JS这样写没有语法错误?

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>
);
司徒永超
司徒永超
一个简单的HelloWorld居然被整成这样。
yun
yun
板凳
返回顶部
顶部