.jsx 和 .js 文件之间的技术区别是什么

Question

我想了解它们之间的技术差异，以便确定要使用的合适的一个。

我意识到它们可以具有相同的内容，有时在某些项目中可以互换使用。

.jsx文件与.js有何不同？

Answer 1

新用户更新

JSX 编译器工具已被删除，因为 JSXTransformer 已被弃用。 React 团队建议使用其他工具，例如Babel REPL 。

---

如果您希望保持JSX 源代码完整以提高可维护性，我会将它们保留为.jsx文件。 手动或通过构建脚本使用JSX 编译器将您的 JSX 语法转换为普通的 JavaScript 文件。

注意：可以在您的生产环境中提供 JSX 文件，但 React 会向您提供有关性能降低的console通知。

---

就个人而言，我会使用gulp-jsx或gulp -reactify 之类的东西来转换文件。

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'));
});

Answer 2

查看此讨论： ReactJS - .JS vs .JSX您可以在 此处找到更多讨论和文档链接。