louisrli

Learning Objectives

The objective of this discussion is to expose you to some of the popular frameworks that are built on top of JavaScript or React. The goal is not for you to know how to use these, but simply understand what their intended usage is in case you want to use it at some point in time.

For each of these, I want you to answer the following questions for the class:

1. Why does this exist? Why did people spend hundreds of hours of their time to build this?
2. For what types of projects would you use this for?

Questions

1. Gatsby
2. Storybook

louisrli

filetype on
filetype indent on
filetype plugin on
syntax on

set wildmenu
set splitright

let g:goyo_width=110
" Performance reasons, maybe

louisrli

React Props and State

Learning Goal

At the end of this activity, you should understand what props and state are and know how to use them. How? You'll teach each other!

You'll be in pairs.

• Person 1: Responsible for props
• Person 2: Responsible for state

louisrli

# React Props and State

## Learning Goal
At the end of this activity, you should understand what props and state are and know how to use them. How? You'll teach each other!

You'll be in pairs.

* **Person 1:** Responsible for props
* **Person 2:** Responsible for state

louisrli

# React Props and State

## Learning Goal
At the end of this activity, you should understand what props and state are and know how to use them. How? You'll teach each other!

You'll be in pairs.

* **Person 1:** Responsible for props
* **Person 2:** Responsible for state

louisrli

# React Props and State

## Learning Goal
At the end of this activity, you should understand what props and state are and know how to use them. How? You'll teach each other!

You'll be in pairs.

* **Person 1:** Responsible for props
* **Person 2:** Responsible for state

louisrli

# React Props and State

## Learning Goal
At the end of this activity, you should understand what props and state are and know how to use them. How? You'll teach each other!

You'll be in pairs.

* **Person 1:** Responsible for props
* **Person 2:** Responsible for state

louisrli

Goal

The goal of this activity is to create a reusable component in React.

Requirements

Write a React class or function component (your choice) that represents a project that you completed.

It should take the following props:

• Project name
• Project description

louisrli

Predicting Constructor Effects

Questions

class Rectangle {
  constructor(sideA, sideB) {
    this.sideA = sideA;
    this.sideB = sideB;
    this.area = sideA * sideB;

louisrli

Quiz: Reviewing JavaScript Object Orientation

???

Reviewing JavaScript Object Orientation

?:

class Tree {