zoukankan      html  css  js  c++  java
  • 前端项目之react-todolist

    一、搭建好react的环境

    npm install -g create-react-app

    create-react-app .      // 这一命令会在文件夹中生成package.json/node-modules/public/src/.gitignore/package-lock.json/README.md这一系列的文件

    yarn start   // 不会生成build,只有yarn run  build 才会有压缩好的一堆文件生成

    表示搭建成功。

    在这里我要讲一个巨坑的经历, 在上传到github的远程仓库时,出现了一直报错的情况,css/js找不到,历时超久,发现是package.json里面的homepage写错了地方,啊啊啊啊啊啊啊啊啊啊。

    二、搭建基本框架

    先构思一下,首先有一个h1标签,显示这是谁的待办,然后有一个文本输入框,再下面是个列表,用来存放用户所有的待办事项。

    三、将输入框和待办事项列表拆分成两个不同的组件,提高代码的可维护性、可扩展性和可测试性。

     

    四、基本框架做好之后我们来添加简单的样式,首先引入一个重置的CSS文件normalize.css和自己新建的reset.css。

    normalize.css需要安装 npm i -s normalize.css,在配置文件package.json添加一行依赖:

    然后新建一个css文件命名为reset.css,里面写的是我们在css时最开始写的重置代码。

    接着,就是我们自己对于页面的设计了,同样为了方便以后代码的维护,我们将每个部分的样式都新建一个css文件。

    五、在添加玩自己定义的样式文件之后发现我们的输入框不能输入东西,我们的页面虽然没有报错但是有两个警告在,其中一个警告的意思就是说我们的输入框设置的value属性不能变化,浏览器给了我们两个建议,一个是将value改为defaultValue,还有一个是添加onChange或readOnly事件,我们首先采取第一种做法,同时给输入框添加onKeyPress的监听事件。以上,一起提交:

    六、接下来我们想实现按回车,将输入框中的文字添加到列表中,输入框清空。

    此时,我们发现还有一个问题就是,输入框不清空,联想到之前的两种方法中我们选择了第一种,换成第二种试试。

    这样,简单的框架基本形成了。

    七、接着我们开始实现增加复选框,表示完成或未完成,添加删除按钮实现删除功能,只显示没有被删除的todo,更新样式。

    八、localStorage 存储数据

     九、把我们的数据一直存在localStorage显然不是良策,我们转移到数据库中 leancloud,进入创建应用列表

    然后参考它的使用文档,找到JS文档,查看SDK安装,按照文档中所说执行命令npm install leancloud-storage --save和git commit . -m "install leancloud"。

    初始化:将代码粘贴到app.js中,然后继续,翻到验证:ping api.leancloud.cn,成功显示之后将测试leancloud的代码粘贴到app.js中,这里需要我们新建一个类,名为TestObject。

    成功弹出内容来即成功。

    十、删掉测试代码,新建leancloud.js

     十一、继续,我们在了解了数据库的服务之后完成注册和登陆的部分

    删掉localStorage的部分,因为我们之后要使用数据库

    增加登录/注册的对话框

    先把html的框架写好,然后把登录和注册分为两个模块,定义修改表单数据的方法

    未完待续

  • 相关阅读:
    文件上传与下载/Mail
    监听器/国际化
    过滤器
    父类转为子类涉及到的安全问题
    连接池
    【MySQL】Windows10下的安装与配置
    【neo4j】关于出现The old parameter syntax `{param}` is no longer supported. Please use `$param` instead的问题
    关于GitHub上传超过100M文件方法
    记录一次在知道创宇公司的实习面试经历
    《机器学习实战(基于scikit-learn和TensorFlow)》第七章内容学习心得
  • 原文地址:https://www.cnblogs.com/CCCLARITY/p/8467362.html
Copyright © 2011-2022 走看看