时间戳

首页 > 解决方案 > React 中的 .js、.tsx 和 .jsx 有什么区别？

reactjs - React 中的 .js、.tsx 和 .jsx 有什么区别？

问题描述

我遇到了这 3 种主要文件类型：

3之间有什么区别？应该使用哪一个？哪个更常用？

标签： reactjs

解决方案

  • .js是 JavaScript，简单明了
const Foo = () => {
    return React.createElement("div", null, "Hello World!");
};
  • .ts是TypeScript，微软向 JavaScript 添加“具体”类型的方式
const Foo: FunctionalComponent = () => {
    return React.createElement("div", null, "Hello World!");
};
  • .jsx是 JavaScript，但启用了JSX，这是 React 的语言扩展，允许您直接在代码中编写标记，然后将其编译为纯 JavaScript，并将 JSX 替换为直接 API 调用React.createElement或任何目标 API
const Foo = () => {
    return <div>Hello World!</div>;
};
  • .tsx与jsx类似，只是它是带有 JSX 语言扩展的 TypeScript。
const Foo: FunctionalComponent = () => {
    return <div>Hello World!</div>;
};

所有这些都将编译为 JavaScript 代码。另请参阅没有 JSX 的反应

请记住，仅仅因为它具有特定的扩展名，并不意味着这就是文件的实际内容（令人沮丧）。我遇到了几个项目，这些项目.js用作包含 JSX 语法的文件的扩展，以及一些甚至包含 TypeScript 的文件。

推荐阅读