6.添加一个ui框架

在react.js上使用antd-design

antd-design

antd-design

npm install antd --save

<!--babel-plugin-import必须要装-->
npm install babel-plugin-import --save-dev

引入antd样式

<!--在App.js中引入-->
import 'antd/dist/antd.css' 或 import 'antd/dist/antd.less'

<!--在app.scss中引入-->
@import "~antd/dist/antd.css";

使用组件，修改content.js

import React from 'react';
import Table from 'antd/lib/Table';

class Content extends React.Component {
    render() {
        const columns = [{
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        }, {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        }, {
            title: '电话号码',
            dataIndex: 'number',
            key: 'number',
        }, {
            title: '邮箱',
            dataIndex: 'email',
            key: 'email',
        }];


        const data = [];
        for (let i = 1; i < 15; i++) {
            let obj = {
                name: 'doudou',
                age: 32,
                number: 123456789,
                email: '123456789@163.com',
            };
            obj.key = i;
            data.push(obj);
        }

        return (
            <div className="content">
                <Table columns={columns} dataSource={data}/>
            </div>
        )
    }
}
export default Content;

效果

image

babel-plugin-import插件

从 antd 引入模块即可，无需引入样式，babel-plugin-import 会加载 JS 和 CSS

修改.babelrc

//.babelrc
{
  "presets": [
    "react",
    "es2015"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true //引入less，如果使用css文件就改为'css'
      }
    ]
  ]
}

修改/app/component/Content.js

import {Table} from 'antd';

此时app.scss和App.js中引入的antd.css可以去掉了

bug

如果在编译antd的样式文件报错，将less包版本降低

使用antd-design

更改/app/component/App.js

import React from 'react';
import Header from './layout/Header';
import Content from './layout/Content';
import Sidebar from './layout/Sidebar';
import '../style/app.scss';
import {Layout} from 'antd';

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            collapsed: false
        };

        this.toggle = () => {
            this.setState({
                collapsed: !this.state.collapsed
            })
        };
    }

    render() {
        return (
            <Layout className="layout-app">
                <Layout.Sider
                    trigger={null}
                    collapsible
                    collapsed={this.state.collapsed}
                >
                    <Sidebar/>
                </Layout.Sider>
                <Layout>
                    <Layout.Header style={{background: '#fff', padding: 0}}>
                        <Header collapsed={this.state.collapsed}
                                toggle={this.toggle}
                        />
                    </Layout.Header>
                    <Layout.Content style={{margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280}}>
                        <Content/>
                    </Layout.Content>
                </Layout>
            </Layout>
        )
    }
}
export default App;

修改/app/component/layout/Header.js

import React from 'react';
import avatar_img from '../../images/avatar.jpg';
import {Icon, Avatar} from 'antd';


class Header extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const {
            collapsed,
            toggle
        } = this.props;

        return (
            <div className="layout-header">
                <Icon
                    className="trigger"
                    type={collapsed ? 'menu-unfold' : 'menu-fold'}
                    onClick={toggle}
                />
                <Avatar className="avatar"
                        src={avatar_img}/>
            </div>
        )
    }
}
export default Header;

修改/app/component/layout/Sidebar.js

import React from 'react';
import {Menu, Icon} from 'antd';

class Sidebar extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="layout-sidebar">
                <div className="logo"/>
                <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                    <Menu.Item key="1">
                        <Icon type="user"/>
                        <span>nav 1</span>
                    </Menu.Item>
                    <Menu.Item key="2">
                        <Icon type="video-camera"/>
                        <span>nav 2</span>
                    </Menu.Item>
                    <Menu.Item key="3">
                        <Icon type="upload"/>
                        <span>nav 3</span>
                    </Menu.Item>
                </Menu>
            </div>
        )
    }
}
export default Sidebar;

修改/app/component/layout/Content.js

import React from 'react';
import {Table} from 'antd';

class Content extends React.Component {
    render() {
        const columns = [{
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        }, {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        }, {
            title: '电话号码',
            dataIndex: 'number',
            key: 'number',
        }, {
            title: '邮箱',
            dataIndex: 'email',
            key: 'email',
        }];

        const data = [];
        for (let i = 1; i < 15; i++) {
            let obj = {
                name: 'doudou',
                age: 32,
                number: 123456789,
                email: '123456789@163.com',
            };
            obj.key = i;
            data.push(obj);
        }

        return (
            <Table columns={columns} dataSource={data}/>
        )
    }
}
export default Content;

新建layout.scss

.layout-app {
    height: 100%;
}

.layout-sidebar {
    .logo {
        height: 32px;
        background: #333;
        border-radius: 6px;
        margin: 16px;
    }
}

.layout-header {
    .trigger {
        font-size: 18px;
        line-height: 64px;
        padding: 0 16px;
        cursor: pointer;
        transition: color .3s;
        &:hover {
            color: #108ee9;
        }
    }
    .avatar {
        float: right;
        margin-top: 16px;
        margin-right: 16px;
        cursor: pointer;
    }
}