.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您可以在 此處找到更多討論和文檔鏈接。