Skip to content

Instantly share code, notes, and snippets.

@koistya
Last active April 7, 2024 19:01
Show Gist options
  • Save koistya/d7a507438c741ee6adb5 to your computer and use it in GitHub Desktop.
Save koistya/d7a507438c741ee6adb5 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 { ... }

@Datise
Copy link

Datise commented Jul 6, 2017

@dschinkel they could have build/environment steps enforced that make this less of an issue for a larger organization. VM's in the development process or what not. That doesn't make it right for every org.

@yomexzo
Copy link

yomexzo commented Jan 20, 2018

lol @parabuzzle,

I do not see a reason you would create /components/forms/TextBox.js and /components/forms/textbox.js in the same directory.

Following your example with developers, it is for this same reason guides and conventions exist. If the developers are educated and confirm to the guide, that would never happen. You can also write scripts to check the naming structure if you're working a huge team with risks of some not being aware.

@zigang93
Copy link

I prefer lowercase to make it more consistent and i agree with @parabuzzle

some interesting discussion : here

@silkfire
Copy link

@koistya What do you put in the /core/ folder?

@paulalex
Copy link

paulalex commented Jun 6, 2020

As a complete newcomer to react and trying to get some ideas around conventions, can I ask why in the example above:

/components.pages/Home.js
/components.pages/Home.css
/components.pages/Account/index.js
/components.pages/Account/index.css

Home starts with a capital as does it css file, but index starts with a lowercase letter, as does it css file? Is there some special significance to files named index?

@DavidBernal
Copy link

If it's so bad, why does FB do it (look at their starter kit code and flux example on github)? I see no harm in using Capitals for components especially when those Components are capitalized in Code as well.

What an argument, omg...

@parabuzzle is right, camel case could generate a lot of errors on some SO and git.

Copy link

ghost commented May 14, 2021

I think that @parabuzzle argument is totally nonsense.

The problem in his example is having two files with the same name, differing only in the upper/lowercase of the first letter.

If we are all adopting the convention of using file names starting with an uppercase, I don't see how this could happen.

Then he comes saying that it's better not to stick with the convention and propose a solution for a problem that he's creating.

@evisong
Copy link

evisong commented Sep 24, 2021

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.

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