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

Question

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

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

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

Answer 1

新用户更新

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

---

如果您希望保持 JSX source code 完整以提高可维护性，我会将它们保留为 .jsx 文件。手动或通过构建脚本使用 JSX Compiler 会将您的 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 JSX 既不是 JS 也不是 HTML，因此给它一个扩展名有助于表明它是什么。您可以在此处找到更多讨论和文档链接。