React Part 3 - Components & Hierarchies

[vegetabill]

Task: The previous contributor was unable to complete this issue, but they got quite far. Please:

• Make edits to this outline: https://github.com/Techtonica/curriculum/blob/master/react-js/react-part-3-component-hierarchies.md
• Make any changes needed so the Acceptance Criteria below is fulfilled in the outline.
• Address all the unresolved comments found here: Created react-components-and-hierarchies.md #1347

For FAQs on how to contribute, see: https://github.com/Techtonica/curriculum/blob/main/CONTRIBUTING.md

---

Original issue description:

Child task of Epic #1301

The previous two lessons focused on props and state inside of a single component. Now we need to expand on that foundation to cover how props and state are passed along component hierarchies and when it makes sense to split some JSX into a new component.

Use our Lesson Template v2

Topics to Cover

• Different between Components and built-in JSX tags like <button>
• How to refactor code where all JSX is in one component into separate components
  • Reasons to do so, duplication. The code exercise could be turning a map function that creates a snippet JSX to one that creates instances of another component
  • Keeping components small and single-purpose
• props.children
• Using 3p components like reactstrap
• Passing callback functions to have children allow the parent to decide what an onClick does
• Passing along state from a parent into a child component

Example Code

• Example code should run in a CodePen or similar. It should not need Babel/Webpack, etc
• Class components only (no Functional)

This lesson should go in the ./react-js/react-part-3-hierarchies.md and a link added to the main README.md along with the other React lessons.

[annu12340]

I would like to work on this issue

[annu12340]

Could you please elaborate on what is meant by " Using 3p components like reactstrap " and about the refactoring of the code. I didn't get it

[Kundan28]

Could you please elaborate on what is meant by " Using 3p components like reactstrap " and about the refactoring of the code. I didn't get it

@vegetabill

[ashishnagpal2498]

I think what he mean to say is using 3rd party Components like Reactstrap which include inbuilt CSS in their component.

[Kundan28]

I think what he mean to say is using 3rd party Components like Reactstrap which include inbuilt CSS in their component.

Yeah, I to think so...

[Kundan28]

@annu12340 Do you want to work on this issue ?

[annu12340]

Yes

[Kundan28]

@annu12340 Please go through https://bit.ly/2wQxqLy and after you have filled the forms mentioned inside you could start working on this issue.

[annu12340]

@annu12340 Please go through https://bit.ly/2wQxqLy and after you have filled the forms mentioned inside you could start working on this issue.

I have already done that part :)

[Kundan28]

@annu12340 Please go through https://bit.ly/2wQxqLy and after you have filled the forms mentioned inside you could start working on this issue.

I have already done that part :)

Okay, then you could start working on the issue.