File structuring seems to be one of those overly debated topics, to the point where even the React documentation advises not to stress out over it.
That being said, for any project it does help a mighty amount to have a file structure that makes it easier for you to navigate.
I primarily use React, so I'll share a peak into the source of my React projects with some example files. For the components folder, organizing it according to Brad Frost's Atomic Design enables me to think like an architect as I build out UIs.
src/
components/
atoms/
Label/
tests/
Label.test.tsx
Label.tsx
Label.scss
Label.stories.tsx
molecules/
TextInput/
tests/
TextInput.test.tsx
TextInput.tsx
TextInput.scss
TextInput.stories.tsx
organisms/
Form/
tests/
Form.test.tsx
Form.tsx
Form.scss
pages/
ContactUs/
ContactUs.tsx
templates/
SignedIn/
SignedIn.tsx
SignedOut/
SignedOut.tsx
images/
logo.svg
redux/
actions/
reducers/
store.js
styles/
main.scss
variables.scss
App.tsx
App.scss
index.tsx
Top comments (0)