Got a doubt while I am working on react js. In the below code, I have used both js and jsx. Both responds in the same way. Then why should we use jsx specifically.
When I searched online, I am only able to get the difference between js and jsx but I also need to know whether jsx is built specifically for react js or we can run jsx outside the react js project.
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>
)
}