我的react學習之行-02總體設計與react組件header設計

總體設計

因尚未想好如何設計server，在這裏暫時不介紹了，後面會在這裏補上，先把前端搞定。

添加樣式

做樣式一定要支持css樣式，用來支持我們來畫自己的ui

npm i style-loader css-loader mini-css-extract-plugin --save-dev

這裏有一個坑，那就是如何將多個css文件整合成一個，一開始，我僅以下的rules

 {
     test:/\.css$/,
     use: ["style-loader","css-loader"
                ]
     },

發現完全樣式不對，在生產的文件中看到了多個

首先再webpack中新建插件變量，在插件變量中new一個，並設置

const MiniCssExtractPlugin=require('mini-css-extract-plugin');
 plugins:[
 new MiniCssExtractPlugin({
            filename:'css/[name].css'
        })
 ]

ok,這樣就能在react代碼中使用css樣式並打包成同一個了。

添加圖片

我們一般來講還有logo或者是背景等圖片需要我們加載打包，那麼此時我們就又要使用一個插件了，就是file-loader。
我需要把靜態static文件夾中的圖片放到output下做release。

npm i file-loader --save-dev

然後在webpack的rules中添加一個規則，用於打包圖片。

            {
                test:/\.(svg)$/,
                use: [
                    {
                        loader:'file-loader',
                        options:{
                            name: '[name].[ext]',
                            outputPath:'imgs/'
                        }
                    }
                ]
            }

準備工作均已經完成，下面就需要我們開始寫react的代碼了。

引入全局樣式與新建Home主頁面

在上一節，已經講過我們的入口現在是app.js文件了，新建containers，用於存放相關的容器。
於是有了home文件夾,用於存放主頁面。

import React, {Component} from 'react';
import './style.css';
import Header from '../../components/Header/Header';
import Menus from '../../components/Menus/Menus';
import 'antd/dist/antd.css';

class Home extends Component{
    render() {
        return(
            <div className='container' >
                <Header/>
                <div className="nav">
                    <Menus />
                </div>
                <div className="main">
                    這裏是文章列表
                </div>
            </div>
        );
    }

}

export default Home;

這裏的樣式文件就不說了。在主頁面，暫時引用了header與menus的組件，然後還引用了antd淘寶的一個庫，當然antd這個鬧過一個聖誕節彩蛋的事，後續會想辦法重構一遍代碼，盡力全部都是自己寫。

下面就是要有一個header的組件，用於看頭部的樣式。於是我們就要有components這個文件夾，用於存放組件。
新建header文件夾。

import React, {Component} from 'react';
import './style.css';
const logosvg = require('../../../static/logo.svg');

class Header extends Component{
    render() {
        return(
            <div className='header' >
               <span className='logo'>
                   <img src={logosvg}/>
               </span>
                <h1>cnskyline's blog</h1>
                <p> welcome to here</p>
            </div>
        );
    }

}

export default Header;

logo是我們需要引用的文件，那麼在static中就已經保存好logo，在react中require即可。
然後是菜單menus，用了antd。

import React, { Component } from 'react';
import './style.css';
import { Menu, } from 'antd';

const categories = ['首頁','Python','ReactJs'];

class Menus extends Component {
    constructor(props) {
        super(props)
        this.state = {
            current: categories[0]
        }
    }

    handleClick = (e) => {
        this.setState ({
            current: e.key
        })
    }

    render() {
        return (
            <Menu
                onClick={this.handleClick}
                selectedKeys={[this.state.current]}
                mode="horizontal"
                className="menucontainer"
            >
                {
                    categories.map((item,index)=>(
                        <Menu.Item key={item} >
                            {item}
                        </Menu.Item>
                    ))
                }
            </Menu>
        )
    }
}

export default Menus;

在這裏先不細說react的一些生命週期的東西了。找個一段博客單獨來寫.