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

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)! 😁

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

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! 😄

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 👍