Clone & Deploy Course Pages in React (M16)
Dip your toes into front-end frameworks by recreating the core pages of your course site in React with Vite, deployed on Vercel - page loads, dynamic titles, and common headers/footers, the framework way. The React Modules section of the course has tutorials; AI is encouraged. This is not a trivial task - read carefully (including agenda notes), ask questions early and often, and don't be shy about starting over.
Build
- Install React and scaffold with Vite.
- Recreate the home, introduction, contract, and about pages - looking exactly like your existing course site, menus, headers, footers and all. Shorten the primary navbar to those pages so the site stands alone.
- The finished pages should be indistinguishable from your normal site apart from the shortened menu and the URL.
- Up for a challenge? Recreate your entire site for bonus credit.
The Repo (Read This Twice)
- New repo called itis3135-react, parallel to your .io repo on GitHub.
- A Vite project isn't born a repo - the safe sequence: create the repo first, separately; create the project; then move the repo's hidden .git folder into the project folder so it becomes the repo, and let GitHub Desktop find it again.
- Do not commit or push until it's sitting in the repo and running properly - file-management tangles here are the classic failure.
- Deploy on Vercel.
Linking & Submitting
- Add a link on your secondary menu called React3 (or React Site / React) pointing at the deployed site.
- Submit the URL of your normal course site - we follow the secondary-menu link from there.
- Follow the course standards inasmuch as they can apply to a React project.
- Peer reviews: these instructions as a GO/NO-GO checklist on at least two classmates who don't already have two reviews.