1

When I build a component in a react application, I normally use the.js file extension (even if I write in jsx), but I've seen some use the.jsx file extension. Is it better to use .jsx file extensions for components instead of .js? And what's the benefit of doing that?

I use .js file extension and it works without any problem

Navindu Dahanayake
  • 35
  • 5
  • Does this answer your question? [ReactJS - .JS vs .JSX](https://stackoverflow.com/questions/46169472/reactjs-js-vs-jsx) – DBS Jun 04 '23 at 16:43
  • If the file contains JSX code, it should probably be labeled as such. If it is a service class or utility file with pure JS function, then `.js` should be fine. You are allowed to mix the two. It's purely for convention. – Mr. Polywhirl Jun 04 '23 at 17:22
  • Often React is used in Typescript, and if you use `.ts`, `` in Typescript is a typecast, but in `.tsx` it's knows it's JSX. So it's likely to keep the convention similar, eg. `ts/tsx` & `js/jsx`.. It could also be used to keep trans-piling faster, if you always know it's only `jsx` that's got JSX used inside, then you can skip the JSX transpiler. – Keith Jun 04 '23 at 17:41

2 Answers2

0

It depends on your build setup. On some setups writing JSX in a .js will not work.

But as long as .js files with JSX work for you, I don't see a problem with it.

Jonathan Wieben
  • 541
  • 4
  • 8
0

As @DBS mentioned in one comment, this question has already been asked. But since you are a new member, I'll add a recap to help you understand.

reference from this question ReactJS - .JS vs .JSX

  1. If you make a file with.jsx or.js, it doesn't matter.

  2. JSX is not a standard Javascript extension.

  3. It's only necessary for the transpiler/bundler, which might not be set up to work with JSX files, but might work with JS! You can't use JSX files, so you have to use JS files instead.

  4. .jsx will be seen as a react page, and you are able to identify the difference between React Component and other types of javascript files. Also its features will be applied by extensions automatically

Harendrra
  • 107
  • 1
  • 10