1

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?

Improve this question
7
  • I don't have to do that; I just open a .js file and everything works as expected. Can you post your package.json? Commented Sep 3, 2021 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 Commented Sep 3, 2021 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. Commented Sep 3, 2021 at 10:34
  • @ChrisG yes and also Emmett is not working unless you define language from command pallete again Commented Sep 3, 2021 at 10:37
  • Right, I suspect you need an esLintConfig setup in your package.json; do you have that? Commented Sep 3, 2021 at 10:38

2 Answers 2

Reset to default
0

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I think the question is about why VS Code does not work well when the file extension is js, and how to fix that.
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 If this answer didn't solve your actual problem, why did you mark it as accepted?
@ChrisG I didn't, I think it was touch problem, I'm on tablet right now
0

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.

Improve this answer

5 Comments

But jsx also working with hooks and Functions
Right, but there is no sense, since you don't need JSX syntax support.
React hooks and rendering Functions are coming from react isn't?
like usestate hook from react
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.