从零开始编写React-Express单页博客运用(进修总结)

2019年8月31日 157次阅读 来源: harryfyodor

React-Express单页博客运用编写总结

良久之前就想写一个博客运用.
在一最先想要直接用express和ejs模板直接写, 然则暑假一最先的时刻不小心入了react的坑, 所以就一不做二不休直接用react写. 那既然用了react, 不写个单页运用也过意不去了…(不
前前后后写了快要两个礼拜, 如今看来这实际上是一个很轻易的运用. 然则鉴因而第一次用react, 关于nodejs也不是迥殊熟习, 所以走了不少冤枉路. 个中也有很屡次觉得想摒弃, 不过终究照样写下来了. 虽然照样有不少瑕疵, 不过也算给自身一个交卸吧.
个人博客网站的地点为: harryfyodor.tk
下面会从几个方面把我全部编写的历程的一些履历纪录下来, 主假如纪录自身的进修历程, 编写中碰到的难题以及处置惩罚, 以及一些进修/复习材料的整顿分享. 也愿望给列位和我一样的初学者一点点自创的履历.
(个人觉得比较好的进修体式格局就是自身看材料(文档和博客)然后写自身的一个小运用, 而不是随着某一个教程从头至尾过一遍, 虽然不能不认可, 后者学起来的觉得很爽, 而且也更清楚. 然则不好的处所就是手艺栈不完全婚配的时刻就会很头疼…)
下面是目次:

  1. 前端 (包含react, redux, css-module等)

  2. 后端 (包含express, mongodb)

  3. 前后端 (包含fetch, jwt)

  4. 其他 (包含webpack, 优化等)

下面直接进入正题.

第一部份 前端

1, react

react的进修依据官方文档, 主假如明白一下几个方面的内容:

  1. 构建模块的要领. 用了引荐es6的class的要领而非createClass.

  2. 怎样导入导出模块. es6的import和export.

  3. jsx的编写. 不是必要的, 官网引荐. 觉得个顶用上es6模板字符串, map要领会很轻易许多~

  4. props, state, refs的相干观点以及运用. 单向数据流中, 父组件给子组件通报数据经由过程props, 子组件给父组件通报数据用回调函数. 后者的完成是经由过程父组件把一个函数传到子组件中, 这个函数内里有可以有this.setState(收到子组件的数据后马上衬着), 然后子组件挪用传进来的函数, 经由过程这个函数把参数传给父组件.

  5. 控制connect组件的运用要领. 把state数据和dispatch传进组件中.

  6. 生命周期. 在这个博客SPA运用里用了componentDidMount和componentWillReceiveProps, 前者可用于初始化的衬着以及异步要求的提议, 后者用于接收到新的数据时的再次衬着, 把异步的效果衬着出来. 因而一个组件(涉及到异步)是如许事情的: 挪用组件 -> 组件衬着之前提议异步要求 -> 第一次衬着,没有数据的页面 -> 接收到异步发回来的数据 -> 从新衬着, 有数据的页面. 代码以下, 基础也是根据这类数据流向的要领来的(不知道是不是是最好的计划, 然则觉得很轻易).

    class Archive extends React.Component {
    constructor(props) {
    super(props);
    this.displayName = 'Archive';
    this.state = {
      articles: []
    }
  }

  componentDidMount() {
    this.props.actions.getTitles({
      type: "ARCHIVE"
    })
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      articles: nextProps.getTitles.articles
    })
  }

  render() { 
    return (
      <div className={style.archive}>
        {/*这里是相干的衬着articles的操纵, 注主要把[]的状况也考虑到*/}
      </div>
    )
}

    }

    export default Archive

配合好setState和生命周期, 运用好父子组件之间的数据通报可以很好地完成种种异步衬着.

2, redux

明白redux主假如要明白action, reducer, middleware等观点. 个人觉得redux的官方文档几乎出色, 例子也很雄厚, 异常值得进修. 这个SPA博客里的action大部份是为了ajax猎取后端数据服务的. 下面选取了个中的一组, 功用是猎取零丁的文章. 对应差别响应状况有差别的action. 如许就可以把异步的每个状况纪录下来, 使得数据的流向越发清楚. 详细有关异步要求的相干的内容可以看我的上一篇文章.

export const singleRequest = () => {
  return {
    type: SINGLE_REQUEST
  }
}

export const singleSuccess = (article) => {
  return {
    type: SINGLE_SUCCESS,
    article: article
  }
}

export const singleFailure = () => {
  return {
    type: SINGLE_FAILURE
  }
}

export const getSingle = (day, title) => {
  return dispatch => {
    dispatch(singleRequest())
    return fetch('/api/single', {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json" 
      },
      body: JSON.stringify({
        day: day,
        title: title
      })
    })
    .then(checkHttpStatus)
    .then(res => res.json())
    .then(res => {
      if(res.ok) {
        dispatch(singleSuccess(res.article))
      } else {
        dispatch(singleFailure())
      }
    })
  }
}

至于在reducer中, 初始化state用了几个标识. 比以下面的例子中, 初始化的reducer state 包含了isFetching, isFetched, fetchFailure这些标志异步举行的当前状况的信息. 传入props以后可以很轻易地举行异步要求前后的设置. 比方说一个异步要在另一个异步以后, 就可以经由过程读取这几个数值完成. (第二个异步肯定要在第一个的isFetched为true的时刻才提议)

const initialState = {
  isFetching: false,
  isFetched: false,
  fetchFailure: false,
  articles: [],
  count: 1
}

在全部运用中须要用到中间件, 在运用顶用了thunk另有logger.

3, css-modules

在博客运用中css的引入用的是css-modules, 阮一峰大神的这篇文章讲得算是完整了, 感兴趣可以看一下~ 固然有些部份也照样用了css in js的要领, 直接把css写到js内里, 主假如考虑到一些操纵的轻易, 比方点击以后某一个标签display转变之类的.

第二部份 后端

说来惭愧, 后端大部份都是”抄”的, 之前看的一个教程是用express和ejs写的博客运用, 而后端的操纵大部份都比较靠近. 主要就是依据接口路由处置惩罚数据, 发送数据, 经由过程数据库api(这里是mongodb)读取数据库数据. 所以末了写出来的和我底本看的谁人教程有很大的相似之处. 我看的教程是这一个, 异常棒, 谢谢作者!!>o<!!

1, express (nodejs)

关于express个人觉得比较主要的是处置惩罚设置以及路由两个方面的题目.
前者须要靠自身逐步探索, 比方要处置惩罚json须要用到bodyParser模块, webpack一些中间件的设置等等, 可以拿redux官网另有上面提到的教程来参考一下.
后者主假如要相识express供应的种种要领, 以及一些有关res和req的相干操纵等等.

2, mongodb

有关数据库的操纵我也是参考上面的教程的…(oh..)基础对数据库的增删查改要控制. 更多有关mongo的api原理等可以去看官网引见.

3, 不足之处

因为目的不是专业后端, 所以后端做得比较粗拙. 不足之处有许多, 比方没有拥抱es6(明显前端已拥抱), 比方还在泰然自若地写着臭名远扬的回调金字塔等等等. nodejs须要增强.

第三部份 前后端

1, 登录 (JSON Web Token)

有关登录和登出最先找了许多相干的完成要领, 在这篇文章的引荐下看了JWT完成体式格局. 简朴来讲就是前端把暗码post到后端, 后端天生一个token然后发送到前端去. 前端把收到的token保存在localStorage中. 每次须要猎取一些保密的信息或许须要做一些修正的时刻, 把这个token写在要求的headers里. 后端收到数据以后就会先考证一下token是不是准确, 准确才许可操纵.

headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
        "Authorization": `Bearer ${token}`
      }

2,fetch (猎取数据)

关于前后端交互这一点可以参考我写的上一篇文章. 后端把api暴露出来给前端, 前端经由过程ajax举行数据的交互, 并把猎取到的数据衬着出来. 操纵上没有难度, 只是要注重异步操纵中redux要用中间件.
有关中间件还要去看点高阶函数的基础知识, 不然没法准确明白.

第四部份 其他

1,webpack

没有怎样认真地看webpack的东西, 都是随手操起来直接用的…
说实话, 第一次最先看chrome的devtool的network的时刻, 我被吓得不轻…一个bundle文件5m大, PC端翻开以后真的是不忍直视. 厥后上网找了一些webpack打包优化的方向, 在这里纪录一下:

  1. webpack的config文件内里不能有cheap-module-eval-source-map之类的devtool, 真的很大很大…

  2. plugin假如不是必要的话也请删去吧. 不过有两个plugin可以在临盆环境顶用一下, 第一个是UglifyJsPlugin, 用于压缩文件. 第二个是CommonsChunkPlugin, 这个详细下一点诠释.

  3. 恰当分块. CommonsChunkPlugin用于把bundle分块, 把可以放在缓存的, 经常使用的, 体积比较大的压缩到vendor内里(比方react等). 厥后又把babel-polyfill离开别的加载了. 之前有看到code split, 就是直到须要用到该ui组件的时刻才去加载, 主意彷佛不错, 不过觉得修改会比较大所以末了没有做.

末了的文件大小实在也照样不小, 然则有了很好的改良. 关于前端优化也是一个主要的话题.

2,markdown

博客运用写作用的是markdown. 底本想找一个现成的, 然则死活找不到适宜的…末了直接用marked强行假装markdown编辑器…实在这很不平安, 但如今也没有什么方法…(draft.js貌似可以?)

总结

整体来讲, 这个博客实在完成起来没有迥殊高的难度, 然则关于初学者来讲觉得真的挺不轻易的. 之前听过如许一句话–不要同时学几样东西, 实在还真的有点原理…然则关于一些最好实践, 自身就要连系在一起才发挥其最大的作用, 不一起学又怎样能行呢?(因而就陷入了大坑).
这个博客不完善的处所太多了, 迥殊是有关平安方面的题目.不过如今照样先关注着前端吧.

愿望这篇文章可以给你一点点协助.
末了上代码博客代码

(本人是初学者, 假如有什么说得不对, 不好的处所迎接指出来, 感激涕零!~互相进修!~)

    原文作者：harryfyodor
    原文地址: https://segmentfault.com/a/1190000006082056
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞