React 入门实例 学习笔记 目录

博主介绍:大爽歌, b站小UP主直播编程+红警三python1对1辅导老师

本博客为一个github开源项目的学习笔记(代码编写过程梳理展示+简单说明)。
具体项目为microsoft的的Frontend Bootcamp,其中day1部分的react部分(step4-step7)
博客中,按照个人理解,做了一些梳理调整,简单改动,以及中文的说明。

背景说明:

辅导一位在美国找工作的学生学习前端约半年多了。
他最近一直在学习react,想找个项目来练习一下,
找到了microsoft的Frontend Bootcamp项目, 打算用day1的step4到step7来练手。
不过原项目结构比较混乱,再加上全是英文,新手学习不易。
所以我这里重新梳理了下,
把梳理后的过程代码加简单中文讲解说明,发布到博客。
每一阶段敲代码的详细过程也有录制下来。博客和视频是一一对应的。
希望用博客+视频的方式,提供更全面更立体的展示,方便学生学习与理解。

同时为了让学生熟悉git操作,这里选择在github上使用项目来管理该笔记。
项目的不同阶段都保存到不同的git分支中。

本教程对应视频: 【代码过程】 React 入门实例 TodoApp 学习梳理笔记
本教程对应github仓库: react-todoapp-study

视频中有些地方有手误敲错,建议以博客为主,
以视频作为过程的参考。

目录

一、 Hello World
二、 按钮点击计数器 Button Click Counter
三、 TodoApp 基础界面
四、 TodoApp 功能分步实现
五、 TodoApp最终优化 (Ts与Context)

详细情况补充

原来项目截图如下

请添加图片描述
笔记每个过程的效果截图如下

一、 Hello World

在这里插入图片描述

二、 按钮点击计数器 Button Click Counter

在这里插入图片描述

三、 TodoApp 基础界面

在这里插入图片描述

四、 TodoApp 功能分步实现

在这里插入图片描述

五、 TodoApp最终优化 (Ts与Context)

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/python1639er/article/details/123513776