作者

React是一个用于构建用户界面的 JAVASCRIPT库。通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中,Ant design是基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。那么让我们马上来搭建一个属于自己的后台吧~

##建立一个React项目 1、 Ant Design官网侧边栏点击Create-React-App 中使用,接着我们只需要按照文档做新项目配置: 首先在命令行中安装 create-react-app 工具,你可能还需要安装 yarn

npm install -g create-react-app yarn

2、然后新建一个项目

create-react-app antd-demo

3、然后我们进入项目并启动

cd antd-demo
yarn start

4、yarn start启动后,如果成功看到下图,那么恭喜你!已经拥有了你的第一个react项目!

现在优化一下项目路径,最后只剩下下图路径:

页面之间跳转必不可少的那就是路由了,现在先来配置路由

npm i --save react-router-dom

修改src/app.js 引入路由文件

import React from 'react'
import {BrowserRouter as Router,Route, Link, Switch} from 'react-router-dom'

##配置Ant design 必要下载antd

yarn add antd

以前会通过修改src/App.css,在文件中加上 @import '~antd/dist/antd.css';但此引入方法实际上加载了全部的 antd 组件的样式(对前端性能是个隐患)。

所以我们需要对 create-react-app 的默认配置进行自定义,这里我们使用 react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案)。

引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系,你还需要安装 customize-cra

$ yarn add react-app-rewired customize-cra

然后将package.json下面示例的加号部分加上,减号部分删掉。

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件(原理),现在我们尝试安装它并修改 config-overrides.js 文件:

$ yarn add babel-plugin-import

config-overrides.js 文件中写入:

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
);

之后在scr/app.js代码中,加上Ant design的布局组件,完整代码如下:

import React, {Component} from 'react';
import {Layout, Menu, Breadcrumb, Icon} from 'antd';
import {BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';
import './App.css';
import Home from './views/Home'
import AdvertisementNode from './views/AdvertisementNode'
const {SubMenu} = Menu;
const {Header, Content, Sider} = Layout;

class App extends Component {
    render() {
        return (
            <Router>
                <Layout>
                    <Header className="header">
                        <div className="logo"/>
                        <Menu
                            theme="dark"
                            mode="horizontal"
                            defaultSelectedKeys={['2']}
                            style={{lineHeight: '64px'}}
                        >
                            <Menu.Item key="1">nav 1</Menu.Item>
                            <Menu.Item key="2">nav 2</Menu.Item>
                            <Menu.Item key="3">nav 3</Menu.Item>
                        </Menu>
                    </Header>
                    <Layout>
                        <Sider width={200} style={{background: '#fff'}}>
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={['1']}
                                defaultOpenKeys={['sub1']}
                                style={{height: '100%', borderRight: 0}}
                            >
                                <Menu.Item key="1">
                                    <Link to='/'>
                                        <Icon type="pie-chart"/>
                                        <span>首页</span>
                                    </Link>
                                </Menu.Item>
                                <SubMenu key="sub1" title={<span><Icon type="user"/>广告</span>}>
                                        <Menu.Item key="1">
                                            <Link to='/advertisement_nodes'>广告列表</Link>
                                        </Menu.Item>
                                    <Menu.Item key="3">option3</Menu.Item>
                                    <Menu.Item key="4">option4</Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub2" title={<span><Icon type="laptop"/>subnav 2</span>}>
                                    <Menu.Item key="5">option5</Menu.Item>
                                    <Menu.Item key="6">option6</Menu.Item>
                                    <Menu.Item key="7">option7</Menu.Item>
                                    <Menu.Item key="8">option8</Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub3" title={<span><Icon type="notification"/>subnav 3</span>}>
                                    <Menu.Item key="9">option9</Menu.Item>
                                    <Menu.Item key="10">option10</Menu.Item>
                                    <Menu.Item key="11">option11</Menu.Item>
                                    <Menu.Item key="12">option12</Menu.Item>
                                </SubMenu>
                            </Menu>
                        </Sider>
                        <Layout style={{padding: '0 24px 24px'}}>
                            <Breadcrumb style={{margin: '16px 0'}}>
                                <Breadcrumb.Item>Home</Breadcrumb.Item>
                                <Breadcrumb.Item>List</Breadcrumb.Item>
                                <Breadcrumb.Item>App</Breadcrumb.Item>
                            </Breadcrumb>
                            <Content style={{background: '#fff', padding: 24, margin: 0, minHeight: 280}}>
                                <Switch>
                                    <Route exact path="/" component={Home}/>
                                    <Route exact path="/advertisement_nodes" component={AdvertisementNode}/>
                                </Switch>
                            </Content>
                        </Layout>
                    </Layout>
                </Layout>
            </Router>
        );
    }
}
export default App;

src文件夹下新建一个路径为views/AdvertisementNode的组件和views/Home的组件。两个组件中代码结构:

import React, {Component} from 'react';
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        return (
            <div>首页内容</div>
        );
    }
}
export default Home;

此刻你可以试着点击你的侧边栏,是不是已经可以在首页和广告页之间点击切换了呢? So easy!在React海洋中快乐的去遨游吧~

参考文档:Ant design

转载请注明,来自https://itfun.tv/news/104