ant design pro模板_Ant Design Pro 教程 -- 3.一切都是组件

3.1 Counter 组件

React 是基于组件的声明式用户界面开发库。在 React 世界，一切都是组件。传统前端开发，主要是基于页面的开发方式，需要我们用 HTML 把页面整个构造出来，通过 CSS 来指定样式，再通过 JavaScript 来从后台拉取数据，将数据设置到 DOM 元素属性上去，绑定 DOM 元素事件，响应处理用户操作，触发的事件。

我们也可以使用组件，比如基于 EasyUI 的前端开发，但是通常我们只是使用组件，而不会自己去开发可复用的组件，而且即使是使用 EasyUI 组件，也要求我们用 HTML 将组件需要的 HTML 描述出来，再由 EasyUI 组件将 DOM 元素渲染成 EasyUI 组件。

我们也可以借助模板语言，来开发前端页面，本质上还是一样的，需要我们用 HTML 来描述整个页面，只是页面中嵌入模板语法而已，这样的模板语言有很多，比如 Jsp、Asp、Freemarker 等等。模板语言通常也允许我们将可以复用在多个页面的页面片段实现在单独的文件中，在需要使用的地方引入进来，但是本质上还是基于页面的开发方式。

而 React 则是一种创新式的前端开发方式。将整个应用看做由组件装配起来的，开发就是用一种分而治之的方法，使用和开发组件的过程。这些组件可以在应用中复用，甚至是跨应用复用。下面我们以一个简单的例子来一起学习 React 开发。

我们要实现的例子是实现一个简单的计数器，这个计数器有两个按钮，一个按钮控制增加计数，一个按钮控制减少计数，和一个文本显示当前计数。最终显示效果如图：

counter.png

用如下命令创建一个 counter 工程

create-react-app counter

修改 src/index.js，引入我们即将实现的 Counter 组件，设置组件的初始 count 为 0，并将组件渲染到 root。将 src/index.js 用下面代码替换：

import React from 'react';

import ReactDOM from 'react-dom';

//引入我们将要开发的 Counter 组件

import Counter from './componenets/Counter'

ReactDOM.render(, document.getElementById('root'));

然后在 src 目录下新建一个文件 components 文件夹，用于存放我们自己开发的组件，在 components 文件夹下新建一个 Counter.js。组件的 JS 源代码文件名通常首字母大写。Counter.js 代码如下：

import React, { Component } from 'react';

class Counter extends Component{

constructor(props){

super(props);

this.state = {