在之前的文章中我们介绍了 React 开发的环境搭建及目录介绍和整理,本篇文章将介绍 React 创建组件、JSX 语法、绑定数据和绑定对象。

之前我们已经将项目运行了起来,我们再来看一下目录结构:

其中 App.js 文件为我们的根组件,里面的代码:

其中 import 为我们需要引入的文件,在 App.js 中我们引入了 React ,一张 svg 图片和 css 样式,然后采用 ES6 对象的写法,App 对象继承了 React 的 Component ,并且通过 render 的方式放置我们的模板,这就是 JSX 语法,HTML 与 JavaScript 混写。最后将对象 App 暴露出去。

运行结果为:

浏览器的呈现结果就是 App.js 文件中 render 里面的代码运行所得出的结果。所以我们只需要修改 App.js 里面的 render 不等就能在浏览器端显示不同的结果,但是所有的代码都写在里面代码会很多,不便于维护,所以我们需要将其进行模块化管理。

我们将 App.js 进行如下修改:

 import React, {Component} from 'react';
import Home from './components/Home'; class App extends Component {
render() {
return (
<div className="App">
<Home/>
</div>
);
}
} export default App;

从上面的代码我们可以看出我们从 components 目录下引入了 Home.js 组件,并将其放在了render 里,这里注意的是因为 HTML 标签的 class 类名变为 className,这是因为

class 是JavaScript中的保留关键字,而JSX是JavaScript的扩展。这就是React不使用`class`而使用`className`的主要原因。

还有我们在引入组件时组件名称需为首字母大写。如果我们的 HTML 代码向换行的话需要在最外层包含一个根节点。

接下来我们在 components 目录下创建 Home.js 文件,并在 Home.js 文件中插入以下代码:

 import React, {Component} from 'react';

 class Home extends Component {
constructor(props){
super(props);
this.state = {
name: "zhangsan"
}
}
render() {
return (
<div>
Hello {this.state.name}
</div>
);
}
} export default Home;

程序 http://localhost:3000 运行后我们将在浏览器端看到输出结果 Hello zhangsan

其中 constructor 构造函数内需写 super(); 表示我们的方法继承自 Component,我们可以向数据绑定在 this.state 的对象属性中,并在 HTML 模板中通过 { } 的形式将数据挂在到模板引擎上。

Es6中的super可以用在类的继承中,super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

在 constructor(props) , super(props) 是用于父子组件间传值时需要用到的。

React 从入门到进阶之路(二)的更多相关文章

  1. React 从入门到进阶之路(四)

    之前的文章我们介绍了  React 绑定属性( 绑定class  绑定style).引入图片  循环数组渲染数据.接下来我们将介绍 React 事件,方法, React定义方法的几种方式 获取数据 改 ...

  2. React 从入门到进阶之路(三)

    之前的文章我们介绍了 React 创建组件.JSX 语法.绑定数据和绑定对象.接下来我们将介绍 React 绑定属性( 绑定class  绑定style).引入图片  循环数组渲染数据. 上一篇中我们 ...

  3. React 从入门到进阶之路(五)

    之前的文章我们介绍了  React 事件,方法, React定义方法的几种方式 获取数据 改变数据 执行方法传值.接下来我们将介绍 React 表单事件 键盘事件 事件对象以及 React中 的 re ...

  4. React 从入门到进阶之路(七)

    之前的文章我们介绍了 React 表单详解 约束性和非约束性组件 input text checkbox radio  select  textarea  以及获取表单的内容.接下来我们将介绍 Rea ...

  5. React 从入门到进阶之路(六)

    之前的文章我们介绍了 React 表单事件 键盘事件 事件对象以及 React中 的 ref 获取 dom 节点 .双向数据绑定.接下来我们将介绍 React 表单详解 约束性和非约束性组件 inpu ...

  6. React 从入门到进阶之路(八)

    之前的文章我们介绍了 React中的组件.父子组件.React props父组件给子组件传值.子组件给父组件传值.父组件中通过refs获取子组件属性和方法.接下来我们将介绍 React propTyp ...

  7. React 从入门到进阶之路(九)

    之前的文章我们介绍了 React propTypes  defaultProps.接下来我们将介绍 React 生命周期函数. 之前我们已经根据 create-react-app 模块创建了一个 Re ...

  8. React 从入门到进阶之路(一)

    在开始 React 学习之前我们先进入官网 https://react.docschina.org/ 看看官方对 React 的解释:React 是用于构建用户界面的JavaScript 库.我们只需 ...

  9. Java 从入门到进阶之路(二十)

    在之前的文章我们介绍了一下 Java 中的包装类,本章我们来看一下 Java 中的日期操作. 在我们日常编程中,日期使我们非常常用的一个操作,比如读写日期,输出日志等,那接下来我们就看一下 Java ...

随机推荐

  1. 《Java基础知识》Java接口和抽象类的区别

    抽象类 抽象类必须用 abstract 修饰,子类必须实现抽象类中的抽象方法,如果有未实现的,那么子类也必须用 abstract 修饰.抽象类默认的权限修饰符为 public,可以定义为 public ...

  2. VS2019 开发Django(八)------视图

    导航:VS2019开发Django系列 这几天学习了一下Django的视图和模板,从这几天的学习进度来看,视图这里并没有花很多的时间,相反的,模板花费了大量的时间,主要原因还是因为对Jquery操作d ...

  3. [ASP.NET Core 3框架揭秘] 依赖注入[3]:依赖注入模式

    IoC主要体现了这样一种设计思想:通过将一组通用流程的控制权从应用转移到框架之中以实现对流程的复用,并按照"好莱坞法则"实现应用程序的代码与框架之间的交互.我们可以采用若干设计模式 ...

  4. FlowPortal:流程节点定义有误,合流节点"合流"没有对应的聚焦节点

    FB版本:6.00c 报错: 流程节点定义有误,合流节点"合流"没有对应的聚焦节点 解决办法:分流和合流之间的节点不能有其他节点汇入.调整如下后,成功保存.

  5. 《老师说的都对》- Alpha冲刺阶段博客目录

    项目小组:<老师说的都对> 项目成员:孙浩杰,谭明耀,宋自康,孙肖肖,王明鑫,王观山 Github仓库地址-PCES 一.Scrum Meeting 第六周会议记录 第七周会议记录 二.测 ...

  6. 林克的小本本之——记一些基础的linux命令

    查看shell cat /etc/shells 查看系统支持的shell echo $SHELL 查看目前正在使用的shell 快捷键 Ctrl+a 跳到行首 Ctrl+e 跳到行尾 Ctrl+u 删 ...

  7. 数据卷(Data Volumes)

    Docker宿主机和容器之间文件拷贝docker copy 前言: Docker 数据管理 在生产环境中使用 Docker ,往往需要对数据进行持久化,或者需要在多个容器之间进行 数据共享,这必然涉及 ...

  8. 最近学习了Http连接池

    起因 6.1大促值班发现的一个问题,一个rpc接口在0~2点用户下单高峰的时候表现rt高(超过1s,实际上针对性优化过的接口rt超过这个值也是有问题的,通常rpc接口里面即使逻辑复杂,300ms应该也 ...

  9. React: 研究Flux设计模式

    一.简介 一般来说,State管理在React中是一种最常用的实现机制,使用这种state管理系统基本可以开发各种需求的应用程序.然而,随着应用程序规模的不断扩张,原有的这种State管理系统就会暴露 ...

  10. CRC校验算法的实例解析

    概念   CRC校验算法,说白了,就是把需要校验的数据与多项式进行循环异或(XOR), 进行XOR的方式与实际中数据传输时,是高位先传.还是低位先传有关.对于数据 高位先传的方式,XOR从数据的高位开 ...