Bookmark - ReactJS, Webpack, Sass, BEM, Mobile first, IO API

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hello, tediko! 👋

  Amazing job on this challenge! 👏 And kudos for trying out React! 🎉

  Like Anna said, your design comparison is pixel-perfect! And I love the transitions you added to the various interactive elements of the site (especially the "Features" section). 🤩

  Here are a few tiny things I'd like to suggest,

  • I don't think you need to wrap <App /> in <React.Fragment> in index.js because that is just a single component being rendered to the DOM. React.Fragment is often useful when you have to render or return multiple elements and you don't want to wrap them in an unnecessary element such as <div>. Also, if you ever do want to use fragments, you can use the empty tag syntax (like <>) instead of React.Fragment (it's like the same thing but just shorter and nicer to read)—except if you want to pass the key prop to the fragment (in which case you have to use React.Fragment instead).
  • In components like Button.js, you can use the children prop to access whatever is put between the component's opening and closing tags, meaning instead of having a text prop, you can simply include children in the list of props to be destructured and then use {children} instead of {text} in your JSX. This will look nice when you are using Button.js and becomes especially helpful when you want to include components as the children of an element.
  • The information for the extension cards isn't something that you need to keep in state, because nothing about that information actually changes from render to render. You can simply include the data for the extension cards as an array outside the main function in Extensions.js. (The same can be done for the data for the FAQs.)
  • Also, this is just a tip, but if you have a component like ExtensionsCard.js within a folder named Extensions, I like to drop Extensions in the name of the component (and name it something like Card), since it is already categorized by the name of its folder. It helps to keep names of things a little bit shorter and cleaner (but maybe that's just me).
  • You might already know this and just wanted to make the FAQs section with React, but you can use the native HTML <details> and <summary> elements to easily create a fairly accessible accordion without having to use any JS (in fact, that's what we switched to for FAQs on Frontend Mentor). The only downside is that animating the height of the expanded state of the element is a slightly tricky.
  • If you ever use useEffect, remember to include a dependency array to make sure that that hook is only called when necessary (otherwise, it will be called on every render, I think). The useEffect in useFeaturesToggle.js could probably take an empty array as its second argument so that it only adds an event listener once (when the component is mounted). The useEffect in Header.js could maybe have windowWidth in its dependency array so that it re-runs only when that variable changes. (LOL, I used to forget to do this, too.)
  • I think what you have for the file structure of your project is good (especially for the size of this project). If you'd like to read more about how to structure React apps, Matt pointed me to this nice article in his feedback to one of my React solutions.

  Wow—I just realized how long this is! These are just of my thoughts, though, and I hope you'll find them helpful. 🙂

  Overall, you've done really well (especially for you first React project—better than me, haha)! 😄

  Of course, keep coding (and happy coding, too)! 😁

  Marked as helpful

  5

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Oh, yes, and congratulations on submitting your 30th solution on Frontend Mentor! 😆

  Also, thanks for the shoutout! 😀

  1

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @ApplePieGiraffe Hello, APG! Thank you for your comprehesive feedback! I will go over everything and learn a valuable lesson from it.

  1. Indeed, I don't need <React.Fragment> in index.js. I can keep it simple in one line.
  2. Wow, children prop is really more cleaner and also have own adventages that you point. I changed it already!
  3. Right! Regarding this, when I was doing the feature section tabs (I left it for the end), I already made a separate file for the data because I noticed my mistake but it flew out of my head to change rest.
  4. Yeah, you're absolutely right. These names are due to the fact that in the beginning I had no division into folders, just kept everything in the Components folder. When my code grow I realized that I have to separate them and I didn't change names of files. I'll definitely use shorter names in future projects.
  5. It's funny because eight months ago you were first person to advised me to use <details> and <summary> (it was for faq accordion card challenge). I had it in mind and I remembered it but for animation reason I decided to use buttons with aria-controls. Additionally, I wanted to do some logic work in React.
  6. Good catch! I guess my thinking was (wrong 😆) that since I'm removing eventListener, I don't need to pass that empty array since it will remove on render anyway - but you've right.

  Again, thank you for linking me an article and for valuable time consuming feedback. Have a great day!

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @tediko

  Awesome! 😀 I'm really glad to hear that it was helpful! 👍

  Have a great day, as well! ☀️

  1
• 

  Michal•665

  @mbart13Posted over 3 years ago

  Hello Tediko,

  For files architecture, I'm using Brad Frost's atomic design in react projects (well, one so far + the big one I'm working on right now) https://atomicdesign.bradfrost.com/chapter-2/

  It just fits react in my opinion, but there are many approaches to structuring react project

  I'm wondering how do you like functional style of programming in react? You used to do OOP in vanilla js

  Marked as helpful

  3

  ---

  

  Jay•695

  @JunjiequanPosted over 3 years ago

  @mbart13 I tried to learn the so called atomic design pattern.....but the instruction is really confusing to me :/ probably the concept is too advanced for me yet.

  0

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @mbart13 Hello, Michal! Thanks for your feedback and for tossing me this link. I'll take a proper look at it.

  To be honest I am currently so delighted with React that everything about that looks good for now. I really liked OOP but I noticed adventages of using functional programming like clearer code, pure functions, declarative style. I think I need to dig more deeply into and make few more projects to say something more. Thanks again!

  0
• 

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  Hi, tediko! Congrats on your 30th solution! 🎉🥳🎉

  That pixel perfect screenshot! 🙌 Awesome work! While the entire project is of course, fantastic, I really like all of the transitions/animations/UX of the features tabs. So slick! 💯 Works well on keyboard too. The email error message is also really nicely done, and the responsiveness is top notch. The medium/tablet styles are handled really well, and there's a very nice flow as you move between different widths and layouts.

  I don't know React, so can't give any critique there. I really hunted, and can't seem to find anything else either. All I can say, is that you've done an excellent job! 😄

  Marked as helpful

  1

  ---

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @brasspetals Thank you for your feedback yet again! This means a lot to me. :)

  0
• Account deleted

  Hello tediko,👋

  Congratulations on completing your 30th solution🎉👏

  Nothing to suggest here because I don't know how to use (react library), but your solution looks good and responsive also.

  Great work here 👍

  1

  ---

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @Nik-web12 Hello, Nikhil! Thank you very much for kind words!

  0