Design comparison
Solution retrospective
I am still wrapping my head around React's rendering behavior, so I would like to know if my usage of useEffect is done properly. Comments on anything else, however, is much appreciated!
Community feedback
- @0-BSCodePosted over 2 years ago
Awesome work! Besides the background color of the filter buttons (nothing a little CSS can't fix🤣), I don't find any noticeable difference between the design and your solution. With regards to your usage of useEffect, I don't see much wrong with it. I would recommend that you load in the data in
App.js
since that's where most of your components will be called. This way, if you need to send the data to multiple components, you can just get the data inApp.js
and then send it to your components through there.I would also suggest that you place your components in their own separate folders instead of saving them as files directly under the
components
directory. For example, for yourFilter
component, in thecomponents
directory, you can create a sub-directory calledFilter
and, within that directory, save your file asindex.jsx
. So, when you want to import it, you only need to specify up to theFilter
directory because react will automatically use anyindex
file in that directory as the component. You can read more about it here.Another thing I like about this approach is you can place any other file related to this component in the same directory. Going back to the example, in the
Filter
directory, you'll be able to have anindex.jsx
file for the component itself and astyle.css
file for the styling of the component. Of course, using this approach comes down to personal preference but I use this so that all the files I need regarding a specific component are all in one place. This would work really well if you plan to use CSS Modules down the line😃Keep it up! Cheers🎉
Marked as helpful1@Isaiah-BPosted over 2 years ago@0-BSCode Wow thanks! The way my React projects are organized is another thing I try to keep in mind and improve. I will definitely look into this approach.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord