write documentation requiring React components to have .jsx extension instead of .js

[aqandrew]

Dependency

• [x] Merge: https://github.com/hackforla/311-data/issues/1778

Overview

As a consequence of our Vite migration, we need to document the necessity for components to have .jsx file extensions

More Info

Traditionally, React components may be written in either .js or .jsx files. Our new build tool, Vite, requires that all files containing React components have the .jsx extension. This practice helps to prevent errors during Vite's static analysis of imported files.

Action Items

• [ ] create new wiki page: "Vite Migration: Why Vite Components Require JSX Extensions"
  • [ ] make a note clearly stating that all new components must have .jsx extensions
    • [ ] (optional) copy the contents of the More Info section into the wiki page
  • [ ] summarize the relevant information provided by the links in Resources
  • [ ] copy the "Migrated Files" into a section in the wiki
  • [ ] add the links in this ticket's Resources into the wiki's Resources
• [ ] comment the link to the newly published wiki page as a comment on this ticket

Resources/Instructions

Links for page's content

• https://github.com/vitejs/vite/issues/13715#issuecomment-1623393713 quoting Evan You, creator of Vite
• https://stackoverflow.com/a/76726872/6432160

Migrated Files

### Migrated Component Files
- components/Map/index.jsx
- components/common/ChipList/index.jsx
- components/main/Desktop/CouncilSelector/index.jsx
- components/main/Desktop/FilterMenu.jsx
- components/main/Desktop/TypeSelector/index.jsx
- components/main/Desktop/index.jsx

[ryanfchase]

Editing ticket's action items: let's have this documentation in a wiki page, and we can link this wiki page in the README

[funbunch]

New page: https://github.com/hackforla/311-data/wiki/311%E2%80%90Data:-Vite-Migration-%E2%80%90-Converting-JS-to-JSX

[ryanfchase]

Thank you @funbunch, adding Ready for Dev Lead while awaiting review.

[ryanfchase]

Action Items from Review

• [x] Add to Resources in wiki page: what is AST, what is AST transformation?

Performance Optimization By requiring JSX files to use the .jsx extension, Vite can:

Quickly determine which files need JSX transformation. Skip heavy AST parsing for regular .js files, making builds and hot module replacement (HMR) faster.

• [x] either make the above a bullet point list, OR turn it into a compound sentence

Summary

• [x] turn this to TLDR or something to indicate it's a one-liner explanation

[ryanfchase]

Hi Shannan,

Please leave a comment with the following items:

• [x] updated ETA
• [X] progress from the last week (if applicable)
• [ ] availability for communications during the week

[funbunch]

Ryan, Changes made now!

[ryanfchase]

@funbunch this ticket is complete, I will mark this as closed. Thank you!