TypeScript and React sometimes need a helping hand so they can play ball well together. Let‘s check how to use `Ref` and forward our `Ref` onto different components to interact imperatively with the DOM. We will do that while creating a nice and accessible Audio Player 🎸
📽 Chapters
0:34 Ref: what is it? What is it used for? 🧐
1:30 Base styles on index.css 🎨
1:38 Cleanup App.tsx 🧹
1:47 Create player.tsx and controls.tsx components 🏗
2:04 Get started with the Player component 🎧
2:24 Using React.forwardRef() ➡️
3:24 Audio tag features (https://mdn.io/audio-element) 📻
3:54 Typing the Player component 🔒
4:42 Controls component 🕹
6:35 Add types to the Control component 🔒
7:48 Import components to the App.tsx 🎁
8:24 Create a Ref with useRef() hook 🪝
9:19 Add audio source 🎶
10:10 Everything working!! 🚀
11 Comments