Black & White Series

React Components

Thinking in React

---

React

• https://react.dev/

---

React Component

Available at: frameworks/react/4-component

---

HTML Specification

Component Step 1

<div style=>
  <img src={medication1} width="50px"/>
  <h1>Velocirest</h1>
  <p>Description of dosage and frequency of use of Velocirest.</p>
</div>

---

Component Predefined

export default function MedicationItem() {
  return <div style=>
           <img src={medication1} width="50px"/>
           <h1>Velocirest</h1>
           <p>Description of dosage and frequency of use of Velocirest.</p>
         </div>
}

---

MedicationItem Design

---

MedicationItem React

---

Component Hierarchy

Available at: frameworks/react/5-hierarchy

---

MedicationItem with Properties

---

Component with Properties

export default function MedicationItem({ name, description, image }) {
  return <div style=>
           <img src={image} width="50px"/>
           <h1>{name}</h1>
           <p>{description}</p>
         </div>
}

---

MedicationList Design

---

Aggregating Components

export default function MedicationList() {
  return <>
           <MedicationItem name="Velocirest"
                           description="Description of dosage and frequency of use of Velocirest."
                           image="/src/assets/medication1.svg" />
           <MedicationItem name="Tricerabust"
                           description="Description of dosage and frequency of use of Tricerabust."
                           image="/src/assets/medication2.svg" />
           <MedicationItem name="Tyrannotonic"
                           description="Description of dosage and frequency of use of Tyrannotonic."
                           image="/src/assets/medication3.svg" />
         </>
}

---

Tarefa

• Baseado no design desenvolvido na tarefa do Figma, crie um componente que crie um componente com que represente a ficha completa do paciente com os medicamentos que ele toma:

---

Tarefa

---

André Santanchè

www.ic.unicamp.br/~santanch/

Web2Learn

santanche.github.io/web2learn/