React 从入门到进阶之路（二）

在之前的文章中我们介绍了 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 进行如下修改：

 1 import React, {Component} from 'react';
 2 import Home from './components/Home';
 3
 4 class App extends Component {
 5     render() {
 6         return (
 7             <div className="App">
 8                <Home/>
 9             </div>
10         );
11     }
12 }
13
14 export default App;

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

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

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

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

 1 import React, {Component} from 'react';
 2
 3 class Home extends Component {
 4     constructor(props){
 5         super(props);
 6         this.state = {
 7             name: "zhangsan"
 8         }
 9     }
10     render() {
11         return (
12             <div>
13                 Hello {this.state.name}
14             </div>
15         );
16     }
17 }
18
19 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) 是用于父子组件间传值时需要用到的。

转载于:https://www.cnblogs.com/weijiutao/p/10647426.html

React 从入门到进阶之路（二）相关推荐

web前端高级React - React从入门到进阶之React条件渲染
系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染 ...
web前端高级React - React从入门到进阶之初识React
第一部分:React入门系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到 ...
web前端高级React - React从入门到进阶之高阶组件
第二部分:React进阶系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到 ...
web前端高级React - React从入门到进阶之组件的懒加载及上下文Context
第二部分:React进阶系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到 ...
web前端高级React - React从入门到进阶之Render Props
第二部分:React进阶系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到 ...
ES7、ES8、ES9、ES10、ES11、ES12、ES13、ES14(ES进阶之路二)
简介 JavaScript是世界上发展最快的编程语言之一,不仅可以用于编写运行在浏览器的客户端程序,随着Node.js的发展,JavaScript也被广泛应用于编写服务端程序.而随着JavaScrip ...
web前端高级React - React从入门到进阶之组件的状态提升
系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染 ...
车辆动力学从入门到进阶之路（传统篇）
编辑:CrazyRabbit 日期:2022年6月16日本文主要讲一下车辆动力学如何入门,如何进阶,供想进入该领域的工程师参考. 本篇主要讲的是传统领域,不包含电控开发. 0. 前言何为车辆动力学 ...
ES进阶之路二(ES7-ES12)
简介 JavaScript是世界上发展最快的编程语言之一,不仅可以用于编写运行在浏览器的客户端程序,随着Node.js的发展,JavaScript也被广泛应用于编写服务端程序.而随着JavaScrip ...

React 从入门到进阶之路（二）

React 从入门到进阶之路（二）相关推荐

最新文章

热门文章