rename all *.js files containing React markup to *.jsx

renameReactJsToJsx.sh

# finds all *.js files that have either `</` or `/>` tags in them and renames them to *.jsx
find ./src -type f -name '*.js' -not -name '*.jsx' -not -name '*.ejs' -exec bash -c 'grep -l -E "</|/>" "$0"' {} \; -exec bash -c 'mv "$0" "${0%.js}.jsx"' {} \;

Updated to also check for self-closing tags (/>), thank you @sean-roberts!

@jsakas I decided not to change it to git mv because it will throw errors if the files aren't under source control, but it's an easy change to make either way. Thanks for calling it out!

Works really well. Good job!

@parties Thanks for the snippet

The command doesn't work if the file or any of its parent folders have names with spaces in them.
/src/pages/Folder With Spaces/Another Folder With Spaces/file.js

To fix this we need to add quotes around $0 for grep: grep -l -E "</|/>" $0 -> grep -l -E "</|/>" "$0"

find ./src -type f -name '*.js' -not -name '*.jsx' -not -name '*.ejs' -exec bash -c 'grep -l -E "</|/>" "$0"' {} \; -exec bash -c 'git mv "$0" "${0%.js}.jsx"' {} \;

Updated to handle spaces, thank you @Dev-Zhao!

this one also renames a *.test.js files to *.test.jsx so it could impact the tests

Thanks!

Thank you!

A big time saver, thank you. 🙂

Thanks!

Thank you so much!

Whats is the beinfits after changin this, how to prevent error in pollyfill webpack 5

@inrl-md This is used when you have something like: https://vitejs.dev/ to run your React app instead of create-react-app. Vite requires any files containing jsx code to have the .jsx file extension. Vite uses a preconfigured Rollup as the bundler which is more efficient instead of Webpack (used by create-react-app). Changing .js to .jsx does not help resolve any errors in polyfill for Webpack 5.

@inrl-md This is used when you have something like: https://vitejs.dev/ to run your React app instead of create-react-app. Vite requires any files containing jsx code to have the .jsx file extension. Vite uses a preconfigured Rollup as the bundler which is more efficient instead of Webpack (used by create-react-app). Changing .js to .jsx does not help resolve any errors in polyfill for Webpack 5.

Bro how to fix polyfill for Webpack 5.

I tried many different methods for 2 days, still error

i want to run nodemailer on my react project

@inrl-md All this gist does is change .js files containing jsx code to have the .jsx extension. If you need help with polyfill for webpack 5, you can post a question on stackoverflow or open an issue in the webpack repo. No one will know why your webpack is not working when you have not provided any information. I suggest setting up your react project in a https://codesandbox.io/ and try to reproduce the error, so someone can help debug it.

thanks, it worked

Does not seem to catch files that only have custom react hooks defined. But maybe those do not need to be .jsx? (In context of Vite).

@ViktorPontinen only files containing jsx code need to be .jsx (for vite)

Thank you!

Us poor windows users can use the following powershell command:

Get-ChildItem -Path ./src -Filter *.js -Recurse | Where-Object { 
    $_.Name -notlike '*.jsx' -and $_.Name -notlike '*.ejs' 
} | ForEach-Object {
    $fileContent = Get-Content $_.FullName
    if ($fileContent -match '</|/>') {
        $newFileName = $_.FullName -replace '\.js$', '.jsx'
        Rename-Item -Path $_.FullName -NewName $newFileName
    }
}

(The code above is ai generated but worked flawlessly for me. The matching logic should be the same as in the original bash script.)