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