.jsx 和 .js 文件之间的技术区别是什么 [英] What is the technical difference between .jsx and .js files

问题描述

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

I would like to understand the technical difference between them so as to determine the appropriate one to use.

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

I've realised that they can both have same content and sometimes used interchangeably in some projects.

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

How does .jsx files differ from .js?

推荐答案

针对新用户的更新

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

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

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

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.

注意:可以在您的生产环境中提供 JSX 文件，但 React 会给您控制台关于性能降低的通知.

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

就我个人而言，我会使用类似 gulp-jsx 或 gulp-reactify 转换文件.

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

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

这篇关于.jsx 和 .js 文件之间的技术区别是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！