When should I use .jsx and .js particularly?

Question

I have a React project in which everything was running fine until I changed the extension of App.js from the components folder to App.jsx

Here is a screenshot of the folder:

When I run npm start, got the following error:

Error: ENOENT: no such file or directory, open 'D:\phone\src\components\App.js'

index.js

import ReactDOM from "react-dom"
import App from "./components/App"
ReactDOM.render(<App />, document.getElementById("root"))

package.json

      ...
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      ...

I read here https://stackoverflow.com/a/46169636/12611597 that these extensions are completely interchageable. How to configure the transpiler?

So Why is this error ocurring?

Can you add the `start` part of your package json. Is this a Create-React-App? — zero298, Jan 21 '21 at 05:45
I think `index.js` import is meant defaulting to .js extension for `App.js`. So while importing only for `App.js` file specify the extension `.jsx`. — sourav satyam, Jan 21 '21 at 06:16
It is for the global module that goes with the `root` div tag — sourav satyam, Jan 21 '21 at 06:17

score 0 · Answer 1 · answered Jan 21 '21 at 07:32

0

Error: ENOENT: no such file or directory, open 'D:\phone\src\components*App.js*'

Remove the .js part and it should work. It's a bit individual, but as a good practice, you can write .jsx if you are using jsx file, and .js if it is a javascript module. Some code editors force you to write jsx( for example webstorm), if you use typescript, then you already have to specify .tsx and .ts extensions. Speaking easier, use .jsx if you return jsx from your component, write .js if it is a javascript file. And during the imports don't specify the extension.

answered Jan 21 '21 at 07:32

Tigran Petrosyan

524
4
14

While you are not wrong per se, this is not an answer to the question. – idmean Jan 21 '21 at 07:52
1

When I answered,, the question was not updated with more details) – Tigran Petrosyan Jan 21 '21 at 07:57

When should I use .jsx and .js particularly?

1 Answers1