2

I started using react as my ui framework of choice. Upon my adventure through the documentation I noticed that when using the create-react-app script to spin up a new react boilerplate, they used .js file extension on scripts that where returning jsx code. When I asked my buddy he told me that you should use the .jsx extension on scripts that are returning this kind of code.

Im a bit lost here as if both works, wouldn't it just be better to go with the .js extension as at the end of the day its javascript we writing.

Please help me with what is considered best practise. (I kinda have a feeling it would be to use the .jsx extensions on these types of scripts, but I'd love to hear the community's view on this)

Thanks in advance :)

0xe1λ7r
  • 1,957
  • 22
  • 31
  • I'm not super knowledgeable on this, but I have made multiple react apps with `create-react-app` and have always just used the `.js` extension. Never had a problem using jsx in those files as long as `react` is in scope. – Gage Hendy Ya Boy Dec 05 '17 at 19:26
  • Probably [this](https://stackoverflow.com/questions/27887678/react-js-what-extension-to-use-jsx-or-just-js) answer will help you – Mikhail Katrin Dec 05 '17 at 19:28
  • @MikhailKatrin your answer was good as well thanks for the link. For anyone hitting this page, this link is a must see! – 0xe1λ7r Dec 05 '17 at 19:45

2 Answers2

6

It's really up to personal preference.

My personal opinion is JavaScript is JavaScript, and I just use .js. Others will prefer to use .jsx in files that are JSX and .js in for things like utilities, in order to differentiate. The only important thing is to be consistent in whatever you choose (at least within one project).

In general, it doesn't matter.

The only time it might actually matter is based on your build pipeline. Some build pipelines may be configured to compile .js and .jsx with slightly different rules, but that would be based on your application (things like create-react-app don't care).

At the end of the day, you could use a .cookiemonster extension and it'd work just fine (as long as your build pipeline is configured to handle it).

samanime
  • 25,408
  • 15
  • 90
  • 139
0

Actually it doesn't matter, is up to you to decide I prefer to use .jsx when I return the mix between HTML and JS and use .js only when I'm using plain JS or ES6.

I recommend you to read about this on this issue on github.

Joan Albert
  • 644
  • 10
  • 23