I made an app with react library and saved all the files as .js and its working perfectly fine. Can anyone please help me in understanding what differences does it bring when we save the files with .jsx extensions in terms of performance or anything?
And if it doesn't why do we use .jsx ?
PS: Although, I am new to react but I am aware of the basic differences between .jsx and .js extensions.
There is no performance difference at runtime, and the browser doesn't care what extension (if any) you use on your JavaScript files.
.jsx is just a convention, it indicates that the file contains not just JavaScript, but JSX, which is an extension to JavaScript allowing you to write XML-like (somewhat HTML-like) syntax that is converted into a function call (by a build tool of some kind) before the code is used in a JavaScript environment. For instance, if you write:
const d = <div className="example">Hi there</div>;
your build tool will convert it (probably via Babel) into:
const d = React.createElement("div", {className: "example"}, "Hi there");
.js files, again by convention, only contain JavaScript, not JSX.
I've said "by convention" above, but note that if you put JSX syntax in a .js file, you'll have to take steps to tell your build tool that it needs to convert that JSX. Most build tools follow the convention, so if you don't, you have to do additional configuration.