Good question the answer is much more obvious than you think. If it's a main element on the page then most likely it should be a component. So start with the top level tree and then go down. For example I create a components and pages folder in src. Then I create a component for the header, main and footer because obviously every page is going to have one. Then if you have a hero at the top that is going to be a component too because maybe you want to change it at some point. Forms should definitely be components as well because its a reusable content.
An easy way to figure this out is to go to a website and then look at the page. Work out how you would build it using HTML by using the box model. So what areas will be sections and articles then you will know what should be turned into components.
Alternatively you could print out a webpage and then with a pen or pencil draw boxes around content areas on the page as you would do if you were figuring out how to build it. Those boxes can be reusable components.
It's important to note that, in an SPA, the normal page paradigm doesn't necessarily apply. If your header, footer, etc. aren't changing from "page" to "page," it makes more sense to import them once at a higher level than the "pages" of the app (or even just lay them out your index.html in some cases, as separate HTML elements from the div that React loads).
Good question the answer is much more obvious than you think. If it's a main element on the page then most likely it should be a component. So start with the top level tree and then go down. For example I create a components and pages folder in
src. Then I create a component for the header, main and footer because obviously every page is going to have one. Then if you have a hero at the top that is going to be a component too because maybe you want to change it at some point. Forms should definitely be components as well because its a reusable content.An easy way to figure this out is to go to a website and then look at the page. Work out how you would build it using HTML by using the box model. So what areas will be sections and articles then you will know what should be turned into components.
Alternatively you could print out a webpage and then with a pen or pencil draw boxes around content areas on the page as you would do if you were figuring out how to build it. Those boxes can be reusable components.
It's important to note that, in an SPA, the normal page paradigm doesn't necessarily apply. If your header, footer, etc. aren't changing from "page" to "page," it makes more sense to import them once at a higher level than the "pages" of the app (or even just lay them out your index.html in some cases, as separate HTML elements from the div that React loads).
I often find myself putting even my router much lower in the hierarchy than I originally anticipated.