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 colleague, he told me that you should use the .jsx extension on scripts that are returning this kind of code.
I'm 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 it's javascript that we are writing.
My question, 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).
Of course both will work, but I suggest differentiating .js files from .jsx files and using .jsx for react/etc.
Why? First of all, jsx will error in a standard javascript execution environment of the browser, because standard javascript doesn't understand the various html/xml pieces.
Because we are transpiling the code, you can have it run, but .jsx is not actually intended to be incorporated into ecmascript or browser javascript.