File and folder naming convention for React.js components

React-Directory-Layout.md

File and folder naming convention for React.js components

Directory Layout #1

/actions/...
/components/common/Link.js
/components/common/...
/components/forms/TextBox.js
/components/forms/TextBox.res/style.css
/components/forms/TextBox.locale/en-US/...
/components/forms/...
/components/layout/App.js - The top-level React component
/components/layout/App.res/style.css
/components/layout/App.locale/en-US/...
/components/layout/Navigation.js
/components/layout/Navigation.res/style.css
/components/layout/Navigation.res/data.json
/components/layout/Navigation.locale/en-US/...
/components/layout/...
/components/pages/Home.js
/components/pages/Home.css
/components/pages/Account/index.js
/components/pages/Account/index.css
/components/pages/...
/core/...
/constants/...
/stores/...

Directory Layout #2

/actions/...
/components.common/Link.js
/components.common/...
/components.forms/TextBox.js
/components.forms/TextBox.css
/components.forms/...
/components.layout/App.js
/components.layout/Navigation.js
/components.layout/...
/components.pages/Home.js
/components.pages/Home.css
/components.pages/Account/index.js
/components.pages/Account/index.css
/components.pages/...
/core/...
/constants/...
/stores/...

CSS Class Names

CSS class names should be prefixed with a single letter corresponding to the component's type.

For example:

Component: /components/forms/TextBox.js, CSS class name: f-textbox { ... }
Component: /components/layout/Navigation.js, CSS class name: l-nagiation { ... }

The discussions in this gist are valuable to me. Just FYI, here are some of my troubles caused by uppercase filename on Mac:

Use case 1: dev on Mac and build on Linux

Assume there’re a.js and b.js, and a line of code import { someFunc } from 'a.js'; in b.js ;

1. On macOS, it doesn’t make any differences if you rename a.js as A.js, import in b.js can be always resolved to the same dependency successfully, no matter in Node.js UT or in Webpack bundling;
2. But, after code is committed to git repo and gets built on Linux (e.g. by CI job), import in b.js would only be resolved as a.js; A.js will be considered as a totally different file, lack of a.js will cause build failure (no matter UT or Webpack bundling).

Use case 2: Git rename on Mac

No matter it’s a Git or Apple Git, no matter it’s prior to version 2.0.1 or newer, changing the filename case causes various troubles on macOS.
E.g. git mv myfile.txt MyFile.txt followed by a git reset (you don’t want to try it with production code...)

I'm confident that myself won't run into those troubles again, but it's often too late to warn junior members in my team.