feat: Add React root to mount React components alongside Angular

[devin-ai-integration]

feat: Add React root to mount React components alongside Angular

Summary

Sets up React 17 infrastructure alongside the existing Angular 9 app as Phase 1 of an incremental migration. Both frameworks render side-by-side: Angular continues in <app-root> while React mounts into a new <div id="react-root">. A simple "Hello from React" component is rendered to verify the setup works.

Changes:

• Added react@17, react-dom@17 and their @types packages
• Added <div id="react-root"></div> to src/index.html next to <app-root>
• Created src/react-main.ts — a React bootstrap that mounts a simple component via ReactDOM.render()
• Imported react-main from src/main.ts as a side-effect import so it's included in the Angular CLI build

Note: Uses .ts with React.createElement() rather than .tsx with JSX, since Angular CLI's default webpack config doesn't resolve .tsx files. This avoids needing a custom webpack builder while still achieving the React mounting goal.

Local Testing

Verified locally that both Angular and React render side-by-side. The Angular HN feed loads normally, and "Hello from React" appears below the footer.

Review & Testing Checklist for Human

• Check for dual lock files: This PR adds package-lock.json (via npm install), but the repo already has yarn.lock. Confirm whether the project should standardize on one package manager to avoid conflicts
• Verify import hoisting: import './react-main' in main.ts is placed after the Angular bootstrap call, but ES module imports are hoisted to the top at compile time. React targets the static #react-root DOM element so this should be safe, but verify the execution order is correct
• Run the app locally (export NODE_OPTIONS=--openssl-legacy-provider && npm start) and confirm both Angular content and "Hello from React" text appear on the page
• Check no Angular regressions: Navigate through feeds, item details, user profiles, and settings to confirm nothing is broken
• Decide on .ts vs .tsx for future migration: If JSX/TSX support is needed going forward, a custom webpack setup (e.g. @angular-builders/custom-webpack) would need to be added in a follow-up

Notes

• React 17 was chosen for compatibility with TypeScript 3.7.5 (React 18 requires TS 4.1+)
• All pre-existing lint errors are unrelated to this change
• ng build compiles successfully with the React additions

Requested by: @matthewguerra-cog
Link to Devin run

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring