首页 / REACT / 由ReactJS的Hello world说开来

由ReactJS的Hello world说开来

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了由ReactJS的Hello world说开来，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3342字，纯文字阅读大概需要5分钟。

内容图文

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

内容总结

以上是互联网集市为您收集整理的由ReactJS的Hello world说开来全部内容，希望文章能够帮你解决由ReactJS的Hello world说开来所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/357178.html

来源：【匿名】