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

Lesson 5: Deeper into React

By amsul

Made with Slides.com

Lesson 5: Deeper into React

  • 61

More from amsul