由ReactJS的Hello world说开来


Posted in Javascript onJuly 02, 2015

这篇文章提供了代码实例和在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。请各位自由评论或给出建议。

Javascript 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
刷新时清空文本框内容的js代码
Apr 23 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
node.js中的console用法总结
Dec 15 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
深入理解JavaScript的React框架的原理
Jul 02 #Javascript
javascript实现简单的进度条
Jul 02 #Javascript
JavaScript实现添加、查找、删除元素
Jul 02 #Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 #Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 #Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 #Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 #Javascript
You might like
深入掌握include_once与require_once的区别
2013/06/17 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
php之可变变量的实例详解
2017/09/12 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
腾讯广告词
2014/03/19 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
学校交通安全责任书
2014/08/25 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
先进班组事迹材料
2014/12/25 职场文书
党支部考察意见范文
2015/06/02 职场文书
如何写新闻稿
2015/07/18 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python