Answer a question

I have come across these 3 main file types:

• .js
• .tsx
• .jsx

What is the difference between the 3? Which one should be used? Which one is used more commonly?

Answers

• .js is JavaScript, plain and simple

const Foo = () => {
    return React.createElement("div", null, "Hello World!");
};

• .ts is TypeScript, Microsoft's way of adding "concrete" types to JavaScript

const Foo: FunctionalComponent = () => {
    return React.createElement("div", null, "Hello World!");
};

• .jsx is JavaScript but with JSX enabled which is React's language extension to allow you to write markup directly in code which is then compiled to plain JavaScript with the JSX replaced with direct API calls to React.createElement or whatever API is targeted

const Foo = () => {
    return <div>Hello World!</div>;
};

• .tsx is similar to jsx except it's TypeScript with the JSX language extension.

const Foo: FunctionalComponent = () => {
    return <div>Hello World!</div>;
};

All of these will compile down to JavaScript code. See also React Without JSX

Bear in mind that just because it has a certain extension, doesn't mean that that is what the file actually is (frustratingly). I have run into several projects that use .js as an extension for files that include JSX syntax as well as a few that even include TypeScript.