React.js - which extension to use - ".jsx" or just ".js"?

Question

I'm just trying to figure out what is best for my application:

• Use .jsx extenstion, but I will need to require components with an explicit extension in the required function, for example require('MyComponent.jsx');

• Use the .js extension, which is excellent require('MyComponent); , but I will need to hack Sublime in order to draw them correctly and highlight the syntax.

What is your experience?

Answer 1

Update for new users

The JSX compiler tool has been removed because the JSXTransformer is deprecated. The React team recommends using another tool, such as Babel REPL .

---

If you want to save the JSX source code for better maintainability, I would save them as .jsx files. Using the JSX Compiler , either manually or through a build script, converts your JSX syntax into regular JavaScript files.

Note. You can maintain JSX files in your production environment, but React will give you console notifications of performance degradation.

---

Personally, I would use something like gulp-jsx or gulp-reactify to convert 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')); });