Introduction to

web apps & React

Lesson 5: Deeper into React

November 2019

Amsul Naeem

twitter.com/amsul_

slides.com/amsul

Managing Composition

Deeper into React

Managing State

Managing Lifecycles

Markup boundaries

Managing Composition

Render tree
Props

function HeaderList() {
  return (
    <ul className='List'>
      <li className='List-Item'>Home</li>
      <li className='List-Item'>Product</li>
      <li className='List-Item'>Pricing</li>
    </ul>
  )
}

function FooterList() {
  return (
    <ul className='List'>
      <li className='List-Item'>Company</li>
      <li className='List-Item'>FAQ</li>
      <li className='List-Item'>Contact</li>
      <li className='List-Item'>Twitter</li>
      <li className='List-Item'>Blog</li>
    </ul>
  )
}

function List({ children }) {
  return <ul className='List'>{children}</ul>
}

function ListItem({ children }) {
  return <li className='List-Item'>{children}</li>
}

function HeaderList() {
  return (
    <List>
      <ListItem>Home</ListItem>
      <ListItem>Product</ListItem>
      <ListItem>Pricing</ListItem>
    </List>
  )
}

function FooterList() {
  return (
    <List>
      <ListItem>Company</ListItem>
      <ListItem>FAQ</ListItem>
      <ListItem>Contact</ListItem>
      <ListItem>Twitter</ListItem>
      <ListItem>Blog</ListItem>
    </List>
  )
}

Logic boundaries

Managing Composition

Hooks
Computation

DEMO

Exercise 1

Managing Composition

Create a feedback form:

Use all forms of composition
Scale items (1 to 5)
Average selected values

Starting point:

github.com/amsul/george-brown-course
Under the lesson-05 directory
Follow the README file

10 minute break

Low-level

Managing State

Overloaded

“Dumb” components

Typically stateless
- AKA “uncontrolled”
Minimal enforcement of API
Very flexible
Very compose-able
Require wiring up

“Smart” components

Typically stateful
- AKA “controlled”
Maximal enforcement of API
Less flexible
Less compose-able
Less wiring required

Updates from parents

Props to use external state
Handlers to always notify parent of internal changes

Updates from parents & internal

Hooks to manage internal state
Props to selectively notify parent on a “need-to-know” basis

DEMO

Exercise 2

Managing State

Create a basic checklist:

3 items
Decide where to put state
Show total remaining count
(Optional) Show item crossed out when checked
- HINT: State shape needs to change
- HINT: Use CSS text-decoration: line-through;

Starting point:

👉 Same file as previous exercise

10 minute break

Beyond Components

Managing Lifecycles

Communication outside React-land

Storing data locally
Fetching data from servers
All other Web APIs

Beyond Components

Managing Lifecycles

When and how often to communicate

On every render
On first render
On selective render

DEMO

Beyond Components

Managing Lifecycles

Managing the communication with useEffect

Setup: initial work
Dependencies: trigger work reset
Cleanup: Undo any mess from work
- Usually only when async bindings/work is involved

DEMO

Exercise 3

Managing Lifecycles

Listen and respond to window resizing:

2 sections in feedback form
Show both for wide screens
Show only checkbox section for narrow screens
- Anything 600px or less is “narrow”
HINT: Use window.addEventListener('resize');

Starting point:

👉 Same file as previous exercise

End of Lesson

Lesson 5: Deeper into React

November 2019

Amsul Naeem

twitter.com/amsul_

slides.com/amsul