I've run into a bit of a snag.
I realized that a partner on my project set up a file as .js
instead of .jsx
.
I switched the filetype to match the rest of the files in the project and now I'm getting hit with this error.
index.js:1 ./src/Components/SignUp/SignUp.js Error: ENOENT: no such file or directory, open '~/src/Components/SignUp/SignUp.js'
I subbed out some of the pathing for the '~'.
I've searched through my project for all instances of SignUp
and can't find anything that would seem to lock it into looking for a .js file. Does anyone have any suggestions?
Conclusion. JS is simply a scripting language, adding functionality into your website. JSX is an addition to the JavaScript syntax which is a mixture of both HTML and JavaScript. Both JS and JSX are interchangeable but JSX makes the code easier to understand for users.
Right-click a folder or a component file in the file explorer and select Rename React Component towards the bottom of the context menu. Run ( Rename React Component ) in the command palette. This will rename the currently open React component.
What is JSX? JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
So to convert it to browser understandable JavaScript code, we use a tool like Babel which is a JavaScript compiler/transpiler. You can set up your own babel configuration using Webpack as I show in this article. Or you can use create-react-app which internally uses Babel for the JSX to JavaScript conversion.
The issue resolved with the magic of turning it on and off again. Although you can add files without restarting the server, the editing of a file name (or at least file extension) requires a restart of the server.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With