基于Ant Design UI框架的React项目

概述

这款基于React开发的UI框架，界面非常简洁美观，在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目

详细

代码下载：http://www.demodashi.com/demo/12205.html

一、安装webstorm + Noje.js(全局安装)

详细安装这里略过

 

二、全局安装create-react-app脚手架

用管理员身份运行cmd，输入：

?

1	npm install -g create-react-app yarn

 

成功！

三、创建React项目antd-demo1

继续在cmd命令窗口输入：

?

1	create-react-app antd-demo1

（因为之前已经创建过一个antd-demo，此处的antd-demo1是项目名称）

 

 

 

如上图，则创建成功！

四、引入Ant Design组件库

cmd命令进入项目根目录：

?

1	yarn add antd

 

如图引入成功！

五、打开webstorm，导入antd-demo1项目

 

六、项目启动

打开cmd，进入项目位置，输入：

?

1

npm start

 

 

网页自动打开，如图：

 

项目基本构建完成！

七、创建自己的页面

1. 在src目录下创建一个Home文件夹用来存放自己的代码

 

2. 在myIndex.js页面添加如下代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

import React,{Component} from 'react'; import { Layout, Menu, Breadcrumb, Icon } from 'antd'; import 'antd/dist/antd.css'; import logo from '../logo.svg'; import './myCss.css' const { Header, Content, Footer, Sider } = Layout;   //自定义组件SiderDemo class SiderDemo extends Component {     state = {         collapsed: false,         mode: 'inline',     };       toggle = () => {         this.setState({             collapsed: !this.state.collapsed,         });     }       render() {         return (             <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 className="nav-text">nav 1</span>                         </Menu.Item>                         <Menu.Item key="2">                             <Icon type="video-camera" />                             <span className="nav-text">nav 2</span>                         </Menu.Item>                         <Menu.Item key="3">                             <Icon type="upload" />                             <span className="nav-text">nav 3</span>                         </Menu.Item>                     </Menu>                 </Sider>                 <Layout>                     <Header style={{ background: '#000', padding: 0 }}>                         <span style={{color:'#fff', paddingLeft:'2%', fontSize:'1.4em'}}>                             <Icon                                 className="trigger"                                 type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}                                 onClick={this.toggle}                                 style={{cursor: 'pointer'}}                             />                         </span>                         <span style={{color:'#fff', paddingLeft:'2%', fontSize:'1.4em'}}>Information Management System</span>                         <span style={{color:'#fff', float:'right', paddingRight:'1%'}}>                             <img src={logo} className="App-logo" alt="logo" />                         </span>                     </Header>                     <Content style={{ margin: '0 16px' }}>                         <Breadcrumb style={{ margin: '12px 0' }}>                             <Breadcrumb.Item>User</Breadcrumb.Item>                             <Breadcrumb.Item>Bill</Breadcrumb.Item>                         </Breadcrumb>                         <div style={{ padding: 24, background: '#fff', minHeight: 780 }}>                           </div>                     </Content>                     <Footer style={{ textAlign: 'center' }}>                         Ant Design ©2016 Created by Ant UED                     </Footer>                 </Layout>             </Layout>         );     } }   //输出组件 export default SiderDemo;

3. 在myCss页面添加

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

.App-logo {     animation: App-logo-spin infinite 10s linear;     height: 60px; }   @keyframes App-logo-spin {     from { transform: rotate(0deg); }     to { transform: rotate(360deg); } }   .logo {     height: 32px;     background: #333;     border-radius: 6px;     margin: 16px; }   .ant-layout-sider-collapsed .anticon {     font-size: 16px; }   .ant-layout-sider-collapsed .nav-text {     display: none; }

4. 修改src\index.css内容

1 2 3 4 5 6

body {   margin: 0;   padding: 0;   font-family: sans-serif; } @import "./Home/myCss.css";/*引入自己写的css样式**/

5. 修改src\index.js内容

1 2 3 4 5 6 7 8 9 10

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css';//引入样式 import SiderDemo from './Home/myIndex';//引入自己写的组件(class) import registerServiceWorker from './registerServiceWorker';   ReactDOM.render(<SiderDemo />, document.getElementById('root')); registerServiceWorker(); //registerServiceWorker就是为react项目注册了一个service worker， // 用来做资源的缓存，这样你下次访问时，就可以更快的获取资

 

八、运行效果

此时如果cmd命令窗口未关闭，网页会自动刷新，如果关闭窗口，请按上述步骤5重新启动项目

 

成功！

代码下载：http://www.demodashi.com/demo/12205.html

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权