第一個React + Ant Design網頁(一、配置+編寫主頁)
引用博主的另外一篇VUE2.0+ElementUI教程, 請移步: https://blog.csdn.net/u012907049/article/details/72764151
Ant Design是UI設計語言。Ant Design同樣出身名門,是阿里巴巴旗下螞蟻金融服務集團(旗下擁有支付寶、余額寶等產品)所設計的一個前端UI組件庫。目前支持了React, 並且有一個對Vue支持的測試版本。
http://ant.design/docs/react/getting-started ( 官方文檔 )
按照官方的文檔學習,要深入了解react組件化,根據需求refine代碼,完成組件嵌套和布局應用。 注意: 自己定義組件,首字母必須大寫!
正文
配置
這里我們需要用到的開發工具有
- Webstorm
-
Node.js(npm) 或 Yarn
關於Webstorm的安裝和npm的配置,在我的另一篇博客 從零開始搭建自己的VueJS2.0+ElementUI單頁面網站(一、環境搭建) 里面有詳細的介紹。這里不再贅述。
我們進入命令行,輸入
npm install -g create-react-app yarn (全局安裝 create-react-app和yarn)
對create-react-app這個腳手架進行全局安裝。然后進入到我們的workspace中,輸入如下代碼
create-react-app antd-demo (創建項目,名字必須都要小寫,,不能有大寫字母)
就可以創建一個名字為andt-demo的React工程。創建的過程很有特點,像是在給硬盤整理碎片。 (現在好像不一樣, 我的是 #符號的########### 進度條)

創建完之后我們就可以在Webstorm中打開這個工程。目錄結構如下

這個時候我們就完成了最基本的工程創建。
如果我們此時在命令行中進入這個工程,並輸入
cd antd-demo (要進入文件才能 start)
npm start (如果端口3000有使用,自己會變成3001,3002,3003...)
稍等一會之后瀏覽器會啟動一個新的標簽頁。如圖。

這里面使用了熱加載技術,我們在代碼中做出的改變會實時顯示在頁面上。(也就是頁面隨代碼實時更新)
接下來我們還要做一件事: 引入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。
以上參考CSDNhttps://blog.csdn.net/u012907049/article/details/73240865,編輯.