Deriving states from props with a reactive declaration

It’s common in Svelte to create new state variables based on the values of props.

For instance, a <DateLabel /> component might accept a date value as a prop and display a formatted date inside a <label> element. To use the <DateLabel> component, you might write the following:

<DateLabel date={new Date(2023,5,5)} />

To display the date as formatted text, you could first define a variable named label, deriving its value from the date prop:

<!-- filename: DateLabel.svelte -->
<script>
  export let date;
  // Deriving the 'label' variable from the 'date' prop
  let label = date.toLocaleDateString();
</script>
<label>{label}</label>

In this code snippet, we defined a variable called label and derived its value from the date prop using the toLocaleDateString() method. This variable is then used inside a <label...