02-React脚手架+Todos项目(组件拆分, State应用, 组件通信+数据校验, nanoid)
2023-06-13 09:11:25 时间
全局安装Yarn
安装Cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
全局安装yarn
cnpm install -g yarn
修改Yarn为淘宝数据源
yarn config set registry https://registry.NPM.Taobao.org
全局安装create-react-app
npm i create-react-app -g
创建脚手架项目
# create-react-app 项目名称
create-react-app react_staging
启动项目
yarn start
# 项目地址
http://localhost:3000/
Todos案例Demo
依照于上面的React脚手架开发
效果
代码
https://gitee.com/flower-dance-mrz/react_todos
知识点
组件拆分
将组件拆分为上中下
将中间的组件的每一行又拆分为一个组件
只是为了演示效果, 具体开发自行评估
数据存放位置
数据存放在同一父级中, 并且在父级中提供操作方法
组件通信
父组件传递子组件
通过Props传递
子组件传递父组件
通过Props传递函数, 然后在子组件中回调父组件中的函数, 实现
checked 与 defaultChecked
defaultChecked只有在第一次初始化的时候, 才会渲染, 只执行一次, 后续数据改变, 不会触发重新渲染
checked每次都会渲染, 但是如果使用checked, 必须实现onChange函数, 处理状态改变, 不然就会无法取消选中,或者选中
前端生成唯一ID(nanoid)
添加nanoid依赖库
yarn add nanoid
使用
导入后以函数的方式调用
Props数据校验
脚手架不会自动依赖这个库,需要手动依赖, 使用方式和之前一样, 我就只写添加依赖库了
yarn add prop-types
相关文章
- 【2022新书】深度学习生物医学应用:从医疗影像到药物发现
- PCB设计-Allegro软件入门系列第九讲-Class分类和Subclass应用
- 基于notarytool对MacOS应用进行公证
- 【好玩儿的Docker项目】VoceChat——又一个即时聊天(IM)应用!可以嵌入任何网页!
- 【K8S专栏】Kubernetes有状态应用管理
- Node.js 应用全链路追踪技术——全链路信息存储
- Jenkins插件应用——管理项目权限
- 基于ES在慢病项目中的应用
- 开源云原生,论道中关村 | 云原生开源项目应用实践专场回顾
- 【Android 进程保活】应用进程拉活 ( 账户同步拉活 | 账号服务注册 | 源码资源 )
- 唯一标识符——GUID在SQL Server中的应用(mssqlguid)
- Firefox OS加入Cordova项目 web应用开发更简单
- 工信部区块链论坛 | 乐视金融CEO王永利:区块链技术研发和应用的实践经验
- 改善Redis存储效率:压缩技术的应用(redis压缩存储)
- 探究Linux内核在安卓系统中的应用与优势(linux内核安卓)
- SQL Server中表示日志记录及其相关应用(表日志sqlserver)
- MySQL在ATM项目中的应用(mysql中atm项目)
- 红色数据项目开发助力未来(redis项目开发应用)
- Redis开启新的应用时代(redis项目应用场景)
- 在Redis项目中构建基于代码的应用(redis项目中代码应用)
- 别名在Oracle中的应用(oracle中别名使用)
- 揭示Redis缓存的项目应用(redis缓存的项目描述)
- 不炒币!五大区块链项目齐聚锋火TokenShow,探讨技术应用落地