Learning Strategies to Finish Your First React App in a Day
Effective Learning Strategies, Motivation Techniques, and Resource Selection
Project Scoping
When starting a new project, there are usually two directions to choose from: following a tutorial completely or using the tutorial to build what you want. While completely following a tutorial ensures success, building what you want sparks interest. Each direction has a very different learning strategy.
For my first website project, X, I used resources to build my chicken website because the system is simpler, and having fun motivates me for longer. However, for my first React App, since I don’t know much about the system structure, I decided to completely follow a trustworthy resource to understand the basics.
Personal Awareness
Timeline: I decided to finish it in only one day. Most people like to listen and follow the lesson one by one, and hence, most of them give up in the process because it’s dragging. Hence, I set a one-day maximum to do it myself because I know I will lose interest if I take longer.
Learning Resources
To ensure success in one day, I need to have very promising learning resources. Usually, paid online classes are the most promising, but they are boring, and I don’t want to pay. Here are my resource suggestions:
Main resource: MDN web docs React
Secondary resource: ReactJS Tutorial for Beginners YouTube
Additional resource: ChatGPT
I have tried MDN web doc for my first website building, so I know the quality is high. However, reading lots of text is tiring, and I don’t have many concepts about the reaction (components, state, etc.) yet, so I supplement with YouTube as a second resource. The ReactJS Tutorial is better than “spending x hours to finish your first app video” because it chunks concepts, allowing me to grasp concepts quickly and feel motivated to finish watching. The additional resource, ChatGPT, provides more specific terms and coding examples because I don’t know where to put the example code and what they mean as a beginner!
Strategy in the Learning Process
Motivation: Let’s Do One More Section
I usually get quite frustrated or bored when trying to understand a big chunk of information when learning something new. Whenever I feel bored, I tell myself, “Let’s do one more section,” and then take a break or chat. After a certain point when things start to click, I immediately speed up.
Learning Strategy: Follow the Main Resource and Supplement with YouTube for High-Level Concepts. Use GPT to Dig into Specific Details
I will roughly browse through the code examples from the main resource, but the moment I feel tired of reading a concept I don’t understand immediately, I watch several relevant YouTube videos to supplement it and then go back. Usually, in this case, I can roughly understand what is going on at a higher level.
To understand specific implementations in the main resource, I put them into GPT and ask it to explain, so I can connect my high-level concepts with the code examples from my main resource.
Debug: Test and Ask
I use my high-level understanding to generate some hypotheses about bugs. However, I encounter a more complicated one that I don’t know how to handle. My roommate is a front-end engineer, so I ask him about the final bug, and explain the missing concept to me.
My Final Project Output:
View the web app: here
Slay!
slayyy