Js 和 Jsx 的區別

Question

在我處理 React JS 時有疑問。 在下面的代碼中，我同時使用了 js 和 jsx。 兩者的反應相同。 那為什么要專門用jsx呢。

當我在網上搜索時，我只能得到 js 和 jsx 之間的區別，但我還需要知道 jsx 是專門為 react js 構建的還是我們可以在 react js 項目之外運行 jsx。

應用程序.js

import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Layout from './Components/Layout'
import Home from './Components/Home'
import About from './Components/About'

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<Home />} />
            <Route path="about" element={<About />} />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

首頁.jsx

export default function Home() {
    return (
        <div>
            Hello, This is home page
        </div>
    )
} 

關於.js

export default function About() {
    return (
        <div>Hello, This is about page</div>
    )
}

布局.jsx

import { Outlet, Link } from "react-router-dom";
export default function Layout() {
    return (
        <div>
            Home | About
            <Outlet />
        </div>
    )
}

Answer 1

JS是一種編程語言。

JSX是該編程語言的擴展，它允許您使用類似 XML 的語法指定 DOM 的形狀。 JSX 需要先轉換為 JS，然后瀏覽器才能處理它。

您使用的文件擴展名的選擇取決於您使用的工具，可能會注意文件擴展名。

這些工具包括 Webpack、Babel、ESLint 和 Prettier。

在下面的代碼中，我同時使用了 js 和 jsx。 兩者的反應相同。

您的工具似乎已配置，因此它們不區分.js和.jsx文件並將兩者視為 JSX。

那為什么要專門用jsx呢。

區分兩者可能很有用，特別是如果一個文件可能在不同的上下文中使用（沒有將 JSX 轉換為 JS 所需的工具鏈）。

而且我需要知道 jsx 是專門為 React js 構建的，還是我們只創建一個文件並編寫 jsx 代碼。

JSX 是為與 React 一起使用而設計的。

這並不意味着您不能在沒有 React 的情況下使用它（請參閱此處、 此處和此處，了解通過在 Google 中輸入JSX without React收集到的一些結果）。

你不能只寫 JSX，正如我提到的，你需要一個工具鏈將它轉換成 JS，然后瀏覽器（或 Node.js 或任何運行 JS 的東西）可以用它做任何事情。

Answer 2

根據 React Docs，您可以在.js文件中編寫 React 代碼，也可以
.jsx文件

在.jsx中，你告訴你的代碼編輯器，嘿，兄弟，我正在編寫 React 代碼。 因此它會相應地為您提供自動完成和 IntelliSense。

一種測試方法是在兩個文件中都使用emmet ，除非您手動更改語言類型，否則您將無法在.js文件中使用它