React 学习计划

前言

为什么学习 React ?因为技多不压身。多一项技能,多一种可能。

首先学习 React 最终的小目标就是生写现在的博客。之前写了 Anguar 版的和 Vue 版的。后来为了 seo 写了 Nunjucks 版的。现在博客就是 Nunjucks 版的。

React 计划

我学习的方式也很简单,也没什么捷径。我浰通过写一个博客来衡量学习的成果是很不错的,类为你在这个过程中学到很多东西和遇到很多坑。

给自己两周时间搭建一个个人博客。这两个大概的学习套路:1、查阅官方教程,2、看别人的代码,3、自已动手写博客。

1、查阅官方教程

学习基础,或者认识 React。

官网地址:https://reactjs.org/

中文版:https://zh-hans.reactjs.org/

官方的一个简单的实例教程,可以学到不少:https://zh-hans.reactjs.org/tutorial/tutorial.html

2、看别人的代码

学习别人是怎么组织项目和要实现一个博客需要用到哪些技术栈。

https://github.com/gershonv/react-blog

https://github.com/biaochenxuying/blog-react-admin

3、自已动手写博客

实践检验学习成功,如果有什么捷径可以学好一样新东西的话那非边学边做不可。

1.用到的技术栈:

# 脚手架
npm install -g create-react-app
# 路由
npm install --save react-router-dom
# 请求
npm install axios
# ant ui 库
npm install antd

为了快速上线,决定使用第三方库 ant ui 作为前端 UI 框架进行博客的开发。

https://ant.design/docs/react/use-with-create-react-app-cn

可以对其资源的引入作优化,详情可参考上面的链接。

注意: ant 组件的引用跟其它的库有些不一样比如:Layout 组件,先从 antd 引入,然后一些关于 Layout 的组件就从 Layout 中再次引入。

import {  Menu, Icon ,Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;


------------------------------------------------------------------------------------------------------华丽的分割线------------------------------------------------------------------------------------------------------

两周之后的今天:2019.06.09 为期两周的开发已经完成。

第一阶段开发完成后遗留下来的问题:

1、搜索功能

由于搜索是跳转到首页进行展示的,所有如果是在首页直接搜索,搜索功能是不起作用的,虽然说这是路由的的锅,但必需得想办法解决。

2、打包文件过大的问题

修改打包配置:不打 .map 文件,虽然去掉的 .map 文件从 9M 多变成 3M 多,并且此时我已经开启了服务器的 gzip 压缩。浏览器接收的资源不已经不到 1M 了, 但是加载时间还是不如意。

3、页面在 PC 端和移动端的显示还不是太完美(特别是移动端)。


博客实现了如下功能:

  1. 用户登录
  2. 文章管理
  3. 分类管理
  4. .路由鉴权

下阶段将实现如下功能:

  1. 样式调整(20190610 完)
  2. 阅读数
  3. 打包优化
  4. 登录加密