react.js – What extension to use – ‘.jsx’ or just ‘.js’? [closed]

react.js – What extension to use – ‘.jsx’ or just ‘.js’? [closed]

I’m just trying to figure out what’s better for my app:

Use .jsx extension, but I will need to require components with explicit extension in require function like require(‘MyComponent.jsx’);
Use .js extension, which is fine require(‘MyComponent); but I will need to hack Sublime to lint them properly and highlight syntax.

What’s your experience?

Solutions/Answers:

Solution 1:

Update for Newer Users

The JSX Compiler tool has been removed as JSXTransformer has been deprecated. The React Team recommends using another tool such as the Babel REPL.


If you wish to keep the JSX source code intact for better maintainability, I would keep them as .jsx files. Using the JSX Compiler, either manually or via build script, will convert your JSX syntax to normal JavaScript files.

Note: It is possible to serve JSX files in your production environment but React will give you console notices about reduced performance.

Related:  Can I dynamically set tabindex in JavaScript?

Personally, I would use something like gulp-jsx or gulp-reactify to convert the files.

Example with gulp-jsx:

var gulp = require('gulp');
var jsx  = require('gulp-jsx');

gulp.task('build', function() {
  return gulp.src('path/to/*.jsx')
    .pipe(jsx())
    .pipe(gulp.dest('dist'));
});

References