create legacy class lesson; create prework; update index links

[CassandraGoose]

Description of changes made

• closes #695
• created a lesson that can prepare students to be able to refactor class based components into functional components and potentially build their own class components.
• updated this repo for use in the lesson. It needed: react, react-dom, react-scripts updating and some various housekeeping items.

Motivation for any changes

• 695 told me to

• I updated the repo listed above because it wouldn't run with the most recent stable Node version.

Questions that you have for a reviewer

There's a lot of background information that's necessary to understand class components. Because of this, I set up the lesson as follows:

• Pre-work to learn about class fundamentals by tying in their existing knowledge of object methods and this, based on what I've seen in the calendars for M1 and M2. This is a crash course based on the original JS classes M1 lesson, but I made it so it is less hand-holdy for the M3 students. It's just a taster, unless they dig in on their own more.
• Run students through overview of class components and have them work to refactor class components into functional components, since this is most likely the way they will interact with class components. The actual lesson is a flipped version of the old "Intro to Hooks".

❓ What are your thoughts on this layout? Is it too much? What should be cut? Do we need the prework or should it be rolled into the full lesson or a separate JS classes lesson? Is the lesson too verbose? ❓

🗨️ PS - I used a lot of drop downs for the JS Class Crash Course, since it would be done individually as prework. I encourage looking at it in the browser instead of just reading the markdown so that it feels less stressful.

[netlify[bot]]

✅ Deploy Preview for sage-cupcake-e1a0c3 ready!

Name	Link
🔨 Latest commit	e8cf563e0e3bc4b0c9f0381a4ec412d3de056cc4
🔍 Latest deploy log	https://app.netlify.com/sites/sage-cupcake-e1a0c3/deploys/64836128f03070000812a1eb
😎 Deploy Preview	https://deploy-preview-702--sage-cupcake-e1a0c3.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[CassandraGoose]

I think these are really great! The prework is hefty, but I think it's definitely something we should try to have the students do on their own. If it's notably impairing our ability to teach the refactoring lesson, then maybe we consider making it a taught lesson instead of async prework.

Thank you for the review! I updated the typos you found and made a change based on your notes. 🌞

[CassandraGoose]

This looks great! I'm a little worried about the amount of content between the prework and the lesson but it all feels needed except for the deeper dive into inheritance (even though its not a deep dive really). My vote would be to cut that from both the prework and the lesson.

I'm game for this! The lessons have been updated. I only included it since it's how React classes work and I figured not knowing about it would be too much magic - but they can just study up on that if they ever find themselves working in a legacy codebase. If they've been leaving the program without knowing this recently, then they definitely don't need to know it moving forward.

I think this is the exact right thing to cut, so I'm glad you brought it up! A little magic never hurt anybody 😄

[CassandraGoose]

Going to merge without approval. I feel that having something merged and ready to go for next inning is better than nothing, since changes can be made whenever.