My functional components are very long. I would like to separate the functions in files like these:
components/header/index.js // export
components/header/header.jsx // logic
components/header/style.scss // styles
components/header/header.test.js // test
components/header/useHeader.js // hooks
I am learning. Any basic advice is welcome.
Well, there are quite a few ways now to structure your files and repo so the codebase looks good and neat but in my opinion, it is best to go with a generic to a modular approach which simply means to put related stuff together under one folder and in the way they sync up with your app and tells other devs what's going on in the repo. EX :
src --
components --
common --
header --
header.js
header.css
footer --
etc ..
pages --
Home --
Home.js
Home.css
utils --
services --
configs --
hooks --
store --
So with this structure, it quickly tells any dev where to look for a particular thing and inside them you can structure them according to your repo and naming conventions.