一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，[点击查看活动详情]
前情提要
已经好几年没有动手写过react了，没办法，去过几个公司全部都是使用的vue相关的技术栈，所以导致了对于react已经生疏到不能再生疏了。至于为什么要写class组件，不要问，问就是重温经典。毕竟第一次接触react时是16版本的，那会只有class组件，还没有现在的hooks。所以准备先从class组件温习一下。之后再开始学习hooks。
目标：通过将数据存储在localstorage实现数据的持久化存储，然后是实现一个todolist网页应用。
先展示成品图
过程（如何根据脚手架生产一个项目就略过了。不知道的可以百度呦。）
- 首先到src目录下的index.css和app.css的两个文件里，把里面的样式全部删掉。否则，写的页面元素的样式会受到影响。如图：
- 之后再把app.js的render中间的内容删掉。这一部分是官方写的界面，没用，直接删掉即可。
- 之后在src目录下创建两个文件夹，一个是containers，一个是components。containers主要是存放页面级的组件，components主要是存放单个组件的。
- 然后在containers创建一个名为:Todolist的js文件和一个css文件。再创建一个static的文件夹，用来存放图片，视频或者音频等的静态资源的
- container的目录结构：
- 根据成品图的界面分析从大的方向上可以将头部添加事件封装成一个组件，要做的事的列表封装成一个组件，做完的事封装成一个组件。一共是三个大的组件（其实要做的事和做完的事也可以合并成一个组件，然后进行复用，但是为了降低理解难度，就暂时分开了。）
- 假如在实战项目中，项目在ui上有特殊的样式需求，还可以将列表里的每一行里的选择框封装成一个组件。
- 组件化的意义之一就是复用，提高开发效率。复用的前提是界面上重复出现的东西。比如列表中的每一行的信息条，就是不断重复的元素，就可以封装成一个组件，进行复用。但是在这里我就不进行封装了，毕竟师傅领进门，修行靠可个人，给你们留个自我练习的空间。
- 所以我们要在components目录里创建三个js文件和三个css文件。如图：
- 首先通过在文件的头部用import的方式把组件导入进行，也就是第一个红框。然后在className为app的盒子里可以通过单标签的方式也可以通过双标签的方式引用组件。
- 注意：尖括号里的组件的名义一定要与我们在头部导入时定义的名字是一样的。
- 此时如何你已经通过npm start命令启动了该项目，那打开的浏览器页面上一定会报错，因为todolist组件里面还有内容。
总结
至此实现一个todolist的基本工作就已经完成了。里面主要是讲解了项目该如何搭建，已经关于组件化的概念的应用。
