Optimal file structure for React applications

Create React App 👷🏾‍♂️

my-app
├── build
├── node_modules
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── serviceWorker.js
├── .gitignore
├── package.json
└── README.md

Tweaking Create React App 🔧

src
├── components
│ └── app
│ │ ├── app.css
│ │ ├── app.js
│ │ └── app.test.js
│ └── index.js
├── images
└── logo.svg
├── index.css
├── index.js
└── service-worker.js
my-app
├── build
├── node_modules
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── components
│ │ ├── app
│ │ │ ├── app.css
│ │ │ ├── app.js
│ │ │ └── app.test.js
│ │ └── index.js
│ ├── images
│ │ └── logo.svg
│ ├── packages
│ │ └── ...
│ ├── utils
│ │ ├── ...
│ │ └── index.js
│ ├── index.css
│ ├── index.js
│ └── service-worker.js
├── .gitignore
├── package.json
└── README.md

The Component Directory 🍰

index.js / index.js / index.js / index.js / index.js / dropdown.js

If you are using React hooks,

function MyComponent() {
const state = useHook();
return <div {...state} />;
}
export default withHoc(MyComponent);
my-app
└── src
└── components
├── component-name
├── hooks
│ ├── index.js
│ └── use-component-name.js
├── component-name.css
├── component-name.scss
├── component-name-styles.js
├── component-name.js
└── index.js
└── index.js

If you are not using React hooks,

my-app
└── src
└── components
├── component-name
├── component-name.css
├── component-name.scss
├── component-name-container.js
├── component-name-redux.js
├── component-name-styles.js
├── component-name-view.js
└── index.js
└── index.js

The Subcomponent Directory

my-app
└── src
└── components
└── github-repo
├── components
│ ├── icon
│ │ ├── icon.scss
│ ├── icon.js
│ └── index.js
│ ├── title
│ ├── title.scss
│ ├── title.js
│ └── index.js
└── index.js
├── github-repo.scss
├── github-repo.js
└── index.js
my-app
└── src
└── components
└── github-repo
├── components
│ ├── image
│ │ ├── image.scss
│ ├── image.js
│ └── index.js
│ ├── icon
│ │ ├── icon.scss
│ ├── icon.js
│ └── index.js
│ ├── svg
│ │ ├── svg.scss
│ ├── svg.js
│ └── index.js
│ ├── title
│ ├── title.scss
│ ├── title.js
│ └── index.js
└── index.js
├── github-repo.scss
├── github-repo.js
└── index.js
src/components/component-name/SUBTYPE/name

React Router 🔗

Tests 📄

my-app
└── src
└── components
└── component-name
├── component-name-container.js
├── component-name-container.test.js
├── component-name-redux.js
├── component-name-redux.test.js
├── component-name-view.js
└── component-name-view.test.js

Conclusion 🔚

Senior front end engineer / charlesstover.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store