这些Microsoft文档将JSX放在JS文件中是错误的吗？

Question

在下面的Microsoft doc (以及其他许多)中，它们将有一个显式名为App.js的文件，但随后会有如下代码：

    return (
    <>
        <h5 className="card-title">Welcome {name}</h5>
        {accessToken ? 
            <p>Access Token Acquired!</p>
            :
            <Button variant="secondary" onClick={RequestAccessToken}>Request Access Token</Button>
        }
    </>
);

这不是JSX吗？我已经注意到这件事做了很多，这让我开始对JS和JSX的区别感到困惑。

Answer 1

在AirBNB存储库中有一个关于JSX vs JS的很好的讨论：https://github.com/airbnb/javascript/pull/985

本质上，尤其是在更大的React项目中，区分.jsx文件和.js文件可以归结为识别用作React组件的是什么，而不是什么可能只是简单的Javascript逻辑。当涉及到读取.jsx和.js文件时，您不需要担心扩展名是.jsx还是.js -它会运行得很好。

因此，从技术上讲，扩展名应该是.jsx，但最终这并不重要。