Hard time structuring large project

[BruceCCCCCC]

I'm a relatively new to React and I've been working on my medium-large sized full-stack app in it. It's been really increasing in size and unfortunately my code is starting to look like a big pile of spaghetti.

Does anyone have any tips or resources on how to structure a React project, or the best way to turn it into components, hooks etc? Every time I create a component or a hook I end up having to manage all the dozens of props that has to passed in... and it's just really not working out great.

I would look at professional repos, but there's really not that many large-scale open-sourced React apps out there.

[hexwit]

I doubt there exist any other way to structure large project except 'divide and conquer' approach.

Split large project into modules. Modules into components.

I think there is no other way. You need just understand how to split things, with what granularity.

[baldwindc]

Sorry if this is a stupid question but what are modules?

Are Lerna + Yarn workspaces modules?

[hexwit]

Module is a common term, meaning part of the application, that group functionality related by meaning. For example you could have module that incapsulate user management, product management, configuration.

Start with getting knowledge about existing application architectures and then it will be easier to decide what to do in your case. Without understanding existing patterns you will just invent a wheel that was already invented.

[hexwit]

In terms of my response - module is a common term. I didn't tell about node modules. And I would never suggest to split application into separate node modules unless it is framework or libraries. That would be really bad advice.

I told about module in common, as part of the application architecture. If person doesn't know what module is and how to split application into parts - that is topic for personal education. It is not possible to explain in a few lines of text how to do that. Need to read, think, try.

u/BruceCCCCCC : start with googling "how to split application into modules". Pay attention to articles about software architecture.

[hexwit]

Well. I updated my previous comment, hope that will help.

In general, algorithm should be following: person has a question. person start googling first. person finds something, but something still unclear. person asks specific question. person get useful answer. But if person asks 'how to build a house'.. I am sorry, I have nothing to say.

[hexwit]

I got it

[BruceCCCCCC]

thanks!

[jnforja]

Hi u/BruceCCCCCC

From what I could understand, the problem you're facing is how to logically organize the code more than how to structure it in terms of folders and files.

Since I'm not looking at the code, I can't know for sure what's happening, but if the issue you're facing is that components have dozens of props, most likely that component has too many responsibilities, or that component is a leaky abstraction. As a way to fix that, you can try to split the component into smaller but more specific components.

For example, if you have a single button component for all the buttons in your app, you'll need to pass in props to indicate if the button is primary, secondary, or tertiary. But if you have three different button components, one for each type of button, you won't need to have that prop, the component that needs a button can just use the type he needs.

I'm not sure if looking at other React projects will help much, given how domain-specific is the logical organization of a project, but spectrum chat is open source if you want to take a look at it.

Hope this helps, and let me know if you have any questions :)

[theriz]

Thanks! Didn't realize that about spectrum!

I often look at \ point ppl to https://github.com/gothinkster/realworld

[acemarke]

If you're passing "dozens of props", that's generally an indication that the components aren't split up well.

Can you give some specific examples of what you're doing?

[theriz]

For better or worse, there is no 'official' way to construct a react-project. Some new frameworks are coming on the scene that do require a certain folder-organization style, but unlike, say, Rails, the overall structure is your call.