[Epic] Improve React curriculum

[vegetabill]

React had by far the biggest gaps in the curriculum. For example, Database (a much simpler concept) had over 5 lessons devoted to it.

Example feedback for cohort:

I don't feel I learn much about React this.week, and the react assignments and topic outline is not helping me to learn much. I suggest Techtonica to have more small react activities or learning materials on the roadmap.

Areas of Improvement

• Replace all jQuery with React
• Move React ahead to reinforce learning of HTML/CSS This was cut from scope in H1-2021. It still might be a good idea but shelved for now
• Replace Eventonica with tmdb We instead improved existing Eventonica - see epic [Epic] Eventonica v2021 #1296 ✅
• Split and expand React lessons
  • React Intro
  • React with Props Only - [React] Revise and simplify React Part 1 Lesson #1309 ✅
  • React with State Inside One Component - [React] Add lesson outline: React Part 2  #1308 ✅
  • React with State Shared Across Parent & Child - React Part 3 - Components & Hierarchies #1336 ✅
  • React Full Application - Putting it all together with a full multi-component app (still all in-memory) - React Part 4 - Apps #1337 ✅
  • React Application Architecture Best Practices - Unidirectional Data Flow & Integrating with Async APIs - New lesson: React Part 6 - Connecting an API #1338
• Curriculum focuses on mastery of class-based components rather than only functional or hybrid lessons. We've pretty much stuck to this ✅
  • Why? Easier to reason about, builds on OOP that curriculum covers in JS
  • Lots of production code still uses it
  • Move hooks/functional component to an elective lesson ✅ (moved to wk 13 - Alina)

[alodahl]

FWIW I disagree about hooks being an elective... I think class components are something they should be able to recognize, but hooks are so much easier, and companies are moving to using them now. I bet they could learn it immediately after class/constructor stuff so they can be compared.

[vegetabill]

hooks are so much easier

@alodahl actually I found the opposite was true. Was this your own experience or from previous cohorts? I'm mostly concerned about interference where you try to learn two ways to do the same thing without fully understanding either of them. Participants also tried to mix and match the styles in one codebase which was a disaster.

Hooks can certainly be required, but it should be moved much later after mastery of building non-trivial apps. Because we teach OOP and class-based components are simpler to understand in my experience, which is why I think they should come first.

[alodahl]

My own experience. But not doing constructors/state and hooks back to back makes sense to me. It can be done near the end, or could even be an elective, but I think they are becoming the standard.

The reason I think its easier is because you don't have write a constructor, bind anything, remember to name it "this.state" or "this.anything", and it makes functional component coding much shorter and cleaner. My hunch is that it will save them a bunch of time and troubleshooting while they create their portfolio project. But if you think it will be confusing rather than helpful, I understand.

[vegetabill]

Just to add more context to the "teach functional or class", while functional is definitely the norm for new code, in their internships they're still more likely to see class-based code. Just started a job in late 2020 with a fairly cutting edge tech stack and class based components are still all over the place in non-new UI code.

To try to keep the lessons consistent and easier to maintain, I believe we effectively settled on:

• Use class-based components in all examples except in lessons focused on learning about functional components
• Functional lesson will be a requirement, not an elective, but will come later after they've had experience with class-based components

Does that sound good? As time goes by the class-based components become a total relic, we can rethink the above.

[alodahl]

I moved React Hooks to week 13 (formerly career week) to avoid confusion.

[alodahl]

Are you sure you want to teach JS classes after React classes? That seems backwards to me.

[vegetabill]

@alodahl agreed that would be backward. If you're referencing:

Focus exclusively on class-based components

That's just meant to be a decision for the entire curriculum, not a lesson. If you remember from gssoc, I was strict on only allowing class-based component example code. I think it's pretty consistent now. Maybe in a few years we can switch to teaching functional exclusively 😁

[alodahl]

Sticking with React class-based components is fine. I guess I want to make sure that things are taught in this order:

1. JS functional programming & JS classes
2. React class components, having the most emphasis
3. React Hooks and functional components, much later so no one gets mixed up

[vegetabill]

@alodahl that is the current state, AFAICT, except that hooks is an elective and I don't think is in the schedule.

So we don't forget it for H2, I added it to #1543

[vegetabill]

Everything in this epic is either merged or closed