Get my new tutorials in your inbox every week
difference between .js and .jsx files

Difference between .js and .jsx files in React?

Have you ever wondered what is the difference between .js and .jsx file extensions and when to use what? Ok, so both are file extensions generally meant to write or define your React components. When React evolved, it brought the JSX syntax with it and developers started to write their components inside .jsx files. With the help of Babel transpilers, JSX was transpiled to JS.

Now with Babel and Webpack bundlers, you need not worry about .jsx or .js. Finally, everything will be bundled into JavaScript. And remember one thing, the web browser does not understand .jsx files or JSX syntax. It is ultimately JavaScript that runs inside the browser.

Usually, we use .jsx when your file contains only JSX and defines a User Interface, so it’s simpler for you to understand what the file will actually contain. An example below,

//profile.jsx
var profile = <div>  
	<img src="avatar.png" className="profile" />  
	<h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

But nowadays it does not matter.

How do I write my React components?

I write everything inside a .js file.

You can read the official docs to have some understanding. You can also check out this StackOverflow question to understand.

Want similar tutorials to be delivered to your inbox directly? Subscribe to my email newsletter. I also send out free ebooks and tutorial pdfs regularly to my readers. I do not spam by the way and respect your privacy. Unsubscribe any time.

Related questions and answers:

Write a Comment

Your email address will not be published. Required fields are marked *