Folder Structure
If you are unfamiliar with React, it needs to be compiled into vanilla JavaScript for it to be runnable statically. This is all done behind the scenes so no need to worry, but it does give us much more freedom to our folder structure.
Generally, there are two main folders, public and src.
public contains files that directly get copied over into the build,
hence this is where you put files which are not to be compiled. This only really includes the main index.html, and some images relating to it.
src contains everything else, including .jsx files as well as style files and included images. As we want to keep things as modular and small as possible, each component and route will get it's own file.
All components live in /src/components, which is further split up by each "group/parent" component getting its own folder. Then components which are common to all pages have the same structure but their folder is inside /src/components/common. For example, a navbar component and it's children would live in /src/components/common/navbar, whereas a leaderboard component might live in /src/components/leaderboard.
Similarly, all routes live in /src/routes and assets such as images might live in /src/assets/images. Style files specific to a component or route might live in it's component folder, and global style files should live in /src/style.
