# react-blogs-webpack

**Repository Path**: github-31301552/react-blogs-webpack

## Basic Information

- **Project Name**: react-blogs-webpack
- **Description**: 使用react搭建个人博客的前端页面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-10-28
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-blogs-webpack
使用react搭建个人博客的前端页面

在开发过程中遇到的问题：
1、莫名的警告：在安装node的各种依赖包的时候，需要注意那些是开发模式的，那些是生产模式使用-S或者--save并且会在dependencies中显示反之使用开发模式的使用-D或者--save-dev，会在devDependencies中显示

2、在webpack中引入字体css文件的问题：由于没有正视入口文件的问题，其实只要在入口文件中使用require就可以将css引入为全局的字体css中的字体文件的路径只要保证是相对于自身目录的就可以，童谣要强调的是引入的时候都要加上./使用绝对路径的写法

3、关于webpack中图片引入的路径以及css.js的引入问题，首先说说css以及js文件的引入的问题，直接在需要的组件中使用require或者import引入，需要注意的是，react组件话的问题，所以使用的时候，时刻注意在组件中引入的，就可以在组件中使用对应的样式以及其他东西，需要使用哪儿组件直接调用就可以，现在的问题是图片的引入，目前可行的方式只有将图片单个引入然后使用，src={}对象的形式
这样的话（ps：React项目中图片一般都是通过api接口调用的），小面积使用这种方式没问题，还有一个问题就是path和publicPath以及热加载和打包的各种问题，不明白

4、在记性render的渲染中使用到了循环函数发现了两种方式第一种：利用在外面定义一个遍历的函数然后将这个方法名写在状态中然后在html中执行这个函数如：{
                                            this.state.getDataContent?
                                            this.getPages(4)
                                            :console.log('空')
                                        }
                                        getPages(item){
                                            var pages = [];  
                                            for(var i = 0; i < item; i++){  
                                                pages.push(<li key={i}><a href="#">{i+1}</a></li>)
                                            }
                                            console.log(pages)
                                            return pages;  
                                        }
                                        （ps:这里写在了一起为了方便看，方法应该写在render之前）
第二种：利用map的占位符的方式如：{
                                            [...Array(4)].map((item, i) => {
                                                return (
                                                    <li key={i}><a href="#">{i+1}</a></li>
                                                )
                                            })
                                        }
5、获取自定义属性值：e.target.dataset.page

6、文章的详情页的跳转，使用Link中的to参数并且这个参数可以是一个对象可以传递变量如下：
<Link to={{pathname:`/${moment(item.date).toNow(true)}/${item.title}`}} />

7、4个小时的bug：首先说明下事情的起因：由于我想做到详情页底部的文章切换，那时候只相到通过路由的link中的pathname进行url的改变；以及路由中的state进行一些值的传递，（传递当前这条数据在一组数据中的位置，然后在根据的组件中查找到之前的数据以及之后的数据）；由于是同个组件的不同路由之间的重新渲染，所以使用componentDidMount根本做不到（因为这个钩子函数只在组件首次被绚烂的时候进行的函数，当你在同一个组件中中在次绚烂就需要使用componentwillDidupdata或者其他的）但是当我首次使用componentwillDidupdata的时候发现他会死循环的执行这个钩子函数，通过百度找到了componentWillReceiveProps（nextProps）百度的时候他是带个nextProps的参数的但是由于没有仔细看，以及对生命周期函数的不理解，忽视了，然后以陷入一堆的死循环中，首先是两次this的打印结果不同，随后就是通过路由传递的值总是慢一拍的接收，慢一拍是bug的突破口，我又重新的去翻阅资料发现他自带nextProp属性将传递过来的prop先储蓄在这里，然后就造成了总是慢一拍的节奏总结：查阅资料的时候切记仔细，首先先研究透彻你要使用的东西的属性以及方法还有就是之一事项，这样才会事半功倍，不会像我这样                                            


技术栈:reaxt react-router bootstrap  使用  npm install react-treebeard --save（树型菜单） moment(日期处理) 

测试阶段：
1、建立路由以及使用React-redux；
2、使用bootstrap的分页功能


React-reducers的细化使用
1、将reducer进行拆分 ， 拆到reduxers/counter.js
2、将action进行拆分，拆到store/index.js

mapDispatchToProps其实是对象，里面是一个函数的集合
3、将mapDispatchToProps对象下的方法进行细分，在action中使用然后对对象下的方法进行按需引入
4、对mapStateToProps进行了重新命名为getValue  
5、对reducer进行了一个state的添加，增加了count1的状态
6、对应的action就需要增相应的函数操作，decrease
7、将State和action引入到组件中去

8、一步留的操作安装redux-thunk以及在redux中使用applyMiddleware
重点：我们不能直接对啊值进行修改，之前的redux有一个概念是pure function 纯函数