Week 3: Components and Props
Slides

CPRG-306 Week 3

Components and Props

Review

  • objects
  • props

Objects

  • Objects are a way to store data
  • Objects are made up of key-value pairs
  • Keys are strings
  • Values can be any data type

Object Example

let person = {
  name: "Diane",
  age: 25,
  isStudent: true,
  address: {
    street: "123 Main St",
    city: "Calgary",
    province: "AB",
  },
};

Object Properties

  • Access properties using dot notation
console.log(person.name); // Diane
console.log(person.address.city); // Calgary
person.isStudent = false; // change value

React Props

  • Props are a way to pass data to components
  • Props are passed as attributes to components
  • Props are accessed using props object

Props Example

function Page() {
  return (
    <main>
      <Person name="Diane" age="25" />
      <Person name="Zach" age="21" />
    </main>
  );
}
 
function Person({ name, age }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age} years old</p>
    </div>
  );
}

Demo

  • Use objects to store data
  • Implement props
  • Reduce repetition by adding more components
  • Add some styling with Tailwind CSS
Week 3 AssignmentInteractivity