Difference between Js and Jsx-CodePudding

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>
    )
}

CodePudding user response：

JS is a programming language.

JSX is an extension to that programming language which lets you specify the shape of a DOM using XML-like syntax. JSX needs converting to JS before browsers can deal with it.

The choice of file extension you use depends on the tools which you use which might pay attention to the file extension.

Such tools include Webpack, Babel, ESLint, and Prettier.

In the below code, I have used both js and jsx. Both responds in the same way.

Your tools appear to be configured so they do not distinguish between .js and .jsx files and treat both as JSX.

Then why should we use jsx specifically.

It can be useful to distinguish between the two, especially if a file might be used in a different context (without the toolchain needed to convert JSX to JS).

And I need to know whether jsx is built specifically for react js or shall we create a just a file and write jsx code.

JSX was designed for use with React.

That doesn't mean you can't use it without React (see here, and here, and here for some results gleaned by typing JSX without React into Google).

You can't just write JSX, as I mentioned, you need a toolchain to convert it into JS before a browser (or Node.js or whatever you are running your JS on) can do anything with it.

CodePudding user response：

According to React Docs, you can write react code in a .js file as well as
.jsx file

In .jsx You are telling your code editor, Hey bro I am writing react code. So it would give you autocompletes and IntelliSense accordingly.

One way to test is to use emmet in both files you won't able to use it in the .js file until and unless you manually change the language type