Skip to content

Instantly share code, notes, and snippets.

@thinhhung
Forked from koistya/React-Directory-Layout.md
Created August 9, 2018 06:16
Show Gist options
  • Save thinhhung/e6877f8cc959b9948b4cf61b00378f64 to your computer and use it in GitHub Desktop.
Save thinhhung/e6877f8cc959b9948b4cf61b00378f64 to your computer and use it in GitHub Desktop.
File and folder naming convention for React.js components

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 { ... }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment