在之前的文章中我们引见了 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) 是用于父子组件间传值时须要用到的。