Javascript react.js - 使用什么扩展名 - “.jsx”还是“.js”?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27887678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 00:50:52  来源:igfitidea点击:

react.js - What extension to use - '.jsx' or just '.js'?

javascriptreactjs

提问by Kosmetika

I'm just trying to figure out what's better for my app:

我只是想弄清楚什么对我的应用程序更好:

  1. Use .jsxextension, but I will need to require components with explicit extension in require function like require('MyComponent.jsx');

  2. Use .jsextension, which is fine require('MyComponent);but I will need to hack Sublime to lint them properly and highlight syntax.

  1. 使用.jsx扩展,但我需要在 require 函数中使用显式扩展的组件,如require('MyComponent.jsx');

  2. 使用.js扩展名,这很好,require('MyComponent);但我需要破解 Sublime 以正确检查它们并突出显示语法。

What's your experience?

你有什么经验?

采纳答案by Ryan

Update for Newer Users

新用户更新

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 编译器工具已被删除,因为 JSXTransformer 已被弃用。React 团队建议使用其他工具,例如Babel REPL



If you wish to keep the JSX source codeintact for better maintainability, I would keep them as .jsxfiles. Using the JSX Compiler, either manually or via build script, will convert your JSX syntax to normal JavaScript files.

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

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

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



Personally, I would use something like gulp-jsxor gulp-reactifyto convert the files.

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

Example with gulp-jsx:

例如用吞-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'));
});