Use babel-loader instead of jsx-loader

[FoxxMD]

• Install babel-loader module
• Use babel-loader to load files with .jsx instead of jsx-loader #48

[FoxxMD]

Does anyone have an opinion on using the .jsx file extension? An alternative to the current method would be to get rid of .jsx altogether and just have babel test against all .js files in the app folder. Thoughts?

[gaearon]

I think it's sane to make both JS and JSX files go through Babel.

[FoxxMD]

I think my only reservation is that if you aren't using es6 features in regular JS files than running them through babel-loader is a waste of cpu cycles and time -- especially for hot dev. If we stick to specifying that .jsx files are es6 (or have actual JSX in them) than it reduces the work babel has to do. Less files to process -> faster hot module replacement -> faster dev cycle.

On the other hand though running .js through babel ensures any modules you may use that also include es6 features or jsx will work correctly.

[gaearon]

if you aren't using es6 features in regular JS files than running them through babel-loader is a waste of cpu cycles and time

I think it can be pretty frustrating in the real project. Consider extracting functions from a component to a side module or a mixin, which are already written in ES6. Some of your non-JSX your modules would then get JSX extension.

If you want to use ES6 import/export syntax (and IMO you should eventually), you'd need Babel in each file anyway.

[FoxxMD]

Fair enough.

[gaearon]

Personally I'd also add ?experimental&optional=runtime and add babel-runtime dependency. This would make things like Object.assign work via core-js transforms.

But maybe that's too edgy.

[sebastienbarre]

@FoxxMD my 2 cents, I use the .react.js file extension for React components. I recall seeing it being used in Facebook's Flux examples (here and here) and kinda liked it. Granted, it's a bit long.

[sokra]

Thanks