⚛️ How to structure and organize a React application ( ) ↓

I've been working professionally with React for more than 8 years and I compiled all my knowledge into 100+ infographics just like this one. Check them out ↓

Sorry for misunderstanding. What is the purpose of a separate Features & Components dir? Are you holding simple atomic components in the Components folder & Features folder is a set of components comprised together to make a feature? ...I think I answered my own question😅

haha I think you answered your own questions yes!

This structure looks great! I've never thought of having services and routes separated. Would like if you could provide an example of a route file. Currently, I have a config constants file where I define all of my API routes and export them as a const. E.g BASE_API_URL.login

So the routes folder if mainly for client side routing if you are using for example react-router-dom. The services folder is, as you said, an abstraction to connect to APIs/endpoints.

I never understood why most of react devs write terrible code but i start to see now. Probably if those infographics didn't exist they would include whole project in one file. Only colors and arrows make their brain work.

better

What software do you use to create these? I love them.

I've been waiting for this one since you announced it yesterday! The visuals are fantastic and the content is amazing. I would appreciate seeing some examples of services and routes files. How do you decide on what to put into component stories and what to test? I don't have much experience with the storybook 😅

I know! 😅 I have to make more in depth content on this, it's just that I like to keep the length of the video to a minimum. I use story book not so much for testing but for documentation, I think it shines when you need to have an idea on how you can use a component, usually an atomic one (button, modal, etc.) Tests folder is for end to end tests usually with playwright