Exercise - TypeScript + React: components and props

ts-react-components-and-props.md

Exercise - TypeScript + React: Components and props

Initial code

• https://stackblitz.com/edit/vitejs-vite-ppmuqk?file=src%2FApp.tsx

Iteration 1: implement the component Movie

• For this iteration, you will work on Movie.tsx
• This component expects to receive the following props (hint: you can create a type alias):
  • title (string)
  • rating (number)
  • genres (an array of strings)
  • imageUrl (string)
• This component should display the info that we receive from props (ie. the title, the rating etc.)
• Hint: if you get blocked, have a look at this example: https://stackblitz.com/edit/vitejs-vite-ap6thv?file=src%2Fcomponents%2FRecipe.tsx

Iteration 2: render 2 movies

• For this iteration, you will work on App.tsx
• In the "App" component, render 2 movies
• ex: <Movie title="The Godfather" />
• You will need to pass the correct props

Iteration 3:

• modify the component Movie so that imageUrl is optional
• hint: research 'typescript type alias optional properties'

Solution

• https://stackblitz.com/edit/vitejs-vite-om8kvi?file=src%2Fcomponents%2FMovie.tsx