react + antdPro 從構建到運行 + 路由 + 組件 + 配置

不定期更新 ~
好久沒用了，這次自己重新熟悉下；有不對的地方或錯誤，希望大家多指正

快速構建

使用 create-react-app 快速構建 React 開發環境

	 cnpm install -g create-react-app
	 create-react-app my-app
	 cd my-app/
	 npm start

到這裏項目就已經啓動了 ： 默認會訪問 http://localhost:3000/，這裏不多闡述了

項目結構

這裏src下新增幾個文件夾，後面會一一闡述
components - 組件
containers - 頁面
Router - 路由
utils - 封裝工具類
store - react-redux

路由配置

項目構建出來默認是沒有路由文件的，這裏需要我們自己手動建一個

需要注意的是到這裏並不是已經完成了，我們在官網上看到的使用路由是 import { Router, Route, Link } from 'react-router'，
但是實際上我們看到需要引用的是import { BrowserRouter as Router, Route } from "react-router-dom";
原因是因爲 後者比前者多出了 <Link> <BrowserRouter> 這樣的 DOM 類組件。
因此我們只需引用 react-router-dom 這個包就行了。

import React from 'react'
import { BrowserRouter as Router, Route } from "react-router-dom";
import Login from './../containers/login';
import Home from './../containers/home';

function router() {
    return (
        <Router>
            <Route path="/home" component={Home} />
            <Route path="/login" component={Login} />
        </Router>);
}

export default router;

然後需要到 src下index.js 引入路由 並掛載

import React from 'react';
import { render } from 'react-dom';
// 由於 antd 組件的默認文案是英文，所以需要修改爲中文

import moment from 'moment';
import 'moment/locale/zh-cn';
import 'antd/dist/antd.css';
import './index.css';
import Router from './Router/index'
moment.locale('zh-cn');



render(<Router />, document.getElementById('root'));

到這裏我們就可以訪問 http://localhost:3000/login

組件使用

Home頁面引用並導入 Header Footer

import React from 'react';
import Header from './../../components/header'
import Footer from './../../components/footer'
const Home = () => {
    return (
        <div>
            <Header className="header" />
            <div>Home</div>
            <Footer className="footer" />
        </div>
    )
}
export default Home

header demo

import React from 'react';

const Header = () => {
    return (
        <div>
            header
        </div>
    );
};
export default Header;

utils工具類

const Utils = {
    // 時間相關處理 
    time: {
        // 獲取當前日期: yyyy-MM-dd
        getCurrentDate() {
            const time = new Date()
            let yyyy = time.getFullYear()
            let MM = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1
            let dd = time.getDate()
            return yyyy + '-' + MM + '-' + dd
        },
        // 時間戳轉化爲標準時間顯示
        timeStampTransform(timeStamp) {
            const time = new Date(timeStamp)
            let yyyy = time.getFullYear()
            let MM = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1
            let dd = time.getDate()
            let HH = time.getHours()
            let mm = time.getMinutes()
            let ss = time.getSeconds()
            return yyyy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss
        },
    }
}
export default Utils

上面我們寫了一個時間轉換的工具，
在使用前我們需要在src的index.js中引用掛載

import React from 'react';
import { render } from 'react-dom';
// 由於 antd 組件的默認文案是英文，所以需要修改爲中文


import 'moment/locale/zh-cn';
import 'antd/dist/antd.css';
import './index.css';
import Router from './Router/index'
import Utils from './utils'
import moment from 'moment';
moment.locale('zh-cn');

React.$Utils = Utils;

render(<Router />, document.getElementById('root'));

在 home.js中使用如下

import React, { Component } from 'react';
import Header from './../../components/header'
import Footer from './../../components/footer'
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: "js是世界上最好的語言"
        };
    }
    componentDidMount() {
        console.log(React.$Utils.time.getCurrentDate(''))
    }
    render() {
        return (
            <div>
                <Header className="header" />
                <div>Home
                    <div>
                        <p>
                            {this.state.data}
                        </p>
                        <p>
                            {React.$Utils.time.getCurrentDate('')}
                        </p>


                    </div>

                </div>
                <Footer className="footer" />
            </div >
        )
    }
}
export default Home

此處需要注意的是我們要用到 react 的 Component 以及生命週期，這裏不懂的小夥伴可以移步官方文檔查看哦。
頁面效果如下

這次先更新到這裏，後面會更新一下store的用法