开发你的第⼀个React+AntDesign ⽹页（⼀、配置+编写主页）
前⾔
React是Facebook推出的⼀个前端框架，之前被⽤于著名的社交媒体Instagram中，后来由于取得了不错的反响，于是Facebook决定将其开源。出⾝名门的React也不负众望，成功成为当前最⽕热的三⼤前端框架之⼀。相⽐于Angular，React更加轻量。⽽相对于另⼀个轻量级前端框架Vue来说，React虽然学习和使⽤起来难度稍微⼤⼀些，但是React的社区相对来说⼈⽓更旺，⽽且在移动端的开发上⾯，⼤名⿍⿍的React Native更是尽显优势，在代码性能上要好过Vue框架。今天我们就来对React进⾏⼀个⼊门的学习。
这⾥还要⽤到的是⼀个UI设计语⾔，Ant Design。同样出⾝名门，是阿⾥巴巴旗下蚂蚁⾦融服务集团（旗下拥有⽀付宝、余额宝等产品）所设计的⼀个前端UI组件库。⽬前⽀持了React， 并且有⼀个对Vue⽀持的测试版本。
正⽂
配置这⾥我们需要⽤到的开发⼯具有Webstorm
Node.js(npm) 或 Yarn
关于Webstorm的安装和npm的配置，在我的另⼀篇博客 ⾥⾯有详细的介绍。这⾥不再赘述。
我们进⼊命令⾏，输⼊
对create-react-app这个脚⼿架进⾏全局安装。然后进⼊到我们的workspace中，输⼊如下代码
就可以创建⼀个名字为andt-demo的React⼯程。创建的过程很有特点，像是在给硬盘整理碎⽚。
创建完之后我们就可以在Webstorm中打开这个⼯程。⽬录结构如下
npm install -g  create -react-app  yarn
create -react-app  antd -demo
这个时候我们就完成了最基本的⼯程创建。如果我们此时在命令⾏中进⼊这个⼯程，并输⼊
稍等⼀会之后浏览器会启动⼀个新的标签页。如图。
这⾥⾯使⽤了热加载技术，我们在代码中做出的改变会实时显⽰在页⾯上。
接下来我们还要做⼀件事: 引⼊Ant design的组件库:
这样⼯程就已经配置完毕了。
创建主页
在src中创建⼀个⽂件夹，名为Navi，在Navi⽂件夹下⾯创建⼀个Navi.js和⼀个Navi.css⽂件。 在Navi.js中，加⼊如下代码react native
npm start yarn add antd
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import React, { Component } from 'react';
import 'antd/dist/antd.css';
import logo from '../logo.svg';
import './Navi.css'
const { Header, Content, Footer, Sider } = Layout;
class SiderDemo extends Component {
state = {
collapsed: false,
mode: 'inline',
};
toggle = () => {
this.setState({
collapsed: !llapsed,
});
}
render() {
return (
<Layout>
<Sider
trigger={null}
collapsible
collapsed={llapsed}
>
<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={llapsed ? 'menu-unfold' : 'menu-fold'}
onClick={le}
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>
</Layout>
);
}
}
export default SiderDemo;
在Navi.css中加⼊如下代码：
.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;
}
上⾯就是⼀个带有导航栏的主页。我们写好了主页之后，还需要做⼀件事情，就是把这个组件挂载到程序的⼊⼝⽂件中。我们修改index.js，修改后的代码如下
import React from'react';
import ReactDOM from'react-dom';
import SiderDemo from'./Navi/Navi'
import registerServiceWorker from'./registerServiceWorker';
import'./index.css';
registerServiceWorker();
可以看到程序默认在⼀开始的时候就渲染我们的SiderDemo组件，即刚才写好的⾸页组件。修改完之后我们重新运⾏
npm start
可以看到我们编写的⾸页已经在运⾏中了，并且⽀持左侧菜单栏的缩放功能。如下图：
⾄此⼀个简单的⾸页就做成了。在下⼀篇⽂章中我会介绍React中Router的使⽤⽅法，以及更多的Ant Design组件。
结尾
这篇⽂章所属的系列是⼀个对React的⼊门，前端所使⽤的组件库是Ant Design。如果你想查看关于Vue的⼊门，可以查看我的另⼀个系列
。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。