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