当我在react js上工作时，我有一个疑问。在下面的代码中，我使用了js和jsx。两者的反应都是一样的。那么我们为什么要专门使用jsx呢?
当我在网上搜索时，我只能得到js和jsx之间的差异，但我也需要知道jsx是专门为react js构建的，还是我们可以在react js项目之外运行jsx。
App.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;
Home.jsx
export default function Home() {
return (
<div>
Hello, This is home page
</div>
)
}
About.js
export default function About() {
return (
<div>Hello, This is about page</div>
)
}
Layout.jsx
import { Outlet, Link } from "react-router-dom";
export default function Layout() {
return (
<div>
Home | About
<Outlet />
</div>
)
}
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而不使用React可以看到这里，这里和这里)。
你不能只是写JSX，正如我提到的，你需要一个工具链把它转换成JS之前浏览器(或Node.js或任何你正在运行你的JS)可以做任何事情。
根据React Docs，您可以在.js文件以及.jsx文件中编写React代码
在.jsx你告诉你的代码编辑，嘿，兄弟，我在写反应代码。所以它会给你自动完成和智能感知。
emmet，除非您手动更改语言类型，否则无法在.js文件中使用它