我的react学习之行-02总体设计与react组件header设计

Posted 2022-11-30 AlexKing阁下

总体设计

因尚未想好如何设计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的一些生命周期的东西了。找个一段博客单独来写.