New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add pragmatic advice on file structure #338

Merged
merged 2 commits into from Nov 24, 2017

Conversation

@gaearon
Copy link
Member

gaearon commented Nov 24, 2017

Figured I'd write this

@reactjs-bot

This comment has been minimized.

Copy link

reactjs-bot commented Nov 24, 2017

Deploy preview ready!

Built with commit 71788c6

https://deploy-preview-338--reactjs.netlify.com

One common way to structure projects is locate CSS, JS, and tests together inside folders grouped by feature or route.

```
FeatureA
common/
Avatar.js

This comment has been minimized.

@kentcdodds

kentcdodds Nov 24, 2017

Contributor

Any chance I could sway things from PascalCase to kebab-case? I've seen many people (especially beginners) have issues with case-sensitivity across operating systems and with git. I've found it best to avoid these issues altogether by encouraging all lower case and using kebab-case to separate words. I'd love it if the recommended approach in React's docs helped encourage this as well to avoid casing issues for people following the suggestion.

This comment has been minimized.

@gaearon

gaearon Nov 24, 2017

Member

I think that's going to be a hard sell for most people since it doesn't match component names.

This comment has been minimized.

@Ethan-Arrowood

Ethan-Arrowood Nov 24, 2017

Interesting! I've haven't ran into case-sensitivity issues in my own development yet, but this does sound like a very real concern. I would support using kebab-case, and maybe even explaining why it is recommended over PascalCase.

This comment has been minimized.

@olingern

olingern Nov 24, 2017

I think kebab-case is a little less intuitive on how to import without opening the file up, i.e.
is my-component imported as MyComponent, myComponent, or mycomponent

I think if you maintain the casing and the component name to match, it makes it easier to not constantly reference the file.

This comment has been minimized.

@erikras

erikras Nov 24, 2017

Kebab-case is for npm packages. PascalCase for local components. My 0.02€.

This comment has been minimized.

@KyleAMathews

KyleAMathews Nov 25, 2017

Contributor

I fairly regularly see Gatsby issues where people can't deploy from linux CI because of casing issues not discovered on their mac.

This comment has been minimized.

@amackintosh

amackintosh Nov 25, 2017

@kentcdodds One viable alternative you could do is encourage ES Lint.

We won't get into the savagery of eslint-config-airbnb, but I think you could recommend import/no-unresolved which throws error when the import declaration doesn't match the underlying filesystem.

Anomalies can only persist for seconds.

I would rather see people adopting ES Lint and using its built in "recommendation engine" to not only stop time waste errors but also to skill up further by researching why some rules pop up. I consider Airbnb as incredible for intermediate-level wizards, assuming one researches and comes to understand why each rule exists. Bottom line, I think it is a pathway to improve knowledge of JavaScript itself.

@Ethan-Arrowood

This comment has been minimized.

Copy link

Ethan-Arrowood commented Nov 24, 2017

Gave it a read through and it all sounds good to me! Tried looking for big spelling/grammar mistakes too and nothing popped out. 👍

ProfileAPI.js
```

The definition of what a "feature" is not universal, and it is up to you to choose the granularity. If you can't come up with a list of top-level folders, you can ask the users of your product what major parts it consists of, and use their mental model as a blueprint.

This comment has been minimized.

@paulkoegel-wessels

paulkoegel-wessels Nov 24, 2017

There's an "is" missing here -> "The definition of what a feature is is not universal"

This comment has been minimized.

@olingern

olingern Nov 24, 2017

The definition of what a "feature" is not universal

The definition of what a "feature" can be is not universal ?

@mxstbr

This comment has been minimized.

Copy link
Member

mxstbr commented Nov 24, 2017

LGTM 💯

ProfileAPI.js
```

The definition of what a "feature" is not universal, and it is up to you to choose the granularity. If you can't come up with a list of top-level folders, you can ask the users of your product what major parts it consists of, and use their mental model as a blueprint.

This comment has been minimized.

@nickdima

nickdima Nov 24, 2017

What will index.js consist of in this case?

@langpavel
Copy link

langpavel left a comment

💯


#### Avoid too much nesting

There are many pain points associated with deep directory nesting in JavaScript projects. It becomes harder to write relative imports between them, or to update those imports when the files are moved. Unless you have a very compelling reason to use a deep folder structure, consider limiting yourself to a maximum of three or four nested folders within a single project. Of course, this is only a recommendation, and it may not be relevant to your project.

This comment has been minimized.

@damassi

damassi Nov 24, 2017

What about for those using absolute paths?

This comment has been minimized.

@gaearon

gaearon Nov 24, 2017

Member

That's exactly the kind of detail I don't want to get into :-) If you know how to set this up and understand the tradeoffs of using symlinks vs non-standard setup that doesn't work with other tooling, you already know more than this section can give you.

@gaearon gaearon merged commit 12e32e5 into master Nov 24, 2017

1 check passed

ci/circleci Your tests passed on CircleCI!
Details

@gaearon gaearon deleted the gaearon-patch-4 branch Nov 25, 2017

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