[React] Revise and simplify React Part 1 Lesson

[vegetabill]

This is a child issue of Epic #1301

The current React lesson is not as clear and useful as it could be, and relies too much on external materials.

Content to Add

• Inline code snippet examples of a Hello World component
• Inline code snippet of a component with a single prop
• Inline code snippet of a component assigning a className

Content to Replace/Improve

• All components should be class-based, not functional
• Rewrite motivation in your own words. Sum it up as succinctly as possible: what React does and why is it useful. You can also mention it's popular (link to some data on popularity).
• Replace the existing Guided Practice
  • Use the List CodePen and remove state from it and just walk them through rendering a list using map
  • Use ES6 arrow functions etc
  • Use semantic HTML, like <ol>
  • Discuss and link to the need for key property to prevent warnings
• Independent practice should not use create-react-app - that is overkill
  • Use one of the CodePen links in "Lesson Materials" and add some required and optional requirements for them to implement
• Topics to Learn
  • React let's you generate HTML using JavaScript
  • The HTML can change over time, unlike regular HTML
  • No jQuery needed

Content to Remove

• Objective: "Hook up user actions to state changes in the UI."
• Any reference to state, this includes the examples like the CodePen Counter and List
• Wrap Up
• ES6 link in supplemental features
• Remove existing prereqs, replace with HTML and JavaScript 6 - OOP or above
• Common Mistakes No. 1, No.3, No. 4, No. 7

[jamesjose03]

@vegetabill I would like to take up this issue.

[Kundan28]

@vegetabill I would like to take up this issue.

Once your PR is merged, you will be assigned to this.

[prangya244]

I would like to take up this issue.

[Kundan28]

I would like to take up this issue.

You are already assigned with other issue.

[kichloo]

@Kundan28 I have submitted my PR and its in the final phase of the review. Pl assign it to me.

[Kundan28]

@Kundan28 I have submitted my PR and its in the final phase of the review. Pl assign it to me.

Wait for it until it's approved by Alina.

[jamesjose03]

@Kundan28 Pls assign this issue to me as I have already started working on it.

[Kundan28]

@Kundan28 Pls assign this issue to me as I have already started working on it.

But you were not assigned to this issue.

[kichloo]

@Kundan28 Now that my PR has been merged, pl.assign it to me.

[Kundan28]

@Kundan28 Now that my PR has been merged, pl.assign it to me.

Sorry to say but @jamesjose03 would get assigned to this issue as he asked first.
Comment down on other issue.