Quick Renaming .js to .jsx for React

I ran this specific script in your terminal. It uses "piping" (|) to pass the result of one command to the next, like a bucket brigade.

EXPANDCOPY
powershell
Get-ChildItem -Path src -Recurse -Filter *.js |
  Where-Object { $_.Name -notin @('index.js', 'reportWebVitals.js', 'setupTests.js') } |
  ForEach-Object {
    if (Select-String -Pattern "<[a-zA-Z]" -Path $_.FullName -Quiet) {
      Write-Host "Renaming $($_.Name) to .jsx";
      Rename-Item -LiteralPath $_.FullName -NewName ($_.Name -replace '\.js
    
    
    
    
    
  
, '.jsx')
    }
  }

Here is exactly what every part of that spell does:

1. Finding the files Get-ChildItem -Path src -Recurse -Filter *.js

• Get-ChildItem: The standard command to list files (like ls or dir).
• -Path src: We only look inside the src folder.
• -Recurse: We dig deep into every subfolder, not just the top level.
• -Filter *.js: We ignore everything except files ending in .js.

2. Filtering the list Where-Object { $_.Name -notin @(...) }

• Where-Object: Acts like a bouncer; only lets items through that match the condition.
• $_: Represents the "current file" being checked.
• -notin: The condition operator. We are saying "The name must NOT be in this list".
• @('index.js', ...): The list of system files we want to skip (leave as .js).

3. Processing each file ForEach-Object { ... }

• ForEach-Object: Runs the code block inside { ... } for every single file that made it past the filter.

4. Checking for React Code (JSX) if (Select-String -Pattern "<[a-zA-Z]" -Path $_.FullName -Quiet)

• Select-String: Searches for text inside a file (like grep).
• -Pattern "<[a-zA-Z]": A Regex pattern. It looks for a < followed by a letter. This catches HTML tags like <div> or React components like <App>.
• -Path $_.FullName: The full path to the file we are currently reading.
• -Quiet: Important! This tells the command "Don't print the matching text, just tell me True or False."

5. Renaming the file Rename-Item -LiteralPath $_.FullName -NewName (...)

• Rename-Item: The command to change a file's name.
• -LiteralPath $_.FullName: We use the full path to ensure we target the exact right file.
• -NewName ($_.Name -replace '\.js , '.jsx'): We calculate the new name by taking the old name and swapping the ending .js with .jsx.

The Result

Now your code editor knows exactly which files contain UI components. You'll get better autocomplete, better color highlighting, and generally a much happier development experience.