reactjsjsx

What is the difference between using .js vs .jsx files in React?


There is something I find very confusing when working in React.

There are plenty of examples available on internet which use .js files with react but many others use .jsx files.

I have read about .jsx files and my understanding is that they just let you write HTML tags within JavaScript. But the same thing can be written in .js files as well.

So what is the actual difference between using these two file types in React?


Solution

  • There is none when it comes to file extensions. Your bundler/transpiler/whatever takes care of resolving what type of file contents there is.

    There are however some other considerations when deciding what to put into a .js or a .jsx file type. Since JSX isn't standard JavaScript one could argue that anything that is not "plain" JavaScript should go into its own extensions ie., .jsx for JSX and .ts for TypeScript for example.

    There's a good discussion here available for read