Blogger introduction: Da Shuangge, B station’s small UP owner, Live programming + red Police three, python 1 to 1 tutor.
This blog is the study notes of a github open source project (code writing process sorted out + simple explanation).
The specific project is Microsoft's Frontend Bootcamp, of which the react part of day1 part (step4-step7)
In the blog, I have made some adjustments, simple changes, and Chinese explanations based on my personal understanding.
Background Note:
I have been tutoring a student who is looking for a job in the United States to learn front-end for more than half a year.
He has been learning react recently and wanted to find a project to practice.
He found Microsoft’s Frontend Bootcamp For the a> I hope to use blog + video to provide a more comprehensive and three-dimensional display to facilitate students' learning and understanding. The detailed process of typing the code at each stage is also recorded. Blogs and videos are in one-to-one correspondence. added simple Chinese explanations to the sorted process code, and published it on the blog. So I reorganized it here,
However, the structure of the original project is relatively confusing, and it is all in English, making it difficult for novices to learn. project, I plan to use step 4 to step 7 of day 1 to practice.
At the same time, in order to familiarize students with git operations, we choose to use projects on github to manage the notes.
Different stages of the project are saved to different git branches.
This tutorial corresponds to the video: [Coding process] React entry example TodoApp learning and sorting notes
This tutorial corresponds to the github repository: < a i=3>react-todoapp-study
There are some mistakes in the video. It is recommended to focus on the blog.
Use the video as a reference for the process.
Table of contents
1. Hello World
2. Button Click Counter Button Click Counter
3. TodoApp basic interface
4. Step-by-step implementation of TodoApp functions
5. Final optimization of TodoApp (Ts and Context)
Additional details
The screenshot of the original project is as follows
The screenshots of the effects of each process of note-taking are as follows:
1. Hello World
2. Button Click Counter Button Click Counter
3. TodoApp basic interface
4. Step-by-step implementation of TodoApp functions
5. Final optimization of TodoApp (Ts and Context)
