当前位置: 首页 > 编程笔记 >

由ReactJS的Hello world说开来

林和畅
2023-03-14
本文向大家介绍由ReactJS的Hello world说开来,包括了由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。请各位自由评论或给出建议。

 类似资料:
  • - 1.新建一个Module(一个Module就相当于一个app) 如果已经有一个Project,那么可以直接新建一个Module,如果没有先去新建一个Project。 如图: 创建工程,可以参考“开发HelloWorld程序(Android原生)” 这里的Minumum SDK要选择API16及以上,Weex目前只支持到API16级以上。 这个时候我们WXHelloWorld程序的原生壳子就创

  • 我有以下配置(用构建) 我的路由是从另一个组件调用的,但是当我试图查看它时,我看不到我的页面详细信息,而是看到它的父页面。

  • 我目前有一个react应用程序,我正在工作,路由是错误的。我以前已经像这样设置了react应用程序及其路由,但是当试图路由到“details”组件时,只有url发生了变化,但是组件没有加载。多一双眼睛就能看到我错过了什么。我将路线设置为: < li>index.js: 根“/”路径组件加载,但我无法获取详细信息组件组件在使用history进行路由时呈现.

  • 2.1 命令行的HelloWorld 安装配置完Kotlin命令行环境之后,我们直接命令行输入kotlinc, 即可进入 Kotlin REPL界面。 $ kotlinc Welcome to Kotlin version 1.1.2-2 (JRE 1.8.0_40-b27) Type :help for help, :quit for quit >>> println("Hello,Wor

  • 打开AndroidStudio新建一个Project 至此,点击finish,等待AS创建工程完成。 左边视图,显示的是我们工程的目录结构。中间MainActivity是Android的Activity组件,我们一般在这里做一些初始化,给空间绑定数据,网络请求和请求结果处理等操作。activitymian.xml是安卓的layout布局文件,我们在这里画界面,最右边是预览窗口,布局文件的改动都可以

  • 本文向大家介绍请你说说react的路由的优缺点?相关面试题,主要包含被问及请你说说react的路由的优缺点?时的应答技巧和注意事项,需要的朋友参考一下 browser router 模式下客户端路由在和服务端路由在统一域名下,会存在冲突的问题。 SEO 现在问题应该不存在,可以主动调用搜索引擎的提交或者是google 的引擎会自动跑js