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"' {} \;

@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.)