react-antd蚂蚁金服组件实例

React框架已经火了好长一段时间了，再不学就out了！

对React尚未了解的同窗能够看看我以前的一篇文章，能够快速简单的认识一下React。React入门最好的实例－TodoList

本身从开始接触react一窍不通，到慢慢的似懂非懂，经过各类途径学习也有一阵了。学习过程当中还会接触到不少新的东西，好比ES六、 webpack，过程艰辛谁人懂，见坑填坑慢慢来。今天把学习过程过滤了一下，只说项目实际须要用的东西，总结了一套能看到的东西，分享给你们，但愿能让 读者少踩一些坑！

本文看点

• 实际项目效果：最终你只须要在本地启一个服务，就能看到运行效果。
• webpack的配置：项目实战中经常使用的插件和配置方法。
• React用法：React在MVC（模型Model－视图View－控制器Controller）层面上主要扮演了视图的做用。咱们能够学习它在项目中到底该如何使用。
• React-router配置：单页面应用（SPA）离不开路由，咱们能够学习在项目中React-router如何配置。
• ES6语法：咱们会用到一些在项目中常见的ES6语法。
• antd的使用：蚂蚁金服出的一款基于React的框架，咱们能够学习如何去使用。

项目效果

项目代码已经上传至github，项目代码github地址。你们把代码下载下来以后，跟随如下步骤便可在本地看到效果。

• 首先安装node环境。

• 全局安装webpack

  npm install webpack -g 

• 安装项目依赖

  npm install

• 开发模式，启动本地服务

  npm run dev

  至这一步成功后，在浏览器输入localhost:8888就能看到以下图的效果了。

• 在build文件夹下打包

  npm run build

webpack配置

基于React的项目配合webpack来打包管理最合适不过了。可是不学不知道，一学吓一跳，webpack的学习TM复杂了，各类报错，各类坑，就是webpack让我在学习的过程当中一度想要放弃。然而过来人告诉你，坚持就是胜利！

学会怎么配置webpack，是独立管理项目的第一步。每一个用webpack管理的项目都有一个webpack.config.js文件，先来看看这个项目的webpack.config.js文件：

'use strict'; var ExtractTextPlugin = require("extract-text-webpack-plugin"); //css单独打包 var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); module.exports = { devtool: 'eval-source-map', entry: { main: './src/entry.js', //惟一入口文件 vendor: ['react'] //这里是依赖的库文件配置，和CommonsChunkPlugin配合使用能够单独打包 }, output: { path: './build', //打包后的文件存放的地方 filename: 'main.js', //打包后输出文件的文件名 publicPath: 'http://localhost:8888/build/' //启动本地服务后的根目录 }, module: { loaders: [ { test: /\.js$/, loader: "jsx!babel", include: /src/}, { test: /\.css$/, loader: ExtractTextPlugin.extract("style", "css!postcss")}, { test: /\.scss$/, loader: ExtractTextPlugin.extract("style", "css!postcss!sass")}, { test: /\.(png|jpg|gif)$/, loader: 'url?limit=819200'} ] }, babel: { presets: ['es2015', 'stage-0', 'react'], plugins: ['transform-runtime', ['import', { libraryName: 'antd', style: 'css' }]] }, postcss: [ require('autoprefixer') //调用autoprefixer插件,css3自动补全 ], devServer: { // contentBase: './src/views' //本地服务器所加载的页面所在的目录 port: 8888, colors: true, //终端中输出结果为彩色 historyApiFallback: true, //不跳转 inline: true //实时刷新 }, plugins: [ new ExtractTextPlugin('main.css'), new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js' }) ] }

一个完整项目的基本webpack配置就是这些了，重要的配置项已经在上述代码中做了注释。另外，也能够深刻学习，推荐看看这篇文章。webpack详细指南

React用法

React自己真的很是简单。你能够把一个页面分为不少个组件的组成，而React就是开发这些组件的。因此React其实就是view层，说白了就是html，只不过每一个组件是经过js建立的，每一个组件还有本身的状态和本身的方法。

React Component（一个组件）提供一个render方法以及其余可选的生命周期函数、组件相关的事件或方法定义。经常使用API就如下几个：

• constructor：构造函数

  class component extends React.Component { constructor(props) { super(props); this.state = { color: props.initialColor }; } }

• render：组件返回的dom内容（必须）

• componentWillMount：在render以前自动调用，你能够在这个方法里面调用setState改变状态，而且不会致使额外调用一次render

• componentDidMount：在render以后自动调用，从这里开始能够经过this.getDOMNode()获取到组件的DOM节点

• componentWillUpdate: 组件收到新的state，更新view以前自动调用

• componentDidUpdate: 组件收到新的state，更新view完成以后自动调用

而后回到咱们这个项目实例，拿代码中的进度条组件（src-components-progress.js）代码做为展现：

import React from 'react'; //引入react import { Progress, Button } from 'antd'; //引入antd const ButtonGroup = Button.Group; class myProgress extends React.Component { constructor(props) { super(props) this.state = { //初始化组件的状态 percent: 0 } } increase() { //自定义函数 let percent = this.state.percent + 10; if (percent > 100) { percent = 100; } this.setState({ percent }); //设置组件的状态 } decline() { //自定义函数 let percent = this.state.percent - 10; if (percent < 0) { percent = 0; } this.setState({ percent }); } render() { return ( <div className="progress-wrap"> //类名使用className <Progress percent={this.state.percent} />  <Progress type="circle" percent={this.state.percent} /> <ButtonGroup> <Button type="ghost" onClick={this.decline.bind(this)} icon="minus" /> <Button type="ghost" onClick={this.increase.bind(this)} icon="plus" /> </ButtonGroup> <span>点击按钮能够看到进度条的变化</span> </div> ) } } export default myProgress; //导出这个组件（ES6语法）

代码我已经给出了注释，不作赘述。

React-router配置

独立的前端应用离不开路由配置，就像angular框架也有本身的路由同样。在React项目中使用路由，须要依赖React-Router模块。咱们直接来看看此项目中的路由配置：

import ReactDom from 'react-dom'; import { Router, Route, Link, hashHistory, IndexRoute, Redirect, IndexLink} from 'react-router'; ReactDom.render(( <Router history={hashHistory}> //路由容器 <Route path="/" component={Sider}> //一级路由，路径为"/"时，加载“Sider”组件 <IndexRoute component={myIntroduce} /> //默认路由，加载“Sider”和“myIntroduce”组件  <Route path="myIntroduce" component={myIntroduce} /> //二级路由 <Route path="myTable" component={myTable} /> //二级路由  <Route path="myForm" component={myForm} /> //二级路由 <Route path="myProgress" component={myProgress} /> //二级路由 <Route path="myCarousel" component={myCarousel} /> //二级路由 </Route> </Router> ), document.getElementById('app'));

React的路由配置其实很简单，就是把路径和定义好的组件一一对应起来就行了。上述代码结合实际运行效果，一看就明白。

ES6语法

我以前写过一篇关于ES6常见语法的文章，总结ES6经常使用的新特性。
。
另外，上述贴出的代码中已经出现过不少的ES6语法。ES6的学习就是见多学多的过程，多使用，多总结，天然就会了。

antd的使用

引入安装antd插件

antd是蚂蚁金服推出的一款很棒的react  ui库。

官方网站：https://ant.design/docs/react/introduce-cn

首先要有react环境

安装：npm install antd --save

使用：import { 组件名称 } from 'antd'（好比import { Switch } from 'antd'）

还要引用其样式：import 'antd/dist/antd.css'

可是这样直接引用样式会有一些没必要要的组件也被引入进来 须要配置webpack进行按需加载

安装babel-plugin-import

npm install babel-plugin-import --save-dev

配置webpack：

{ 
                test: /\.(js|jsx)$/, 
                exclude: /node_modules/, 
                loader: "babel-loader", 
                query:
                  {
                    presets:['es2015','react'],
                    plugins: [
                        ["import", {libraryName: "antd", style: "css"}] //按需加载
                    ]
                  },
            },

放在module rules下面

上述配置完毕

直接使用组件

<Switch defaultChecked={false} />

 

antd能够理解为是一个基于react的ui组件库。引入这个库以后，咱们就能够直接使用不少现成的组件，好比按钮、图标、表单、菜单、导航等等。去antd官网发现更多牛逼的组件。

好比上面已经贴过的进度条组件：

import { Progress, Button } from 'antd'; //引入antd const ButtonGroup = Button.Group; //按钮组 ...... <Progress percent={this.state.percent} /> //使用进度条组件，percent是组件提供的配置项 <Progress type="circle" percent={this.state.percent} /> <ButtonGroup> <Button type="ghost" onClick={this.decline.bind(this)} icon="minus" />  <Button type="ghost" onClick={this.increase.bind(this)} icon="plus" /> </ButtonGroup> ......

另外，因为antd组件比较多，因此库文件比较大，因此咱们在开发的时候能够按需引入对应的库。webpack配置须要用到babel-plugin-import模块。

babel: { presets: ['es2015', 'stage-0', 'react'], plugins: ['transform-runtime', ['import', { libraryName: 'antd', style: 'css' }]] }

总结

上面的项目我已放到了Github上。基于react+antd的项目实例，喜欢的看管麻烦star一下啦！谢谢～

学习的过程枯燥艰辛，可是取得的成果却使人兴奋。因此咱们仍是要不忘初心，不忘学习！