问.js、.tsx和.jsx在反应上有什么区别？

EN

• .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替换为对React.createElement的直接API调用或任何目标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。

JS文件是一个JavaScript文件扩展名，用于任何用纯JavaScript生成的模块和代码片段。在编写函数时，您应该使用JS文件，这些函数不会使用任何React特性，而是将在不同的React组件之间使用。

JSX是React使用的文件语法扩展名，您可以呈现组件、导入文件和使用React等。在呈现React组件时，应该使用JSX文件。

TSX是JSX的TypeScript版本，TypeScript是在JavaScript中添加静态类型的超集。只要有可能，就应该使用TypeScript，因为它有许多优点(代码可伸缩性和静态类型)

JS文件是JavaScript文件扩展名，这将是完全Javascript函数。

JSX是React使用的文件语法扩展名，在这里您也可以使用CSS和。在呈现React组件时，应该使用JSX文件。

TSX是JSX的TypeScript版本。