由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 相关文章推荐
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
JavaScript中this详解
Sep 01 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
深入理解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
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
PHP注释实例技巧
2008/10/03 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
JS继承 笔记
2011/07/13 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
python实现进程间通信简单实例
2014/07/23 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
Python字典对象实现原理详解
2019/07/01 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
python实现小世界网络生成
2019/11/21 Python
python3.4中清屏的处理方法
2020/07/06 Python
python输入中文的实例方法
2020/09/14 Python
python中pow函数用法及功能说明
2020/12/04 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
车间工艺员岗位职责
2013/12/09 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
教书育人演讲稿
2014/09/11 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏