使用react搭建简单博客

使用react搭建简单博客

自己之前学习react的时候只是跟着教程走了一遍,粗略的了解了一些概念。什么virtual-dom,单向数据流之类的。但是一致缺乏深入的实践。最近想搭建一个博客程序,实际演练一下。

整体思路

如果要搭建一个完整的博客的话,要做很多的工作。数据存储和解析、图片的保存等等。在浏览react china论坛的时候,看到一种利用github issue作为数据源的方式。觉得这种方式
很实用,主要时解决了后端存储问题。前端只需要调用api获取数据,渲染数据就好了。

程序初始化的时候,会请求github的issues接口,数据请求完后,再初始化程序。

blog结构

项目是利用create-react-app搭建的,隐藏了很多配置,只需要写好业务代码。整个blog的框架比较简单,只有两个模块:首页和归档。主题是仿照hexo主题hexo-theme-apollo
markdown渲染使用了ReactMarkdown。整个架构比较简单,拆分好逻辑之后,基本上就是拼接各个component了。拆分好组件、复用起来页比较简单。项目结构如下:

blog
--src
  --component
    --header
    --footer
    --article
    --title
    --time
    --...
  --view
  --index.js
  --app.js

使用react,感受最深的是component的拆分。比如一个Article,要不要拆分出title和Body两个组件,组件如何复用等等。拆分好component之后,剩下的工作就是针对各个页面
拼接component了。

在考虑要不要使用redux或者mobx时,尝试了一下,感觉太繁琐。这个blog项目的结构也比较简单,没有复杂交互。所以就是使用了一个全局的对象去管理数据。

不足

  1. 首先是github的issue接口是限制访问的,好像是60/h/ip,如果想要提高接口限制,就需要登录授权,而登录授权需要把token或者帐户密码放在前端代码里,这样做不安全。
    所以现在可能会出现请求失败的情况。而且github的issue是一次将所有数据返回的,如果博客内容过长的话,返回速度很慢。我测试了一下,请求3个比较长的issue,需要3s左右。

这在体验上太不好了。后面有精力的话,可能会自己搭建一个后台去解决。

  1. 其次是样式还不太美观,很多细节没有处理好,移动端也没有适配

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...