当前位置:首页 > 编程教程 > javascript技术文章 > 由ReactJS的Hello world说开来

由ReactJS的Hello world说开来代码实例

  • 发布时间:
  • 作者:码农之家
  • 点击:116

这篇文章主要知识点是关于React、JS、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript从入门到精通
  • 类型:JavaScript大小:92.2 MB格式:PDF作者:明日科技
立即下载

由ReactJS的Hello world说开来

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.752856

webpack 2.x配置reactjs基本开发环境详解

本文介绍了webpack 2.x配置reactjs基本开发环境详解,分享给大家,具体如下: 当前webpack版本:2.2;react: 15.4.2 webpack从1.x升级到2.x替换了几个接口,包括module.loaders这样的重要接口已被弃用(详细变更)。官网目前已不推荐使用1.x版本,早上折腾一番,根据2.2版本配置了react基本的开发环境,满足不太复杂的web应用开发,后期会逐步优化配置文件。 如果您之前使用过webpack,需要改动的地方并不大。下文假定您没有接触过类似的打包工具(但了解npm、jsx再好不过),以跟我一样一个新手的身份认识这些,如有不妥之处望不吝赐教。 如果您的react项目是引入的以下三个js文件在浏览器端编译jsx,那么不需要用webpack做开发环境。 script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"/script script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"/script script src="https://cdn.boot……

网友NO.134570

浅谈react.js 之 批量添加与删除功能

最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是: 添加按钮与被添加的选择文件组件。 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上传组件),含一个删除当前组件的删除按钮 添加按钮的事件 被添加组件存放的容器 做这个效果只需要明白三个方法的用途就OK: 直接绑定要删除组件的 deleteType(),它是调用删除index数量的方法 removeContent() //删除{qiniu}与{deleteQiNiu}内容,是把页面上的这两个内容一起删除 deleteType(){ let index = this.props.index; this.props.callbackParent(index); } 在添加组件的容器div className="divBorder"/div中,为添加按钮写的 批量添加 addContent() 与删除removeContent() //批量添加 addContent(event) { if (this.state.number.length = this.state.maxNum) { return; } console.log("this.state.number:" + this.state.number); this.state.number.push(……

网友NO.513094

react.js使用webpack搭配环境的入门教程

本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app //安装create-react-app脚手架 npm为node.js的包管理工具,请确保你已经安装了node.jscreate-react-app my-app //使用create-react-app创建,my-app为项目名称cd my-app/ //进入my-app目录npm start //运行项目 现在打开 http://localhost:3000/ 就能看到初始界面 我不大愿意使用官方自带这个脚手架,是因为它的webpack配置太复杂,我比较愚钝看不大懂,还望有大神能研究透彻分享一下。 要如何create-react-app内部的webpack配置文件解压出来? npm run eject 源代码 每次看教程我都喜欢先把项目跑起来,然后再一句一句代码地去了解。如果你也是: git clone https://github.com/lingjiawen/HelloReact.gitcd HelloRea……

网友NO.626633

react.js CMS 删除功能的实现方法

页面效果图: 数据操作分析: 在查询表组件的 TableData.js 中操作如下内容: 给每一行绑定一个checkbox,且在点击这个 checkbox 时,触发 action 中的一个方法(formatPostCollectionList),这个方法是用来更新选中的实体数组。formatPostCollectionList为action中的方法,需要export 定义每一行的实体为一个数组,用变量 postCollections 表示 如果选中当前行,则更新实体数组中的数据;如果取消当前行,则删除实体中的数据; 参数为 row ; 点击删除按钮后,使用 componentDitUpdate() 生命周期方法,在组件更新后调用。 如果删除成功,则执行 action 中的方法 clearPostCollection()。这个方法是用来清空当前行实体中的数据; 如果删除成功,最后执行 查询表的刷新重新加载数据的方法 更新实体数据与清空实体数据的方法,在 action 中执行。 代码分析: 表查询操作 1、调查询接口,Api中的……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com