What are the differences between js and jsx in React js?

Question

I'v spent couple of years on react projects and so far couldn't determine the differences between js and jsx files. Anybody knows about it?

(In practice couldn't see anything specific.)

Answer 1

It really comes down to your project's configuration. There's no difference other than convention and tooling. A .jsx file is expected to contain JSX, which is JavaScript plus syntax for writing elements/components with inline syntax:

const userName = "Alice";
const div = <div>Hi there, {userName}</div>;

That shows JavaScript code with an inline JSX element (<div>____</div>) with a JSX expression in it ({userName}) that fills in the value of that variable in that location. This would be normal in a .jsx file. Browsers don't natively handle JSX, it has to be converted to straight JavaScript, usually by using Babel in a build step. For instance, if you had Babel set up to assume it was converting your code for a React project, it would convert the code above to this:

const userName = "Alice";
const div = /*#__PURE__*/React.createElement("div", null, "Hi there, ", userName);

In contrast, a .js file is normally only expected to contain straight JavaScript code, not JSX, and so the JSX parts of above would be invalid syntax.

That said, again, it depends on your project configuration. I've seen configurations that just assumed all .js files might have JSX in them and ran those through Babel or similar to convert them, and others where only .jsx files were expected to.