What does extension "jsx" do exactly?

Question

I'm trying to implement my frontend side with React. Usually when I make a component I made a folder with a name like Header and make index.js in the folder so that I can easily import it with the folder name because index.js is automatically called in a folder.

import Header from "components/Header";

I recently started using Material-UI and found a difference when they make a component in their framework. They make a folder with the same name Header, but they put Header.jsx in the folder. Is there a specific reason why they use jsx extension? I thought my way is conventional, but since the framework made by Google, I thought there might be a reasonable reason.

`jsx` extension refers to file which contain some `jsx` code like `
` which is actually a shortcut for `React.createElement`. It's not mandatory to have a `jsx` extension, you can write `jsx` code in `.js` files if your build system is correctly configured for transpiling the `.js` files with the correct `babel plugins`. I think having `.jsx` is a good point because you (and your IDE) know these files contains JSX code — Olivier Boissé, Sep 10 '18 at 23:00

score 1 · Accepted Answer · answered Sep 10 '18 at 22:59

There is no actual functional difference except maybe an editor/plugin that detects JSX and lints/formats differently. Some use the standard that .js files should contain content that works as standard vanilla JS. JSX obviously would not work as a vanilla JS file so you use .jsx to symbolize that and let other developers know.

score 1 · Answer 2 · answered Sep 10 '18 at 23:00

JSX is a syntax used in React apps, it stands for JavaScript Extension. It is a useful format for building UI with React. It is not required by React, but as mentioned it useful when building UI inside of Javascript.

JSX is similar to, but still an extension of, Javascript so there are some small differences and nuances you need to keep in mind when writing JSX code. For instance, since class is a keyword in javascript you need to instead use className for your JSX objects.

Example:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

You can learn more about the JSX format here: https://reactjs.org/docs/introducing-jsx.html

What does extension "jsx" do exactly?

2 Answers2