Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

create legacy class lesson; create prework; update index links #702

Merged

Conversation

CassandraGoose
Copy link
Contributor

@CassandraGoose CassandraGoose commented Jun 5, 2023

Description of changes made

  • closes Create Class Based Components Legacy Lesson #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

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
Copy link

netlify bot commented Jun 5, 2023

Deploy Preview for sage-cupcake-e1a0c3 ready!

Name Link
🔨 Latest commit e8cf563
🔍 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...

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 CassandraGoose marked this pull request as ready for review June 5, 2023 19:41
Copy link
Contributor

@letakeane letakeane left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Overall, this is super great!

lessons/module-3/react-class-components-prework.md Outdated Show resolved Hide resolved
lessons/module-3/react-class-components-prework.md Outdated Show resolved Hide resolved
lessons/module-3/react-class-components-prework.md Outdated Show resolved Hide resolved
lessons/module-3/react-class-components.md Outdated Show resolved Hide resolved
@CassandraGoose CassandraGoose linked an issue Jun 5, 2023 that may be closed by this pull request
@CassandraGoose
Copy link
Contributor Author

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. 🌞

Copy link
Contributor

@hfaerber hfaerber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

lessons/module-3/react-class-components-prework.md Outdated Show resolved Hide resolved
## Vocabulary
- `this` - a keyword with a value that changes depending on the context in which it's used
- `class` - a special function which acts as as a template for creating objects
- `inheritance` - a mechanism which derives a class from another class; one class can inherit properties and functionality from a parent class
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I vote to cut inheritance. My preference would be to remove line 29.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think its find to use 'inherits' in references through because it just an english word that describes what is happening without going too deep.

Copy link
Contributor Author

@CassandraGoose CassandraGoose Jun 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sweet! I left the little sentence in the lesson that was like "the syntax uses the extends keyword to inherit properties and methods from a parent class" based on this sentiment. This way extends isn't a complete mystery but we don't dig into it. Hope that matches up.

lessons/module-3/react-class-components.md Outdated Show resolved Hide resolved
lessons/module-3/react-class-components-prework.md Outdated Show resolved Hide resolved
@CassandraGoose
Copy link
Contributor Author

CassandraGoose commented Jun 9, 2023

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
Copy link
Contributor Author

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.

@CassandraGoose CassandraGoose merged commit 717ae09 into development Jun 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create Class Based Components Legacy Lesson
3 participants