React: Suggested Resource

[columk1]

Checks

• [x] This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• [x] I have thoroughly read and understand The Odin Project Contributing Guide
• [x] Would you like to work on this issue?

Describe your suggestion

I think the React course is missing instruction on how to create reusable components. It would be great to have a resource that teaches students how to build a composable component like you would find in a component library. A dedicated resource on how to build well-structured, reusable, and composable components would really help students build better habits and architectural intuition early on.

I found this article to be really good. It's fun to code along with as the author iterates on a very simple component until she ends up with something similar to what you would get from a library like Radix. It's not just a tutorial on how to create a Dialog, but the process for creating any new frontend feature.

https://www.developerway.com/posts/hard-react-questions-and-modal-dialog

Path

Other / NA

Lesson Url

React course

(Optional) Discord Name

columk

(Optional) Additional Comments

No response

[wise-king-sullyman]

While that is a nice article I think that it might be a bit beyond the scope of our course, @TheOdinProject/react I'd love some other thoughts.

[columk1]

Yes, it could be. Maybe it could be presented as an optional skim to get a sense of how components are built.

Alternatively, a short lesson with a simplified example could work. This could be broader in scope, covering how to create reusable components and hooks, the single layer of abstraction principle, and some ideas on React folder structure.

The JavaScript and Node courses have content covering architecture, modularity and how to structure projects but the React course doesn't really have anything like this. It teaches the bare bones of state and hooks and then goes into React Router and Testing.

[01zulfi]

I think this article (or Developer Way as a whole) could be worth a mention in the What's Next section of the Conclusion lesson

[bycdiaz]

I don't hate the idea of a very brief lesson on reusable components. My initial reaction is that it could fit into where @01zulfi pointed out.

But I just skimmed the React course and I feel like it could potentially fit into the section Getting Started with React.

But if we did drop something in there, I'd love for it to be a very simple lesson. Like: "If in HTML we wanted many buttons with different button text, we'd make each button every time. In React, we can make one button component that takes a button text prop and use that component in many places."

And......... as I type this, I found this lol: https://www.theodinproject.com/lessons/node-path-react-new-passing-data-between-components#using-props-in-react

So the idea of a reusable component comes up. It's just not explicit. Wondering if we just add some context there like, actually naming the idea of reusable components.

[columk1]

There is already a simple lesson that goes through the basics: https://www.theodinproject.com/lessons/node-path-react-new-react-components

This article is more advanced and would fit in the What's Next section as 01zulfi suggested. If there was an in-house lesson covering these concepts it would have to be near the end of the course.

Generally the React course as a whole only covers the very basics to get started with React, plus testing. This is fine because the React docs are amazing, but I do think component design is a missing piece. It's easy to finish all of the projects and still have no idea how to create something like that Dialog, even though it's very simple. These kinds of components are everywhere in React codebases so I think some exposure would really help students.

[bycdiaz]

@columk1 So are you advocating for content on reusable components or designing components? How are those different for you?

Just want to get a sense of what you're actually going for here.

[columk1]

Just want to get a sense of what you're actually going for here.

I'm advocating for the article to be added to additional resources.

So are you advocating for content on reusable components or designing components? How are those different for you?

Designing components but these terms go hand in hand. Composability/reusability is one aspect of component design. The article goes through many others such as responsibility, accessibility, and API shape. It's relevant for anyone learning a component-based framework, not just React, and there's nothing in the curriculum that covers these techniques.

As mentioned in the issue it's also an example of the thought process behind each step when building a new feature, which is also broadly applicable.

[bycdiaz]

@columk1 Does it's importance merit being considered for a lesson? While I think your ideas are useful generally, are they what our learners would need in that moment? The thing to keep in mind is that our curriculum is about the basics. I'm not arguing that the ideas you're sharing aren't important. But are they critical for a learner here that is learning the basics? If they are critical, should we consider a lesson. And if it's not, what function would this serve as an additional resource?

I'm just weary of adding things to additional resources because they are generally useful. I've been interested in scrutinizing additional resources for a while. You can read about my reasoning here.

[columk1]

Thanks, that's helpful. I wasn't aware of that discussion. I agree that if something is critical it should either be an assignment or worked into a lesson. I took my time with the additional resources and generally found them very helpful, but it makes sense to tighten up those sections.

With that in mind, I did not give enough thought to where exactly this article fits in or whether or not it's critical for the basics. I was coming from the fact that personally, I felt that if I was exposed to these ideas earlier, I would have thought much differently about components and how to build them, and wouldn't have been so lost when I explored the JSX in other codebases or component libraries after finishing the curriculum. I would have liked to have been aware of these patterns early on to be able to practice them, instead of having to rethink everything after finishing the projects. But that could be a necessary part of learning.

Now that I read over the course again, there is this in the Conclusion lesson:

You’re at a point in your React journey where you can begin learning about design patterns and architecture. patterns.dev is an exceptional resource that will help you build better React apps by leveraging powerful patterns. They are worth a bookmark!

If someone goes through everything in the React section on this patterns site they'll come across some of the ideas from the Developer Way article, in particular the "Compound Pattern" page. So maybe it's already enough that learners can explore themselves if they want to (although I remember browsing this site and finding it overwhelming. I think I bookmarked it and continued to the Node course). DeveloperWay could be mentioned here as another great resource for React patterns, but it might not be productive to link to a another huge resource. I mostly found that one article really useful, but it might not fit anywhere.

I'm okay with this being closed. Unless there is interest in creating another lesson in the More React Concepts section that covers some of the patterns and concepts mentioned in this issue.

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.

[mao-sz]

Personally, I think if this is to be added, it ought to be at the end in the conclusion lesson. But then thinking about it further, by that point I think people can explore these things independently and needn't have TOP tell them what they should or shouldn't do.

Those in the JS pathway will also get more experience with React and the general idea of reuseability/composing stuff throughout the Node course, and observing how people tend to progress through that course, I'm inclined to think a specific mention/direction about this from TOP isn't particularly vital.

Since there haven't been further thoughts on this, I'm going to close this issue, though thank you for the proposal. If another main feels otherwise, they're welcome to reopen.