react4-阿里云开发者社区

开发者社区> 开发与运维> 正文

react4

简介: 1. 最流行的开源React UI组件库 1). material-ui(国外) 官网: http://www.material-ui.com/#/ github: https://github.com/callemall/material-ui 2).

1. 最流行的开源React UI组件库

1). material-ui(国外)

官网: http://www.material-ui.com/#/
github: https://github.com/callemall/material-ui

2). ant-design(国内蚂蚁金服)

官网: https://ant.design/
github: https://github.com/ant-design/ant-design/

2. ant-design使用入门

1). 使用create-react-app搭建react开发环境

npm install create-react-app -g
create-react-app antd-demo
cd antd-demo
npm start

2). 搭建antd的基本开发环境

1. 下载
    npm install antd@2.7.4 --save
2. src/App.js
    import React, { Component } from 'react';
    import { Button } from 'antd';
    import './App.css';
    
    class App extends Component {
      render() {
        return (
          <div className="app">
            <Button type="primary">Button</Button>
          </div>
        );
      }
    }
    export default App;
3. src/App.css
    @import '~antd/dist/antd.css';
    
    .app {
      text-align: center;
    }

3). 实现按需加载(组件js/组件css)

1. 使用eject命令将所有内建的配置暴露出来
    npm run eject
2. 下载babel-plugin-import(用于按需加载组件代码和样式的 babel 插件)
    npm install babel-plugin-import --save-dev
3. 修改配置: config/webpack.config.dev.js
    // Process JS with Babel.
    {
      test: /\.(js|jsx)$/,
      include: paths.appSrc,
      loader: 'babel',
      options: {
      +   plugins: [
      +     ['import', { libraryName: 'antd', style: 'css' }],
      +   ],
          // This is a feature of `babel-loader` for webpack (not Babel itself).
          // It enables caching results in ./node_modules/.cache/babel-loader/
          // directory for faster rebuilds.
          cacheDirectory: true
        }
     },
4. 去除引入全量样式的语句: src/App.css
    @import '~antd/dist/antd.css' 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章