Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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 { ... }

@loktar00

This comment has been minimized.

Copy link

@loktar00 loktar00 commented Feb 9, 2015

This is great! Was looking for some guidance on my directory structure, thanks.

@sergeylaptev

This comment has been minimized.

Copy link

@sergeylaptev sergeylaptev commented Mar 2, 2015

Nice. What is about subcomponents? For example Navigation layout has NavigationMenu subcomponent, how are you call components like this?

@mikehuebner

This comment has been minimized.

Copy link

@mikehuebner mikehuebner commented Dec 23, 2015

@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.

@parabuzzle

This comment has been minimized.

Copy link

@parabuzzle parabuzzle commented Feb 18, 2016

I'm not sure I agree with using uppercase letters in file names. This could cause problems later when working with case sensitive file systems (like linux). As an example, you could create a file name /components/forms/TextBox.js and a different file named /components/forms/textbox.js on Linux but this will wreak havoc on an insensitive filesystem like OSX the moment you try to check out that code.

try this:

on a mac open a file name tmp and write some stuff in it.. then read the file TMP. It will be the same file... do the same on Linux and you will see tmp != TMP

## LINUX ##
$ echo 'foo' > tmp
$ cat tmp
foo
$ cat TMP
cat: TMP: No such file or directory

## MAC ##
$ echo 'foo' > tmp
$ cat tmp
foo
$ cat TMP
foo

This is why most frameworks that provide file generators (rails as an example) always generate lowercased filenames.

As a proof of concept... try cloning this example repository: https://github.com/parabuzzle/SensitiveCaseIsSensitive

notice on a mac how you're missing a file...

The scenario is this...

Developer A is working on a Mac and Developer B is working on Linux...

Developer A checks in a file named Links.js while Developer B creates a file named links.js

Developer B pulls the latest changes from Developer A and no merge conflicts happen.

Developer B commits changes and pushes up.

The code works in production (production is Linux).. but when Developer A pulls down the code, it doesn't work locally because Links.js is gone in favor of the newer links.js.

Confusion ensues as to how the code even works at all in production...

@goerwin

This comment has been minimized.

Copy link

@goerwin goerwin commented Mar 3, 2016

@parabuzzle That is an interesting point. It's preferred to have all directory/file names in lowercase.

@dschinkel

This comment has been minimized.

Copy link

@dschinkel dschinkel commented May 30, 2016

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.

@cztomsik

This comment has been minimized.

Copy link

@cztomsik cztomsik commented Jun 23, 2016

@dschinkel they're doing it wrong

@krishnasaga

This comment has been minimized.

Copy link

@krishnasaga krishnasaga commented Aug 15, 2016

It will be great if you specify any component naming convention.

@cuduy197

This comment has been minimized.

Copy link

@cuduy197 cuduy197 commented Feb 24, 2017

Thanks !

@jhwheeler

This comment has been minimized.

Copy link

@jhwheeler jhwheeler commented Apr 26, 2017

@cztomsik @parabuzzle It's their framework, they set the rules. In React, all components by convention have capital names, as do their filenames. Simple. If you follow the convention, then the Mac/Linux situation described above would never happen. Any developer coming on a team should know the framework's conventions before committing code.

@maple10001

This comment has been minimized.

Copy link

@maple10001 maple10001 commented Jun 29, 2017

@parabuzzle met the same situation as your described

@bloody-ux

This comment has been minimized.

Copy link

@bloody-ux bloody-ux commented Jul 5, 2017

always use lower-case

and for react components, use *.jsx extension instead.

@Datise

This comment has been minimized.

Copy link

@Datise 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

This comment has been minimized.

Copy link

@yomexzo 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

This comment has been minimized.

Copy link

@zigang93 zigang93 commented Feb 20, 2018

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

some interesting discussion : here

@silkfire

This comment has been minimized.

Copy link

@silkfire silkfire commented Jul 26, 2018

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

@paulalex

This comment has been minimized.

Copy link

@paulalex 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

This comment has been minimized.

Copy link

@DavidBernal DavidBernal commented Aug 4, 2020

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.

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