运用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项目的构造也比较简朴,没有庞杂交互。所以就是运用了一个全局的对象去治理数据。
不足
首先是github的issue接口是限定接见的,好像是60/h/ip,假如想要进步接口限定,就须要登录受权,而登录受权须要把token或许帐户暗码放在前端代码里,如许做不安全。
所以如今可能会涌现要求失利的状况。而且github的issue是一次将一切数据返回的,假如博客内容太长的话,返回速率很慢。我测试了一下,要求3个比较长的issue,须要3s摆布。
这在体验上太不好了。背面有精神的话,可能会本身搭建一个背景去处理。
其次是款式还不太雅观,许多细节没有处理好,挪动端也没有适配