开发你的第一个React + Ant Design网页(一、配置+编写主页)

React是Facebook推出的一个前端框架，之前被用于著名的社交媒体Instagram中，后来由于取得了不错的反响，于是Facebook决定将其开源。出身名门的React也不负众望，成功成为当前最火热的三大前端框架之一。相比于Angular，React更加轻量。而相对于另一个轻量级前端框架Vue来说，React虽然学习和使用起来难度稍微大一些，但是React的社区相对来说人气更旺，而且在移动端的开发上面，大名鼎鼎的React Native更是尽显优势，在代码性能上要好过Vue框架。今天我们就来对React进行一个入门的学习。
这里还要用到的是一个UI设计语言，Ant Design。Ant Design同样出身名门，是阿里巴巴旗下蚂蚁金融服务集团（旗下拥有支付宝、余额宝等产品）所设计的一个前端UI组件库。目前支持了React， 并且有一个对Vue支持的测试版本。

配置

这里我们需要用到的开发工具有

• Webstorm

• Node.js(npm) 或 Yarn

  关于Webstorm的安装和npm的配置，在我的另一篇博客 从零开始搭建自己的VueJS2.0+ElementUI单页面网站（一、环境搭建） 里面有详细的介绍。这里不再赘述。
  我们进入命令行，输入

npm install -g create-react-app yarn

对create-react-app这个脚手架进行全局安装。然后进入到我们的workspace中，输入如下代码

create-react-app antd-demo

就可以创建一个名字为andt-demo的React工程。创建的过程很有特点，像是在给硬盘整理碎片。

创建完之后我们就可以在Webstorm中打开这个工程。目录结构如下

这个时候我们就完成了最基本的工程创建。如果我们此时在命令行中进入这个工程，并输入

npm start

稍等一会之后浏览器会启动一个新的标签页。如图。

这里面使用了热加载技术，我们在代码中做出的改变会实时显示在页面上。

接下来我们还要做一件事: 引入Ant design的组件库:

yarn add antd

这样工程就已经配置完毕了。

创建主页

在src中创建一个文件夹，名为Navi，在Navi文件夹下面创建一个Navi.js和一个Navi.css文件。
在Navi.js中，加入如下代码

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: !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;

在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";

ReactDOM.render(<SiderDemo />, document.getElementById("root"));
registerServiceWorker();

可以看到程序默认在一开始的时候就渲染我们的SiderDemo组件，即刚才写好的首页组件。修改完之后我们重新运行

npm start

可以看到我们编写的首页已经在运行中了,并且支持左侧菜单栏的缩放功能。如下图：

至此一个简单的首页就做成了。在下一篇文章中我会介绍React中Router的使用方法，以及更多的Ant Design组件。

这篇文章所属的系列是一个对React的入门，前端所使用的组件库是Ant Design。如果你想查看关于Vue的入门，可以查看我的另一个系列 从零开始搭建自己的VueJS2.0+ElementUI单页面网站 。