.js vs .jsx vs .ts vs .tsx

.js and .ts

• .js: file extension for JavaScript files.
• .ts: file extension for TypeScript files. TypeScript code compiles directly to browser-compatible JavaScript.

JSX

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript files, primarily used with the React library to describe the user interface.

• .jsx: file extension for JSX.
• .tsx: file extension for TypeScript files that contain JSX syntax.

When to use which?

When working with React, .jsx / .tsx files are typically used for React components, while .js / .ts files are used for other TypeScript code, such as utility functions, interfaces, or classes.