React-starter-kit: Use .jsx or .js extension for React components?

[koistya]

Which of these conventions do you prefer and why?

• ./components/MyComponent.jsx
• ./components/MyComponent.js
• ./components/MyComponent.react.js
• ./components/MyComponentView.js

[jakecraige]

What about Facebook's convention in their example apps, MyComponent.react.js and then you can require('./MyComponent.react') ?

[koistya]

Yep, that's an option. Might be a little specific to Facebook organization, because they have a huge code-base and need to differentiate React components from the other stuff.

Another approach is to use View.js or ControllerView.js suffixes, e.g. NewsFeedControllerView.js, NewsItemView.js. I personally lean toward more generic naming conventions. This way you can mix several technologies like React, Polymer Web Components in your views.

Also there is a way to use .jsx extension but still reference modules without it, e.g. require('./NewsItemView') See extensions setting in Webpack config file.

[jakecraige]

I agree about a more generic naming convention. So much that I don't think you need to View or anything on the end. Reason is that it's going to be within a directory that says what it is already. NewsItemView is likely within components, so I don't think the View part is necessary. Unless you need that to get the specific files or something. My preference would be a simple js extension and to use the directory name to differentiate between what is what

[koistya]

Replaced .jsx file extensions with .js in 977c82ed752374fdf2915d08c3ec6f361cf0d9a9