React + Ant Design網頁,配置

第一個React + Ant Design網頁(1、配置+編寫主頁)

 引用博主的另一篇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單頁面網站（1、環境搭建） 裏面有詳細的介紹。這裏再也不贅述。 
  咱們進入命令行，輸入

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,編輯.