react初探索--react + react-router + ant-design 後臺管理系統配置
首先確認安裝了node環境，Node >= 6。
如果對react 及 ant-design 一無所知，建議去閱讀下api文檔，react 可以在 codePen 在線練習。 react Api中文文檔 ant-design 中文文檔
本人也是第一次接觸react，對本教程如疑問，歡迎評論 或 發送至 [email protected] 交流
1，全局安裝Create React App , 創建項目
Create React App 是開始構建新的 React 單頁應用程序的最佳方式。已經配置好了像 Babel 和 webpack 這樣的構建工具，省去了很多配置的煩惱。
npm install -g create-react-app //全局安裝
create-react-app my-app //選擇合適的目錄創建你的項目， my-app 為你的項目名稱
cd my-app //進入項目目錄
npm run start //啟動項目，會在瀏覽器中自動打開 http://localhost:3000/
1）生成的項目目錄如下
my-app/ node_modules/ //依賴的包 public/ index.html //頁面模板 favicon.ico //就是ico.. manifest.json src/ //開發源碼 App.css App.js App.test.js index.css index.js //js入口文件 logo.svg registerServiceWorker.js package.json README.md
2）項目啟動之後界面
在項目目錄並未發現配置文件 webpack.config，在項目根目錄執行 npm run eject 暴露出配置文件，執行完成會自動生成config文件夾及配置文件。
2，安裝 less 及配置
因為本菜鳥還沒用過less，所以在此嘗試學習使用less
npm install less-loader less --save-dev //--save-dev 只在開發時依賴的包裹。 --save 發布時會依賴的包
修改 webpack.config.dev.js 和 webpack.config-prod.js
改動1：exclude:[ ] 中的 /\.css$/ 改為 /\.(css|less)$/
改動2：test:/\.css$/ 改為 test: /\.(css|less)$/
3，安裝 ant design
npm install antd --save
4，安裝 react-router-dom
有些童鞋 可能安裝的是 react-router，react-router 和 react-router-dom 配置差別很大，個人建議使用react-router-dom，附上兩者差別說明：react-router 和 react-router-dom 的區別
npm install --save react-router-dom
5，創建組件 及 路由配置
因為 index.js是項目主入口文件，所以將路由配置在index.js。在github看大神代碼路由都是單獨放一個文件夾中配置的，因個人不太熟悉，所以先這樣寫，後續優化。
在src 文件夾下 創建 components文件夾，將APP.js 移入componets，創建組件 Pagebutton.js，Test1.js，裏面運用antd隨便寫點內容
index.js 詳細配置
import React,{ Component } from ‘react‘;
import ReactDOM from ‘react-dom‘;
import logo from ‘./logo.svg‘;
//引入antd導航組件
import {Menu, Icon, Layout} from ‘antd‘;
//引入ant-design樣式
import ‘antd/dist/antd.css‘;
import ‘./components/App.css‘;
//引入路由
import {
BrowserRouter as Router,
Route,
Link
} from ‘react-router-dom‘;
//引入樣式
import ‘./index.css‘;
//引入組件
import App from ‘./components/App‘;
import Pagebutton from ‘./components/Pagebutton‘;
import Test1 from ‘./components/Test1‘;
import registerServiceWorker from ‘./registerServiceWorker‘;
const SubMenu = Menu.SubMenu;
//layout布局元素
const { Header, Footer, Sider, Content } = Layout;
class Hello extends Component{
constructor(props){
super(props)
this.state={
collapsed: true,
mode:"inline",
theme:"dark"
}
}
toggleCollapsed = () => {
this.setState({
collapsed: !this.state.collapsed,
});
}
render(){
return(
<Router>
<Layout>
<Sider>
<div type="primary" className="App-logo-wrap" id="logo">
<img src={logo} className="App-logo" alt="logo"/>
</div>
<Menu
defaultSelectedKeys={[‘0‘]}
defaultOpenKeys={[‘0‘]}
mode={this.state.mode}
theme={this.state.theme}
inlineCollapsed={this.state.collapsed}
>
<Menu.Item key="0">
<Link to="/"><span><Icon type="mail" /><span>index</span></span></Link>
</Menu.Item>
<SubMenu key="sub1" title={<span><Icon type="mail"/><span>General</span></span>}>
<Menu.Item key="1">
<Link to="/Pagebutton">Button</Link>
</Menu.Item>
<Menu.Item key="2">
<Link to="/Test1">Icon</Link>
</Menu.Item>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="appstore"/><span>Layout</span></span>}>
<Menu.Item key="3">Grid</Menu.Item>
<Menu.Item key="4">Layout</Menu.Item>
</SubMenu>
<SubMenu key="sub3" title={<span><Icon type="appstore"/><span>Navigation</span></span>}>
<Menu.Item key="5">Affix 固釘</Menu.Item>
<Menu.Item key="6">Breadcrumb 面包屑</Menu.Item>
<Menu.Item key="7">Menu 導航菜單</Menu.Item>
<Menu.Item key="8">Pagination 分頁</Menu.Item>
<Menu.Item key="9">steps 步驟條</Menu.Item>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="appstore"/><span>Data Entry</span></span>}>
<Menu.Item key="10">AutoComplete 自動完成</Menu.Item>
<Menu.Item key="11">Cascader 級聯</Menu.Item>
<Menu.Item key="12">Checkbox</Menu.Item>
<Menu.Item key="13">DatePicker</Menu.Item>
<Menu.Item key="14">Form</Menu.Item>
<Menu.Item key="15">Input</Menu.Item>
<Menu.Item key="16">InputNumber</Menu.Item>
<Menu.Item key="17">Mention 提及</Menu.Item>
<Menu.Item key="18">Rate 評分</Menu.Item>
<Menu.Item key="19">Radio</Menu.Item>
<Menu.Item key="20">Select</Menu.Item>
<Menu.Item key="21">Switch</Menu.Item>
<Menu.Item key="22">TreeSelect</Menu.Item>
<Menu.Item key="23">TimePicker</Menu.Item>
<Menu.Item key="24">Transfer 穿梭框</Menu.Item>
<Menu.Item key="25">Upload</Menu.Item>
</SubMenu>
<SubMenu key="sub5" title={<span><Icon type="appstore"/><span>Data Display</span></span>}>
</SubMenu>
<SubMenu key="sub6" title={<span><Icon type="appstore"/><span>Feedback</span></span>}>
</SubMenu>
<SubMenu key="sub7" title={<span><Icon type="appstore"/><span>Other</span></span>}>
</SubMenu>
</Menu>
</Sider>
<Layout>
<Header>it is nothting</Header>
<Content>
<Route exact path="/" component={ App } />
<Route path="/Pagebutton" component={ Pagebutton } />
<Route path="/Test1" component={ Test1 } />
</Content>
<Footer>
React-Admin ?2018 Created by 15521285778@163.com
</Footer>
</Layout>
</Layout>
</Router>
)
}
}
// 配置路由
ReactDOM.render(<Hello />, document.getElementById(‘root‘));
registerServiceWorker();
6，將項目上傳至git
參考方法：create-react-app創建項目 上傳至git並預覽
git地址：https://github.com/huangdouya/huangdouya.github.io
預覽地址：https://huangdouya.github.io/react-admin/build/#
註意：上傳至git之前，查看 .gitignore 文件內是否有 “/build” ,有的話刪除，否則在gitignore會忽略build文件夾的上傳，github無法預覽。
遇到問題：在git預覽項目時頁面刷新出現404。解決方法：使用HashRouter 代替BrowserRouter，出現任何問題都指向index.html，如有更好的方法，歡迎評論
react初探索--react + react-router + ant-design 後臺管理系統配置