Day 1 of 7 – Learnings from “Learn React with TypeScript ” by Carl Rippon.

𝐘𝐨𝐮’𝐯𝐞 𝐩𝐫𝐨𝐛𝐚𝐛𝐥𝐲 𝐛𝐮𝐢𝐥𝐭 𝐭𝐨𝐧𝐬 𝐨𝐟 𝐑𝐞𝐚𝐜𝐭 𝐜𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬.
But how many are reusable across different parts of your app?

𝘓𝘦𝘵’𝘴 𝘵𝘢𝘭𝘬 𝘢𝘣𝘰𝘶𝘵 𝘰𝘯𝘦 𝘵𝘩𝘢𝘵 𝘴𝘰𝘶𝘯𝘥𝘴 𝘴𝘪𝘮𝘱𝘭𝘦… 𝘣𝘶𝘵 𝘪𝘴𝘯’𝘵: 𝘵𝘩𝘦
<𝐀𝐥𝐞𝐫𝐭 /> 𝐜𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭 👇

𝐀𝐧 𝐚𝐥𝐞𝐫𝐭 𝐬𝐡𝐨𝐮𝐥𝐝 𝐛𝐞 𝐞𝐚𝐬𝐲, 𝐫𝐢𝐠𝐡𝐭?
Just show a message, maybe a color, maybe a close button.
But then someone asks:

𝘊𝘢𝘯 𝘪𝘵 𝘣𝘦 𝘥𝘪𝘴𝘮𝘪𝘴𝘴𝘪𝘣𝘭𝘦?

𝘊𝘢𝘯 𝘸𝘦 𝘤𝘶𝘴𝘵𝘰𝘮𝘪𝘻𝘦 𝘵𝘩𝘦 𝘩𝘦𝘢𝘥𝘪𝘯𝘨?

𝘊𝘢𝘯 𝘸𝘦 𝘬𝘯𝘰𝘸 𝘸𝘩𝘦𝘯 𝘪𝘵 𝘨𝘦𝘵𝘴 𝘤𝘭𝘰𝘴𝘦𝘥?

Now you’re juggling logic, props, and state

‪Priya Sharma‬
‪@priya1.bsky.social‬
· 12d
Here’s a solid pattern that makes your components actually reusable (not just copy-pasteable):

🔹𝐏𝐫𝐨𝐩𝐬 – control content & behavior
🏁𝐒𝐭𝐚𝐭𝐞 – manage interaction
📣𝐄𝐯𝐞𝐧𝐭𝐬 – notify parent components

Let’s break it down ↓

Start with a clear contract using TypeScript:

type AlertProps = {
heading: string;
type: 'info' | 'error';
closable?: boolean;
onClose?: () => void;
};

Make it interactive:

const [visible, setVisible] = useState(true);

if (!visible) return null;

Let it talk to the parent too:

const handleClose = () => {
setVisible(false);
if (onClose) onClose();
};

Reusable components aren’t just about splitting up the UI.
They’re about creating building blocks that can scale with your app.

React + TypeScript gives you all the tools, you just need the right pattern - https://www.amazon.com/Learn-React-TypeScript-real-world-production-ready/dp/1836643179/****