Menu
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?
262
JSX converts HTML tags into react elements. You are not required to use JSX, but JSX makes it easier to write React applications.
JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment. Each JSX element is just syntactic sugar for calling React.
A JSX file is a JavaScript (. JS) file written using JSX syntax. It contains code that is most likely part of a single-page or mobile application. JSX files can be opened in any text editor, but are meant to be opened in source code editors.
JS is standard javascript, JSX is an HTML-like syntax that you can use with React to (theoretically) make it easier and more intuitive to create React components. As the docs say, the only purpose is to make it easier to create React components... there's not much else there.
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'
188
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
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
