LESSONPLAN.md

Lesson Plan Week 3

Agenda

The purpose of this class is to teach the student about:

• What component lifecycle is
• The purpose and use of useEffect()
• Making an API call both inside and outside useEffect()
• Some third party React tools (UI toolkits and utility libraries)

Core Concepts

1. Component lifecycle

Explanation

• In React any component renders in stages to the DOM: we call this the component lifecycle
• The purpose of the different lifecycle stages is to solve rendering issues that sometimes can't easily be controlled via state and props
• 4 groups of lifecycle methods: mounting, updating, unmounting and errors

Example

Show the following image to illustrate the place and purpose of each lifecycle method. Then show how to access the methods in a class-based component

Excercise

Essence

2. Third party React tools

Explanation

• 2 broad categories: UI toolkits and utility libraries
• UI toolkits help us structure our user interfaces
• Utility libraries help us solve functional problems that come up during development

Example

Show example of a UI toolkit, like Semantic UI. You can illustrate how to use it by building a Menu

Show example of a utility library, for example Redux

Excercise

Essence