React学习之旅----使用优美的框架Antd

create-react-app react05

cd react05 

npm install react-router-dom axios url antd -S

yarn start

启动项目后，在编辑器中打开修改 src/App.css，在文件顶部引入 antd/dist/antd.css。全局引入对之后的性能优化有些累赘。

@import '~antd/dist/antd.css'
.App {
  text-align: center;
}

在App.js中import { Button } from 'antd';  引入按钮组件

在render渲染函数中

<Button type="primary">Primary</Button>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>

之后，我们就能看到效果了

App.js

import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './assets/css/index.css';
import routes from './model/routes'
// import { Button, Layout, Menu, Icon } from 'antd';
import { Layout, Menu, Icon } from 'antd';
const { Header, Sider, Content } = Layout;
class App extends Component {
  state = {
    collapsed: false,
  };
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }
  render () {
    return (
      <Router>
        <div className="App">
          {/* <img src={logo} className="App-logo" alt="logo" width='100px' /> */}
          <Layout>
            <Sider
              trigger={null}
              collapsible
              collapsed={this.state.collapsed}
            >
              <div className="logo" />

              <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                <Menu.Item key="1">
                  <Icon type="user" />
                  <span><Link to="/">首页</Link></span>
                </Menu.Item>
                <Menu.Item key="2">
                  <Icon type="video-camera" />
                  <span><Link to="/user">用户</Link></span>
                </Menu.Item>
                <Menu.Item key="3">
                  <Icon type="upload" />
                  <span><Link to="/shop">商户</Link></span>
                </Menu.Item>
                <Menu.Item key="4">
                  <Icon type="upload" />
                  <span><Link to="/news">新闻</Link></span>
                </Menu.Item>
              </Menu>
            </Sider>
            <Layout>
              <Header style={{ background: '#fff', padding: 0 }}>
                <Icon
                  className="trigger"
                  type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                  onClick={this.toggle}
                />
              </Header>
              <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
                {
                  routes.map((value, key) => {
                    if (value.exact) {
                      // 向子组件传值
                      return <Route key={key} exact path={value.path}
                        render={props => (
                          <value.component {...props} routes={value.routes} />
                        )} />
                    } else {
                      // 向子组件传值
                      return <Route key={key} path={value.path}
                        render={props => (
                          <value.component {...props} routes={value.routes} />
                        )} />
                    }
                  })
                }
              </Content>
            </Layout>
          </Layout>


        </div>
      </Router>
    )
  }
}
// ReactDOM.render(<SiderDemo />, mountNode);
export default App;

App.css

@import '~antd/dist/antd.css';
*{
  margin: 0;
  padding: 0;
}
.App .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color .3s;
}

.App .trigger:hover {
  color: #1890ff;
}

.App .logo {
  height: 32px;
  background: rgba(255,255,255,.2);
  margin: 16px;
}
.App .ant-menu-item a{
  color: #fff;
}