React学习 第二节 引入antd

第一步：安装antd组件库，执行以下命令(默认安装的是最新版本的antd)

npm install antd

第二步：引入antd的首页布局组件Layout

在antd官网的API中，找到你想使用的Layout样式，复制其代码，在src/App.js中，引入该组件，示例如下：

import { Layout, Menu, Breadcrumb, Icon } from 'antd';  此为引入antd组件的方式，只有这样引入后，才可在return中使用已引入的组件，否则会报该组件未定义的错误

import React, { Component } from 'react';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import './App.css';
const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;


class App extends Component {
  state = {
    collapsed: false,
  };

  onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  }

  render() {
    return (
        

          
            
              

              
                
                  
                  Option 1
                
                
                  
                  Option 2
                
                User}
                >
                  Tom
                  Bill
                  Alex
                
                Team}
                >
                  Team 1
                  Team 2
                
                
                  
                  File
                
              
            
            
              

              
                
                  User
                  Bill
                
                

                  Bill is a cat.
                
              
              

                Ant Design ©2016 Created by Ant UED
              
            
          
        
    );
  }
}

export default App;

第三步：引入antd的样式文件

经过第二步后，页面确实出来了，但是你会发现跟在官网看到的效果完全不一样，那是因为还有antd的样式文件还未被引入使用

修改src/App.css，在文件的顶部，写入如下代码：

@import '~antd/dist/antd.css';

此时，页面的效果就出来了