File and folder naming convention for React.js components
/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/...
/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 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 { ... }
@sergeylaptev I know I'm a bit late to the part here, but what I started doing was something like this:
components/common/Navigation/NavigationMenu/...
Just treat subcomponents as their own components within the structure. Easy to organize and keep clean if you wish to expand in the future. That and you know what relates to what.So, for example you have
.../Home/
and you want like a button set (?) you would do something like.../Home/HomeButtons/
It worked for me, I just wanted to throw it out there.