Create-React-App配合使用Antd组件

简介

Create-React-APP 是 Facebook 官方的 react 页面生成工具,可以实现零配置就能使用 react来开发页面,使用起来非常方便。而 Antd 是阿里巴巴的一个 UI 设计语言,设计非常全面的大师级页面组件,当然比 Bootstrap 牛逼多了啊。

注:已过期,具体使用请看antd官网使用方法 在 create-react-app 中使用

使用

下面就来利用 creact-react-app 快速生成 react 页面, 并配合使用 antd 作为 页面的组件来开发。

安装

首先安装 create-react-app
打开命令行输入

npm install create-react-app -g

create-react-app 是属于全局的命令脚手架工具,需要 -g 来安装
然后初始化 react 页面

create-react-app react-app
cd react-app
npm start

这样就可以运行 react-app 页面 了

react-app 项目目录,安装 antd

npm install antd --save

这时我们试着在 src 目录下打开编辑 App.js , 比如添加

import { Row, Col, Button, Icon } from 'antd';
// ...
<div className="antd">
    <Row>
        <Col span={12}>
            <Button>默认按钮<Button>
        </Col>
        <Col span={8}>
            <Icon type="check-circle" />
        </Col>
    </Row>
</div>

然后运行 npm start ,我们会发现,页面结构已经用 antd 来展示了,但没有样式。

配置 create-react-app

antd 的使用介绍中,我们发现配合 webpackbabel 时需要利用插件babel-plugin-antd ,而在 react-app 项目中并没有发现 配置文件。

create-react-app 官方教程中,我们看到有个命令 eject,意思是弹出完整项目实现自主配置。运行

npm run eject

这时我们就可以发现生成一个文件配置的目录,打开 babel.dev.js并编辑将 plugins后面的代码改成下面

plugins: [
    'babel-plugin-syntax-trailing-function-commas',
    'babel-plugin-transform-class-properties',
    'babel-plugin-transform-object-rest-spread'
  ].map(require.resolve).concat([
    [require.resolve('babel-plugin-transform-runtime'), {
      helpers: false,
      polyfill: false,
      regenerator: true
    }]
  ]).concat([
    [require.resolve('babel-plugin-antd'), {
      style: "css",
    }]
  ])

再次运行 npm start 我们就看到了 antd 组件的样式了。好了,之后就是专心制作页面吧。


   转载规则


《Create-React-App配合使用Antd组件》 Sterne Lee 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
react-native环境开发Ubuntu篇 react-native环境开发Ubuntu篇
由于Facebook的开发工程师都是用MacOS的,所以这React native的开发环境还是MacOS最好,其次是Linux,由于windows坑太多,这次的尝试是利用Ubuntu开发React-Native初实践 ##Ubuntu
2017-03-25
下一篇 
My tasks My tasks
迅雷工作经历从2017年后7月至今,基于前端开发的项目总结。 PC页面 大天使之剑H5游戏官网模板 大天使之剑H5游戏进入页 活动充值组件与专题 新版金钻充值官网 迅雷游戏盒子下载页 迅雷游戏盒子官网 手机端页面 夹娃娃游戏 竞猜大富翁
2016-04-07 Sterne Lee
  目录