Difference between Js and Jsx

Question

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

Writing `
` is not possible in "normal" js. Instead you'd have to write `React.createElement('div', props, ...etc)` — evolutionxbox, May 23 '22 at 10:31
Does this answer your question? [ReactJS - .JS vs .JSX](https://stackoverflow.com/questions/46169472/reactjs-js-vs-jsx) — evolutionxbox, May 23 '22 at 10:46
No... It is not the same actually. There only the difference between Js and Jsx alone has been explained. I also need to know whether we can use jsx outside my react project. — Sujith Sandeep, May 23 '22 at 10:59
As long as the build processor supports it. https://parceljs.org/recipes/react/#jsx parcel supports it without react. — evolutionxbox, May 23 '22 at 11:02
Parcel supports JSX automatically when it detects you are using React. is from [link](https://parceljs.org/recipes/react/#jsx). It also need to detect react it seems. — Sujith Sandeep, May 23 '22 at 11:04
No, https://parceljs.org/languages/javascript/#jsx preact is supported too. — evolutionxbox, May 23 '22 at 11:05

score 1 · Accepted Answer · answered May 23 '22 at 10:40

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.

score 0 · Answer 2 · answered May 23 '22 at 10:46

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

Difference between Js and Jsx

2 Answers2