Tengo una duda mientras estoy trabajando en reaccionar js. En el siguiente código, he usado js y jsx. Ambos responden de la misma manera. Entonces, ¿por qué deberíamos usar jsx específicamente?
Cuando busqué en línea, solo puedo obtener la diferencia entre js y jsx, pero también necesito saber si jsx está diseñado específicamente para reaccionar js o si podemos ejecutar jsx fuera del proyecto reaccionar js.
Aplicación.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;Inicio.jsx
export default function Home() { return ( <div> Hello, This is home page </div> ) }Acerca de.js
export default function About() { return ( <div>Hello, This is about page</div> ) }Diseño.jsx
import { Outlet, Link } from "react-router-dom"; export default function Layout() { return ( <div> Home | About <Outlet /> </div> ) }JS es un lenguaje de programación.
JSX es una extensión de ese lenguaje de programación que le permite especificar la forma de un DOM utilizando una sintaxis similar a XML. JSX necesita convertirse a JS antes de que los navegadores puedan manejarlo.
La elección de la extensión de archivo que utilice depende de las herramientas que utilice, que podrían prestar atención a la extensión del archivo.
Dichas herramientas incluyen Webpack, Babel, ESLint y Prettier.
En el siguiente código, he usado js y jsx. Ambos responden de la misma manera.
Sus herramientas parecen estar configuradas para que no distingan entre archivos .js y .jsx y los traten como JSX.
Entonces, ¿por qué deberíamos usar jsx específicamente?
Puede ser útil distinguir entre los dos, especialmente si un archivo se puede usar en un contexto diferente (sin la cadena de herramientas necesaria para convertir JSX a JS).
Y necesito saber si jsx está diseñado específicamente para reaccionar js o debemos crear solo un archivo y escribir el código jsx.
JSX fue diseñado para usarse con React.
Eso no significa que no pueda usarlo sin React (vea aquí , y aquí , y aquí para ver algunos resultados obtenidos al escribir JSX sin React en Google).
No puede simplemente escribir JSX, como mencioné, necesita una cadena de herramientas para convertirlo en JS antes de que un navegador (o Node.js o lo que sea que esté ejecutando su JS) pueda hacer algo con él.
De acuerdo con React Docs, puede escribir código de reacción en un archivo .js así como
archivo .jsx
En .jsx , le estás diciendo a tu editor de código: Oye, hermano, estoy escribiendo el código de reacción. Por lo tanto, le daría autocompletar e IntelliSense en consecuencia.
Una forma de probar es usar emmet en ambos archivos; no podrá usarlo en el archivo .js hasta que cambie manualmente el tipo de idioma.