I don't really have a structure when it comes to my projects. I guess it doesn't really matter as long as I am the only one working on it.
I usually start by putting everything in 1 file. When I feel like it gets too big, I create a second file. When I get too many files, I create folders like "assets" for images or "utils" for reusable functions.
This is what my current project looks like.
How do you guys organise your projects? Any tips for a self-taught noob like me? :)
Top comments (5)
I split my UI components and Pages into separate folders.
Both are React components, but the Pages provide a skeleton template and access to global state. The React Router will only route to Page Components, reading and writing to global state or external APIs are done through the Page Component too.
I will then cascade down the global data down from my Page Components into my UI Components. This means my UI components do not have to access the global state or external APIs, making them more predictable and easier to test.
For each Page or UI Component, I will create a folder and contain jsx + style sheet (I use the BEM model over CSS-IN-JS) + unit testing in that folder like
/src/component/CardDetail/CardDetail.jsx/src/component/CardDetail/CardDetail.sass/src/page/LoadingPage/LoadingPage.jsx/src/page/LoadingPage/LoadingPage.sassI also have 2 index files that will help me to control whether I want to lazy load the components and clean up my imports/exports. I can wrap the page components with a HOC or React Children (the fancy name escapes me at the moment) and I can apply a standard page template at this place. This allows me to do things like having a standard prop to change
document.title, or setting standardize page styles, or setting page title on the document through a prop, things like that.You can try the
cra-template-xzcreate-react-app template if you want to take a look.npx create-react-app my-app --template cra-template-xzIt is a pretty common way to structure reacat applications I think.
Thanks for sharing, I'll check it out!
I would check out Next js. They provide a sensible structure for your react apps and they provide added features as well!(:
Also, personally I like to keep things as organized as possible. Usually I have a components folder where I place reusable components, a layouts folder for different page layouts, and a pages folder for different pages on the site.
I also have an assets folder for css and images.
Separating concerns this way makes it much easier to go to code that contains exactly what you need to update, vs searching through several files.
That's good advice, thank you :)