JSX in React ( question about .jsx and .js format )

hi guys
I read an article about JSX in React
I realized the advantages of JSX…
But I don’t know what is the difference between files that are in .jsx format and files that are in .js format?

Welcome to the community!

Here is something I found to explain the difference.

I hope it answers your question for you.

Happy coding! :slight_smile:

JSX is the language that looks like HTML that React (and a few other frameworks) use to help when writing JavaScript-powered browser applications.

The JSX is written (by you, when you’re coding a React applications) inside JavaScript code. So you write JavaScript, and then use this little language with its own rules inside of your JavaScript to describe the HTML output you want.

It isn’t valid JavaScript, it needs a tool that reads the JSX and converts it into JavaScript functions before a browser can run it.

So the tool needs to go through your JavaScript files, checking where there is any JSX. It then needs to rewrite the files so that they are just plain JavaScript. Once you’re left with plain JavaScript, you can run the files as normal in a browser.

So the reason for having .jsx as a file extension is that a tool doesn’t have to go through all your files: it can just look for those with the .jsx extension and rewrite them to be plain .js, that’s all. Makes things easier for the computer. It’s for simple and dumb reasons.

It’s not just tools that convert the files for the end product: it means that tools in text editors for highlighting code or looking for errors are much easier to build, because, again, they don’t have to check every file, just the ones ending in .jsx