react.js - 使用什么扩展名 - '。jsx'或只是'.js'？ [英] react.js - What extension to use - '.jsx' or just '.js'?

问题描述

我只是想弄清楚什么对我的应用更好：

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

1. 使用。 jsx 扩展名，但我需要在require函数中要求具有显式扩展名的组件，如 require（'MyComponent.jsx'）;

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

使用 .js 扩展，这很好 require（'MyComponent）; 但是我需要破解Sublime来正确定位它们并突出显示语法。

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

你有什么经历？

推荐答案

更新用户的更新

由于不推荐使用JSXTransformer，因此删除了JSX编译器工具。 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会给你 console 关于降低性能的通知。

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

这篇关于react.js - 使用什么扩展名 - '。jsx'或只是'.js'？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！