using JSX file format instead of JS?

Question

I'm VSCode user , it is frustrating to define language when ever you close file tab and opening again,all the time! in react projects.

so I tried to chage my header.js to header.jsx and it worked and I don't need to define language all the time.

but I wonder if it is good practice or not , all of my syntaxes and snippets seems working.

can I use jsx file format instead of JS in my react projects?

I don't have to do that; I just open a .js file and everything works as expected. Can you post your package.json? — , Sep 03 '21 at 10:14
@ChrisG everything is working yes , until you close your js file and reopen again and it's language will change to plain javascript again — IhateReact, Sep 03 '21 at 10:30
What exactly do you mean by that? Is your JSX getting marked as syntax error? Like I said, I can close .js files and open them again, and all is fine. In VSCode. I'm using create-react-app though, which probably sets up linting accordingly. — , Sep 03 '21 at 10:34
@ChrisG yes and also Emmett is not working unless you define language from command pallete again — IhateReact, Sep 03 '21 at 10:37
Right, I suspect you need an `esLintConfig` setup in your package.json; do you have that? — , Sep 03 '21 at 10:38
@ChrisG sorry for late answering, I have it , it is something like this: `"eslintConfig": { "extends" : "react-app"}` — IhateReact, Sep 06 '21 at 14:00

score 1 · Accepted Answer · answered Sep 03 '21 at 10:16

1

Use the .jsx, if you are creating React Components with HTML code (e.g. Components, html tags etc, then use .js for pure javascript code only like creating utils and etc.

answered Sep 03 '21 at 10:16

Del

164
1
7

I think the question is about why VS Code does not work well when the file extension is `js`, and how to fix that. – Peter B Sep 03 '21 at 10:21
when I'm closing js file which defined as `javascript react` and reopening it , it's language definition changing to plain js again and emmet is not working – IhateReact Sep 03 '21 at 10:32
@IhateReact If this answer didn't solve your actual problem, why did you mark it as accepted? – Sep 03 '21 at 10:33
@ChrisG I didn't, I think it was touch problem, I'm on tablet right now – IhateReact Sep 03 '21 at 10:35

score 1 · Answer 2 · answered Sep 03 '21 at 10:27

1

You should use .jsx if you have React components, or simpler HTML tags in the file.

You could use js if in your file are only React hooks or functions that don't depend on the react.js library.

answered Sep 03 '21 at 10:27

Vitalie Miron

138
7

But jsx also working with hooks and Functions – IhateReact Sep 03 '21 at 10:28
Right, but there is no sense, since you don't need JSX syntax support. – Vitalie Miron Sep 03 '21 at 10:29
React hooks and rendering Functions are coming from react isn't? – IhateReact Sep 03 '21 at 10:33
like usestate hook from react – IhateReact Sep 03 '21 at 10:33
Yes, but you need .JSX syntax only in renders case, otherwise, you don't need it. For useCallback, useEffect, useMemo you don't need JSX support. Only if you have any HTML tags if that file. – Vitalie Miron Sep 03 '21 at 10:37

using JSX file format instead of JS?

2 Answers2