zoukankan      html  css  js  c++  java
  • 使用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文件夹
  • 相关阅读:
    块级元素与行级元素(内联元素)
    css中属性值继承小解
    form表单
    html,xhtml和xml
    html中的标签分类
    如何把HTML标记分类
    实现对HashMap的value排序
    装饰者模式
    实现一个简单的二叉树容器,并且实现中序、先序、后续遍历
    Java中java.util.concurrent包下的4中线程池代码示例
  • 原文地址:https://www.cnblogs.com/cn-oldboy/p/12792225.html
Copyright © 2011-2022 走看看