I've seen a bunch of different outlines for how to structure React applications and frankly; lots of them suck. After lots of experimentation I thought up how LRS is outlined here and wanted to document it for my new team. Would love to hear your thoughts on it - ThreadSky

crutchcorn.dev • 40 days ago

I've seen a bunch of different outlines for how to structure React applications and frankly; lots of them suck.

After lots of experimentation I thought up how LRS is outlined here and wanted to document it for my new team.

Would love to hear your thoughts on it

Reposted from Playful Programming

Without a solid foundation, projects can require a lot of refactoring, and questions may arise as to how to organize and test your code for maximum efficiency.

With LRS, it’s easy to manage all of the components that you need.

Comments

sh03.dev•25 days ago

Another QQ 😅:

How do you disambiguate between a page `header.tsx` component and a `/components/select/dialog/header.tsx` (just an example)?

1/2

sh03.dev•25 days ago

Do you call them both `Header` and just make sure you don't import one instead of the other?

Do you call one `Header` and the other `SelectDialogHeader`?

Do you call one `Header` and the other one `_Header` (_ is for "this is private within this subdirectory)?

crutchcorn.dev•25 days ago

`/components/select/dialog/header.tsx` should never exist. `components/select` needs to be a flat dir structure. Instead, you'd have:

- `Select`
- `SelectDialog`
- `SelectDialogHeader`

All within:

- components/select

You'd have:

- select/select.tsx
- select/select-dialog.tsx

Et al. HTH!

sh03.dev•25 days ago

I used to do that (have names that are basically unique per project) but that leads to java-esque component names when you have a complex application.

Anyway, thanks 👍

sh03.dev•40 days ago

Great article!

QQ: you remind us of the distinction between smart/dumb components in the beginning but I don't see where you then reference it in the structure (e.g. different folders for those). Intentional?

Oh and another QQ: what's the difference between button/index.tsx and button/button.tsx?

crutchcorn.dev•39 days ago

> But I don't see where you then reference it in the structure

- components are purely dumb components, no state
- .ui files are also dumb

The only smart comps are in `.view` files in `views`

crutchcorn.dev•39 days ago

button/index.tsx is a barrel file that just re-exports anything needed from button/button.tsx and others

sh03.dev•39 days ago

I figured. I tried barrel files but couldn't be bothered most of the time. It's so tedious if you have lots of components. There's even a VSCode plugin IIRC but it doesn't help much. Do you have something automatic for them or do you raw dog them?

crutchcorn.dev•39 days ago

It's tough when refactoring, but once you have 'em once it's not a huge deal IMO

sh03.dev•39 days ago

Gotcha, thanks 👍

Comments

Posting Rules

Reply