.JSX Extension

github logo ・1 min read

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?
twitter logo DISCUSS (5)
markdown guide

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)


Hey Valentin,

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


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

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


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.,

Classic DEV Post from Jan 2

If you've recently switched code editorsβ€” How's it going so far?


yashwanth_t profile image
I'm Web Developer