This week marks the 10th week of my React learning journey, and I’ve been fully immersed in thinking and coding like a professional React developer. My focus was entirely on building a strong mental model for components and props, which I applied while working on my usePopcorn app.
Here’s a breakdown of what I explored this week:
1. Splitting UI into Components
The first step was breaking down my UI into reusable, meaningful components. This feels simple, but it’s crucial—thinking in components is the foundation of scalable React apps.
2. Understanding Component Categories
I categorized components as Presentational vs Container. This distinction helps me decide where to handle logic and where to just render UI. This week, I practiced creating both types and observed how they interact naturally.
3. Prop Drilling & Component Composition
One of my biggest insights was handling prop drilling efficiently. I learned to compose components thoughtfully so that props flow logically without unnecessary complexity. Composition patterns started to feel intuitive this week.
4. Deep Understanding of Props
I took a deep dive into props, exploring not just how to pass them but why and when. This included understanding default props, optional props, and destructuring them for clean code.
5. Thinking in Props
Beyond passing data, I started thinking in props—asking myself how components communicate, what data should live where, and how changes in state affect the props chain.
6. PropTypes for Robust Code
Finally, I implemented PropTypes for type checking. While TypeScript will eventually take over, PropTypes help catch mistakes early in plain React projects, making my components more predictable and maintainable.
The Coding Challenge
I spent most of my time implementing these concepts in the usePopcorn app. I didn’t finish everything this week, but I focused on thinking like a pro developer—structuring components carefully and planning prop flows. The remaining parts will be my coding challenge for next week.
Takeaways
- Thinking in components first makes React apps more scalable.
- Understanding props deeply is key to predictable component behavior.
- Using PropTypes can save headaches in larger projects.
- Weekly focused practice, rather than jumping around topics, is making me think and code more like a React pro.
This week was a mind-shift week: from just writing code to thinking in React patterns. Next week, I’ll continue refining my usePopcorn app, focusing on state management and hooks, building on this strong foundation.
Top comments (0)