0

In the following Microsoft doc (as well as many others), they'll have a file explicitly called App.js but then have code like:

    return (
    <>
        <h5 className="card-title">Welcome {name}</h5>
        {accessToken ? 
            <p>Access Token Acquired!</p>
            :
            <Button variant="secondary" onClick={RequestAccessToken}>Request Access Token</Button>
        }
    </>
);

Isn't this JSX? I've noticed this being done a lot and it's starting to confuse me as to how JS and JSX differ.

8protons
  • 3,591
  • 5
  • 32
  • 67
  • 1
    Does this answer your question? [ReactJS - .JS vs .JSX](https://stackoverflow.com/questions/46169472/reactjs-js-vs-jsx) – Matt U Jun 14 '21 at 03:18
  • @MattU Thanks, but I read that before and no, it doesn't answer my question. Top answer there states that "anything that is not "plain" JavaScript should go into its own extensions". Well `
     – 8protons Jun 14 '21 at 03:19
  • It says "one could argue" that point, the answer doesn't state that as fact. The key in that answer is actually "Your bundler/transpiler/whatever takes care of resolving what type of file contents there is." – Matt U Jun 14 '21 at 03:21
  • Are you asking how JS and JSX differ as concepts, or just the filename extensions? Extensions are just conveniences. – ggorlen Jun 14 '21 at 03:23

1 Answers1

1

There is a good discussion about JSX vs JS in the AirBNB repo here: https://github.com/airbnb/javascript/pull/985

Essentially, in bigger React projects especially, differentiating a .jsx file versus a .js file can come down to identifying what is used as a React component versus what is perhaps just plain Javascript logic. When it comes down to reading a .jsx and .js file, you don't need to worry about whether the extension is .jsx or .js - it will run fine as it does.

So yes technically the extension should be .jsx, but ultimately it does not matter.