使用react的todolist实战经验

首先要了解todolist的相关功能

功能方面，参考演示站
www.todolist.cn
功能总结
1.输入框（输入框的事件交互）
2.显示列表（显示区域的数据展示和事件交互）
3.数据计算（被动的数据展示，不存在事件交互）

使用Cra脚手架进行

1.全局安装cra
2.新建项目 c-r-a todolist
3.组件拆分布局，由上到下，由左到右，有大到小
4.加上CSS，先静态，再动态
5.抽象成数据
6.写事件

一些小小的坑

• 1.我创建项目的时候，使用了命令 react-create-app todolist，结果不行。
  原因是，单词顺序写错了，应该是 create-react-app todolist
• 2.在使用creacte-react-app 脚手架搭建的项目中，默认并不支持less、scss、sass等样式预处理器
• 3.项目目录结构分析
  react项目中一些惯例操作和惯例命名等等。（todolist没用到路由，这里多加了一些命名惯例，是为了扩展）
  ES中，引入自定义模块的时候，必须使用'./XXX'.
  • 根组组件，命名为app。
  • 根节点写在index里，命名为#root
  • 新建的文件夹，如果只有一个js文件，可以命名为index.js,这样后期导入的时候，直接导入文件夹名，默认会引入这个index.js
  • 拆分组件的时候，命名一个compnonets文件夹，包含所有的组件
  • VUE中的css文件的命名，惯例命名，base.css,reaset.css,common.css,mian.css
  • 如果有router，新建一个router文件夹
  • 如果使用第三方插件，新建一个utils文件夹
  • 新建一个数据中心文件夹，命名为store
  • 有很多视图的话，有使用views文件夹。这个跟components的区别是什么？
    使用路由文件，把views视图映射到框架里，components一般写的少。更多的视图，写在views里
    而这种方式的时候，views里，继续新建各种文件里，每个文件夹，包含index.js,index.css,功能.js等等
  • 如果涉及到接口的数据请求，那么新建一个request文件夹