Lesson: Class Based Components

Section: Class Components

198

Lesson Overview

Introduction to class components

Lesson Outline

The following items define the scope of the lesson. The lesson outline is flexible; you can improve, expand, and omit items whilst writing lesson content (make sure the pull request description mentions that).

Describe the structure of a class based component i.e how to define a class based component, the purpose of the constructor method, the purpose of the render method etc
Give a brief overview of how to pass in props and handle state.
Explain the significance of this in the component and example of how to bind this correctly.

Acceptance Criteria

If the requirements here are not met, the work effort is not complete.

[ ] Lesson conforms to the outline above (unless outline has been modified).
[ ] Lesson follows our Layout Style Guide.

Additional Information

Get The Lesson Template

Download the lesson template using the following command (replace lesson_name with the actual lesson name):

curl -o <lesson_name>.md https://raw.githubusercontent.com/TheOdinProject/curriculum/main/templates/lesson-template.md

Adding Interactive Examples

We'll use CodeSandbox for interactive examples. To add these examples, follow the instructions in the react-examples repository and create a Pull Request there. When approved, the example will eventually be uploaded to CodeSandbox. In the meantime, leave a placeholder in the lesson file like so:

// some lesson content

**EXAMPLE GOES HERE**

// some lesson content

TheOdinProject / top-meta

Lesson: Class Based Components #230