.JSX Extension

I came across many best practices for React & Redux. Couple of doubts for my App Architecture are:

1. What are the key difference between .jsx and .js extension files and when to use them concisely?
2. If i'm using .jsx for functional component. Is it a good practice to connect redux state and/or dispatch to this component props?

Comments

[Valentin D.]

You can always use .js extension if you want, but it's generally better to use .jsx when your file contains JSX so it's simpler for you to understand what the file will actually contain.

.js --> only js
.jsx --> contains JSX (reactjs.org/docs/introducing-jsx.html)

[yashwanth_t]

Hey Valentin,

Thanks a lot i got the gist of it. Do you any suggestion for my second question?

[Valentin D.]

Sure, you can connect redux to your functional component.
Functional components are just another way to create components. ;)

[yashwanth_t]

Thanks Valentin As a beginner it helped me. Cheers ;)

[Kostas Minaidis]

One thing that makes the life of a React Developer easier when using the .jsx extension, is that it enables auto complete and Emmet Abbreviations with both JavaScript and HTML language, when used in an editor such as VSCode.

I always recommend using the .jsx extension when creating React Components, since it gives us the niceties of the JS/HTML code helpers in a Code Editor.

Example: try writing div in a .js file and div in a .jsx file.

You get nothing in the first case, but

auto completion with the Tab key in the latter.

[Manikanta]

There is no difference between .jsx and .js. It's a convention for our understanding only. Generally, .jsx is used when that file contains react specific code, .js is preferred for a utility or pure javascript functions or constants, etc.,