React

11/9/22

• React
  • Declarative, making it easy to create interactive UIs
    • “States”
• Component: Class or Function
  • Each part of UI built out separately
  • Components can hold multiple components

Components, Props, and States

• Components: normal JS functions that return HTML

  • State: May keep its own data, called its state
  • Props: Components can pass data to other components. Arguments passed into React components are called props
    • Any information passed to a component

  

  ---

Fundamental Principles of Interaction

11/16/22

• How we interact with everyday things
• Doors
  • Block access
  • Enable access
• If you need to label something, it’s a “design smell”
  • You could use better signifiers

<aside> 💡 How do tools advertise their use cases?

</aside>

Affordances

<aside> 💡 Use cases

</aside>

• Usage scenario
• Napkins have many affordances
  • Wiping hands
  • Blowing nose
  • Taking notes
  • Bookmarking a page

Glass

• Glass affords seeing through and light
• Anti-affordance—the prevention of interaction
• Affordances and anti-affordances have to be discoverable