DEV Community

loading...

How do you structure your React projects?

isarisariver profile image Marian Beck ・1 min read

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.

Alt Text

How do you guys organise your projects? Any tips for a self-taught noob like me? :)

Discussion

pic
Editor guide
Collapse
limxingzhi profile image
XING

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.sass

I 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-xz create-react-app template if you want to take a look.
npx create-react-app my-app --template cra-template-xz

It is a pretty common way to structure reacat applications I think.

Collapse
isarisariver profile image
Marian Beck Author

Thanks for sharing, I'll check it out!

Collapse
cwraytech profile image
Christopher Wray

I would check out Next js. They provide a sensible structure for your react apps and they provide added features as well!(:

Collapse
cwraytech profile image
Christopher Wray

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.

Collapse
isarisariver profile image
Marian Beck Author

That's good advice, thank you :)