ReactJS -.JS 與.JSX

Question

在React.js中工作時，我發現有些事情非常令人困惑。

互聯網上有很多使用.js文件和React的示例，但許多其他示例使用.jsx文件。

我讀過JSX文件，我的理解是它們只是讓您在JavaScript中編寫HTML標記。 但是同樣的東西也可以寫在JS文件中。

那么.js和.jsx之間的實際區別是什么？

Answer 1

沒有涉及文件擴展名。 您的捆綁器/轉譯器/任何負責解決文件內容類型的問題。

然而，在決定將什么放入.js或.jsx文件類型時，還有一些其他的考慮因素。 由於 JSX 不是標准的 JavaScript，人們可能會爭辯說，任何不是“普通”JavaScript 的東西都應該進入它自己的擴展名， .jsx ，JSX 的.jsx和 TypeScript 的.ts 。

這里有一個很好的討論可供閱讀

Answer 2

在大多數情況下，它只需要轉譯器/捆綁器，它可能未配置為與 JSX 文件一起使用，而是與 JS 一起使用！ 所以你被迫使用 JS 文件而不是 JSX。

而且由於 react 只是一個 javascript 庫，因此您在 JSX 或 JS 之間進行選擇沒有區別。 它們完全可以互換！

在某些情況下，由於代碼突出顯示，用戶/開發人員也可能會選擇 JSX 而不是 JS，但大多數較新的編輯器也在 JS 文件中正確查看 React 語法。

Answer 3

JSX 標簽 ( <Component/> ) 顯然不是標准的 javascript，如果將它們放在裸露的<script>標簽中，則沒有特殊意義。 因此，所有包含它們的 React 文件都是 JSX 而不是 JS。

按照慣例，React 應用程序的入口點通常是 .js 而不是 .jsx，即使它包含 React 組件。 它也可以是 .jsx。 任何其他 JSX 文件通常具有 .jsx 擴展名。

在任何情況下，之所以存在歧義是因為最終擴展名並不重要，因為只要它們實際上是 JSX，轉譯器就會愉快地咀嚼任何類型的文件。

我的建議是：別擔心。

Answer 4

正如其他人提到的JSX不是標准的 Javascript 擴展。 最好根據.js命名您的 Application 入口點，對於其余組件，您可以使用.jsx 。

我對所有組件的文件名使用.JSX有一個重要原因。 實際上，在一個擁有大量代碼的大型項目中，如果我們將所有 React 的組件都設置為.jsx擴展名，那么在跨項目導航到不同的 javascript 文件（如助手、中間件等）時會更容易，你知道這是一個 React 組件，而不是其他類型的 javascript 文件。

Answer 5

除了提到的 JSX 標簽不是標准 javascript 的事實之外，我使用 .jsx 擴展名的原因是因為使用它 Emmet 仍然可以在編輯器中工作 - 你知道，擴展 html 代碼的有用插件，例如 ul>li 到

<ul>
  <li></li>
</ul>

Answer 6

JSX 不是標准的 JavaScript，基於 Airbnb 風格指南 'eslint' 可以考慮這種模式

// filename: MyComponent.js
function MyComponent() {
  return <div />;
}

作為警告，如果您將文件命名為 MyComponent.jsx 它將通過，除非您編輯 eslint 規則，否則您可以在此處查看樣式指南

Answer 7

如前所述，如果您使用.jsx或.js創建文件，則沒有區別。

我想在創建組件時將文件創建為.jsx另一個期望。

這不是強制性的，而是一種我們可以遵循的架構方法。 因此，在大型項目中，我們將組件划分為 Presentational 組件或 Container 組件。 簡而言之，在容器組件中，我們編寫邏輯來獲取組件的數據並使用 props 渲染 Presentational 組件。 在展示組件中，我們通常不編寫功能邏輯，展示組件用於表示具有所需道具的 UI。

因此，如果您檢查React 文檔中JSX 的定義。

它說，

const element = <h1>Hello, world!</h1>;

It is called JSX, and it is a syntax extension to JavaScript. 
We recommend using it with React to describe what the UI should look like. 
JSX may remind you of a template language, but it comes with the full power of JavaScript.

JSX produces React “elements”. Instead of artificially separating technologies by putting
markup and logic in separate files, React separates concerns with loosely coupled units 
called “components” that contain both. 

React doesn’t require using JSX, but most people find it helpful as a visual aid when 
working with UI inside the JavaScript code. It also allows React to show more useful 
error and warning messages.

這意味着，這不是強制性的，但您可以考慮使用“.jsx”創建展示組件，因為它實際上將道具與 UI 綁定在一起。 和容器組件，作為.js文件，因為那些包含獲取數據的邏輯。

這是您在創建.jsx或.js文件時可以遵循的.jsx ，以便在邏輯上和物理上分離代碼。

Answer 8

為什么是 JSX？ React 接受了渲染邏輯與其他 UI 邏輯固有耦合的事實：如何處理事件、狀態如何隨時間變化以及數據如何准備顯示。

React 不是通過將標記和邏輯放在單獨的文件中來人為地分離技術，而是使用包含兩者的稱為“組件”的松散耦合單元來分離關注點。 我們將在下一節中回到組件，但如果您還不習慣在 JS 中放置標記，那么這篇演講可能會讓您信服。

React 不需要使用 JSX，但大多數人發現在 JavaScript 代碼中使用 UI 時，它作為視覺輔助很有幫助。 它還允許 React 顯示更有用的錯誤和警告消息。

有關更多信息，請查看有關 JSX 的 React 文檔。 https://reactjs.org/docs/introducing-jsx.html

Answer 9

根據 IDE 或編輯器的不同， .jsx具有不同的文件圖標：P。 不看代碼就知道是什么文件是個好習慣。 打包器和編譯器可能知道並會處理所有事情，但僅從文件名中區分.jsx和.js將對開發人員有很大幫助。

編輯：jsx 不僅僅是 js，它是 javascript + xml，它允許您在不使用模板字符串的情況下在 js 文件中編寫 html。 出於這個原因，最好使用.jsx作為你的 React 文件，而不是.js （這也是有效的）。

Answer 10

如果你使用.jsx ，它將被視為一個反應頁面，因此它的功能將被擴展自動應用。 例如，如果您在.jsx文件.container ，這將創建一個className而不是class的 div

    <div className="container"></div>

如果你在js文件中應用相同的 emmet，你會得到這個：

    <div class="container"></div>