此网站前端技术简介

这一篇博文的目的是对这个网站的前端开发用到的一些技术做一个简单的说明。在前一篇博文中对相关技能点已经有所提及。这里在简单列一下，主要是用的前端库是这一些。

• react
• react-router-dom
• redux
• fontawesome
• github-markdown-css
• react-markdown
• less

代码

此网站前端项目的代码已经更新在github上。

react

react 这个框架不准备介绍太多，所有使用到的功能，都是按照官方文档来实现的。

为什么选择react？

react、vue、angular 是当今前端的三大框架，截止到今天（2019/05/11），github上 star 数量 vue（138k） > react (129k) > angular (47.9k)。 相关仓库数量 react (855,600) > angular (502,442) > vue (254,303)。

根据github上的统计信息，可以看出，vue关注的人虽然最多，但是相关仓库远少于react和angular，社区规模和贡献者vue并不如前两者。

但实际上，选择react来进行此网站的开发，跟上面列的数据并无关系。我在之前的开发项目中，使用过react、vue和angular。作为一个个人网站，用这三个任何一个框架来进行开发，都没有任何问题，它们都能实现你想要的任何功能，无非是实现方式有所不同而已。

如果在商业项目中来进行技术选型，可能稍微复杂一些，这部分后面文章中再详细介绍。

react-router-dom

任何wen项目的前端开发，路由库都是必备的，这里选择的是react-router-dom，这一块也没太多可以说的，直接参考文档就行。

redux

redux这个可以稍微说一下。 首先，作为个人站，并不是一定需要使用redux。那么什么情况下需要使用，或者说可以使用redux？首先你的网站需要有多个模块，而且不同模块之间存在数据通信，或者不同模块之间存在数据复用。

此网站就是在用户登陆/权限 这一块在前端使用到了redux来进行已经登陆的用户数据存储、通信。此网站现在一共有6个子页面，其中两个属于管理页面，需要进行登陆权限判断。在没有使用redux的情况下，每一次切换组件，会在组件 componentDidMount 时向后台接口 /api/auth 发送请求进行权限认证。而使用redux后，则只需要认证一次后， 将数据存储在 store 里面， 组件切换后，首先查询store， 认证失败，再发送api请求， 降低api的请求数量。既能统一数据，还能降低服务端的请求。

fontawesome

fontawesome 这个就是一个icon库，里面的icon都不错。

react-markdown 和 github-markdown-css

这两个都是markdown相关的，此网站所有文章都是通过markdown来写的，然后通过react-markdown 进行渲染，之后经过 github-markdown-css 这个css美化后显示出来的。

less

less我比较喜欢用less写css而已，当然也可以用sass。

google fonts

Google fonts作为个人网站，去这选择一个适合自己风格的字体吧。