【九月打卡】第15天 vite构建部署todolist&课程总结

课程名称：Vite零基础快速入门

课程章节：Vite + React 开发 ToDoList

课程讲师：Tomas

课程内容：

讲述从初始化项目到模块输入、展示、筛选和上线的实际操作。首先初始化react项目：yarn create vite,根据提示输入各选项，创建完模板后需要运行项目就需要先下载依赖包yarn/npm install；根据提示输入好各选项创建模板项目运行yarn dev 。react项目可以采用一款流行的组件库ant Design配合编写前端组件模板：安装yarn add antd -s就可以引入使用了。

• 输入模块:
  引入一个input组件作为一个自定义输入框和引入一个按钮组件，完成需求原型图中的代办输入模块。另外在项目中可以注意依稀而开发小技巧比如适当的编写一些配置项，便于日后代码的维护。
• 展示模块：
  通过提交或者回车新增一个todoitem，展示为一个列表，可以直接采用antd的组件样式用来展示一个带有新增删除状态的列表。
• 筛选模块：
  给我们的todolist通过已完成、未完成、全部等装状态进行筛选展示
• 部署上线
  通过配置的yarn build 命令打包项目到dist文件中。使用免费站点netlify部署。

第4章老师还对我们这次课程做了一个总结回顾，帮助我们加深印象和梳理学习点，非常棒！

课程收获：

从本课可以看到react中的输入组件是一个受控组件而且是单向数据流，当我们给输入框绑定一个数据后，更新数据的时候是通过事件重新修改state的状态，从而使组件重新渲染而实现界面更新的。react是一个单向数据流，我们在编写代码时可以通过统一在父组件做数据操作，在向下传递数据，子组件只需要根据数据展示就可以。这次课程不但认识了vite这个前端构建工具了解了他的设计思想，通过对比其他构建工具还可以看到vite打包速度快打包体积小等优点，通过一个简单的react项目例子完成了一次打包构建部署的流程，对项目的流程有了新的认识。此外，另一个优惠就是老师给的学习建议真的非常好，我们不能盲目学习一个东西，不仅会用还要徐汇原理，更重的是动手，只有多动手才会记忆深刻，掌握了才是自己的东西。在前端的路上我们应该保持一个进步的心，只有不断学习才能跟得上知识的更新。非常感谢老师开的这个课程，真的很好，老师多多开课哦！