在之前的文章中我们介绍了 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. 《Dotnet9》系列-开源C# Winform控件库强力推荐

    时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...

  2. 吃透Python上下文管理器

    什么是上下文管理器? 我们常见的with open操作文件,就是一个上下文管理器.如: with open(file, 'rb') as f: text = f.read() 那上下文管理器具体的定义 ...

  3. Java多态之向下转型

    目录 Java多态之向下转型 强制类型转换 instanceof Java多态之向下转型 往期回顾:我们学习了向上转型和动态绑定的概念,可以知道在继承关系中,将一个子类对象赋值给父类的引用变量,调用父 ...

  4. JS---封装缓动(变速)动画函数---增加任意多个属性&增加回调函数

    封装缓动(变速)动画函数---增加任意多个属性&增加回调函数 回掉函数fn,在所有元素到达目的位置后,判断是否传入一个函数,有就调用 if(fn){fn()}; 这样一次点击,产生多个动画 & ...

  5. [20191213]toad 12下BIND_AWARE提示无效.txt

    [20191213]toad 12下BIND_AWARE提示无效.txt --//链接http://blog.itpub.net/267265/viewspace-2130781/的测试,发现当时测试 ...

  6. nfs 所有的版本的 RFC 整理; nfs 所有版本对比;

    下面是针对 nfs 所有的版本,我们可以通过不同的RFC 进行详细看其RFC的细节来进行对比: 下面是备忘一些NFS RFC 的链接: https://datatracker.ietf.org/doc ...

  7. IEEE754 32位浮点数表示范围

    6.1浮点数的数值范围 根据上面的探讨,浮点数可以表示-∞到+∞,这只是一种特殊情况,显然不是我们想要的数值范围. 以32位单精度浮点数为例,阶码E由8位表示,取值范围为0-255,去除0和255这两 ...

  8. 初识微信小程序

    一.简介 微信小程序是运行在微信环境中的应用,它只能在微信中运行,不能运行在浏览器等其他环境中,微信团队提供了专门的开发工具用于微信小程序的开发,还提供了丰富的API,让我们的小程序能够具备与手机设备 ...

  9. js (单个的)点击式下拉菜单

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. SSH框架之Spring第四篇

    1.1 JdbcTemplate概述 : 它是spring框架中提供的一个对象,是对原始JdbcAPI对象的简单封装.spring框架为我们提供了很多的操作模板类. ORM持久化技术 模板类 JDBC ...