使用react搭建简单博客

omgdog 发布于2019-08-20 14:41 / 3327人阅读

摘要：使用搭建简单博客自己之前学习的时候只是跟着教程走了一遍，粗略的了解了一些概念。最近想搭建一个博客程序，实际演练一下。整体思路如果要搭建一个完整的博客的话，要做很多的工作。拆分好组件复用起来页比较简单。所以就是使用了一个全局的对象去管理数据。

使用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左右。

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81841.html

【单页面博客从前端到后端】基于 DVA+ANTD 搭建博客前后台界面

摘要：在的的配置中添加自定义主题由脚手架和官网介绍，我们已经自己配置并新建好了主题文件。单页面博客从前端到后端环境搭建单页面博客从前端到后端基于搭建博客前后台界面单页面博客从前端到后端基于和的权限验证与的设计在上篇文章我们已经搭建好了基础的开发环境，接下来会介绍如何引入 DVA 和 ANTD ，以及在引入过程中需要注意的问题。这里只会详细的书写部分组件，其他的组件都是大同小异。你可以在 g...

zqhxuyuan 2019-08-21 11:42 评论0 收藏0
create-react-app+react-app-rewired搭建viewport解决方案

摘要：一个中使用的。比如在项目中的引入它们在中加入以下代码修改项目中的后记完结撒花本文简单研究了一下如何搭建解决方案，如有错误欢迎指出。 create-react-app搭建vw-layout解决方案前言：我第一次接触到vw适配移动端的方案是在大漠先生的博客里（如何在Vue项目中使用vw实现移动端适配）,强烈建议没看过的朋友先去看一下这篇博客。vw解决方案早有耳闻，我也很想上手尝试一下，所...

lbool 2019-08-23 12:30 评论0 收藏0
react 搭建博客---支持markdown的富文本编辑器

摘要：最近在学，准备配合搭个博客，找了很多富文本编辑器，都不是很适合用，后来看到一篇搭建博客的文章，里面使用的地址，完全就符合我的想法啊，界面简洁大方还有预览功能。最近在学nodejs，准备配合react+mongodb搭个博客，找了很多富文本编辑器，都不是很适合react用，后来看到一篇vue+node搭建博客的文章，里面使用的simplemde(github地址)，完全就符合我的想法啊...

tylin 2019-08-21 11:52 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
单页面博客从前端到后端

摘要：说到底，当自己独自开发从搭建开发环境，到前端的每一个组件，到动作交互，再到和后端的数据交互，难免遇到不少问题。单页面博客从前端到后端基于和的权限验证与的设计引入来实现富文本编辑器是开源的用于构建富文本编辑器的框架。不会后端的前端，不会写单页面应用... 单页面应用的概念已经被提出很长时间了，无论是基于 vue, angular 还是 react，相信大家或是耳濡目染，或是设身处地都有...

whinc 2019-08-20 17:20 评论0 收藏0