14

I've been writing react for a few months now and I just realized that some of my files have a .js extension while others have .jsx extension. When I write jsx in the .js files, everything still works. Does it matter what the extension is?

by the way (for context), I'm using webpack to generate a bundle.js file. Does that affect anything?

Abdul Ahmad
  • 9,673
  • 16
  • 64
  • 127
  • 6
    No using .js or .jsx doesn't matter since you have webpack to transpile everything. Really the main difference is when you import files in, you have to include .jsx extension for jsx files where if it is just a js file, you can just put the file name. Ex : import File from './file.jsx' vs import File from './file' – erichardson30 Apr 27 '16 at 18:35
  • @erichardson30 why isn't this an answer? looks correct to me, and answers the question. U don't want points bruh?!? – Abdul Ahmad Apr 27 '16 at 18:37
  • 1
    Web pack transpiles now? I thought babel did that – Derek Pollard Apr 27 '16 at 18:38
  • Possible duplicate of [react.js - What extension to use - '.jsx' or just '.js'?](http://stackoverflow.com/questions/27887678/react-js-what-extension-to-use-jsx-or-just-js) – Jaydev May 31 '16 at 07:33

3 Answers3

21

No using .js or .jsx doesn't matter since you have webpack/babel to transpile everything. Really the main difference is when you import files in, you have to include .jsx extension for jsx files where if it is just a js file, you can just put the file name. Ex : import File from './file.jsx' vs import File from './file'

erichardson30
  • 4,984
  • 8
  • 26
  • 47
8

No, it doesn't matter what the extension is.

The JSX transpiler bundled with Babel (which I presume you're using with Webpack) goes through every file in a watched directory, and simply converts only those segments which match JSX syntax.

All of your files will be reproduced in a corresponding build directory or - in this case - to your Webpack bundle. The transpiler is capable of differentiating regular Javascript from JSX, and will not make changes to the former.

It is still good practice to use .jsx anyway, so that it's clear to humans.

Akshat Mahajan
  • 9,543
  • 4
  • 35
  • 44
6

As already mentioned, technically it doesn't matter.

But, especially when it comes to collaborative projects, it's may be interesting to check the Airbnb React/JSX Style Guide which is mentioning:

Extensions: Use .jsx extension for React components.

Source: https://github.com/airbnb/javascript/tree/master/react

to7be
  • 566
  • 6
  • 14