react初探索--react + react-router + ant-design 後臺管理系統配置

時間 2019-11-11

標籤 react 探索 router ant design 後臺管理系統配置欄目 React 简体版

原文原文鏈接

首先確認安裝了node環境，Node >= 6。css

若是對react 及 ant-design 一無所知，建議去閱讀下api文檔，react 能夠在 codePen 在線練習。 react Api中文文檔 ant-design 中文文檔html

本人也是第一次接觸react，對本教程如疑問，歡迎評論或發送至 15521285778@163.com 交流node

1，全局安裝Create React App , 建立項目react

　　Create React App 是開始構建新的 React 單頁應用程序的最佳方式。已經配置好了像 Babel 和 webpack 這樣的構建工具，省去了不少配置的煩惱。webpack

npm install -g create-react-app  //全局安裝
create-react-app my-app  //選擇合適的目錄建立你的項目，  my-app 爲你的項目名稱
cd my-app  //進入項目目錄
npm run start //啓動項目，會在瀏覽器中自動打開 http://localhost:3000/

　　1）生成的項目目錄以下git

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）項目啓動以後界面github

　　在項目目錄並未發現配置文件 webpack.config，在項目根目錄執行 npm run eject 暴露出配置文件，執行完成會自動生成config文件夾及配置文件。web

2，安裝 less 及配置npm

　　由於本菜鳥還沒用過less，因此在此嘗試學習使用lessjson

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();