𝐓𝐡𝐚𝐭’𝐬 𝐲𝐨𝐮𝐫 𝐟𝐢𝐫𝐬𝐭 𝐫𝐞𝐚𝐥 𝐜𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭: 𝐑𝐞𝐮𝐬𝐚𝐛𝐥𝐞, 𝐭𝐲𝐩𝐞𝐝, 𝐚𝐧𝐝 𝐢𝐧𝐭𝐞𝐫𝐚𝐜𝐭𝐢𝐯𝐞
Get the full book here - www.amazon.com/Learn-React-...

4️⃣ 𝐌𝐚𝐤𝐞 𝐢𝐭 𝐢𝐧𝐭𝐞𝐫𝐚𝐜𝐭𝐢𝐯𝐞 𝐰𝐢𝐭𝐡 𝐬𝐭𝐚𝐭𝐞
Add a close button using useState:

const [visible, setVisible] = useState(true);
if (!visible) return null;
...
{closable && <button onClick={() => setVisible(false)}>❌</button>}

Now it's dismissible!

</span>
<span>{heading}</span>
</div>
<div>{children}</div>
</div>
);
}

Use it like this:
<Alert type="information" heading="Success">Everything is really good!</Alert>
Now your component adapts to different contexts

3️⃣ 𝐌𝐚𝐤𝐞 𝐢𝐭 𝐜𝐨𝐧𝐟𝐢𝐠𝐮𝐫𝐚𝐛𝐥𝐞 𝐰𝐢𝐭𝐡 𝐩𝐫𝐨𝐩𝐬

Pass type, heading, and children:
xport function Alert({ type = 'information', heading, children }) {
return (
<div>
<div>
<span role="img" aria-label={type === 'warning' ? 'Warning' : 'Information'}>
{type === 'warning' ? '⚠' : 'ℹ'}

2️⃣ 𝐔𝐬𝐞 𝐢𝐭 𝐢𝐧 𝐀𝐩𝐩.𝐣𝐬𝐱

Import and render inside your App component:
import { Alert } from './Alert';

function App() {
return <Alert />;
}

You’ve got a working component. But let’s make it smarter.

1️⃣ 𝐂𝐫𝐞𝐚𝐭𝐞 𝐭𝐡𝐞 𝐜𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭 𝐟𝐢𝐥𝐞

export function Alert() {
return (
<div>
<div>
<span role="img" aria-label="Warning">⚠</span>
<span>Oh no!</span>
</div>
<div>Something went wrong</div>
</div>
);
}

Clean, clear, and accessible!

Typed props are the foundation of scalable React components. Once you get this right, adding state, effects, and context becomes much easier - www.amazon.com/Learn-React-...

🛠️𝐏𝐫𝐨 𝐓𝐢𝐩: You don’t need to use React.FC<Props>, you can type the props inline too:

const Button = ({ label }: { label: string }) => <button>{label}</button>;

But for larger components, a named type makes things more readable and reusable.

🆚 𝐭𝐲𝐩𝐞 𝐯𝐬 𝐢𝐧𝐭𝐞𝐫𝐟𝐚𝐜𝐞?

Use type for simple props

Use the interface if you plan to extend it later

Example:

interface BaseProps {
id: string;
}

interface CardProps extends BaseProps {
title: string;
}

✅ 𝐖𝐡𝐲 𝐭𝐡𝐢𝐬 𝐦𝐚𝐭𝐭𝐞𝐫𝐬:

• Type safety for function arguments

• Cleaner code with full IDE autocomplete

• No more guessing what props a component expects

• Fewer runtime bugs

Let’s say you’re building a simple Button component.
Here’s how you type props correctly in TypeScript:

type ButtonProps = {
label: string;
onClick: () => void;
};

const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
<button onClick={onClick}>{label}</button>
);

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 🧠

Let it talk to the parent too:

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

Make it interactive:

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

if (!visible) return null;

Start with a clear contract using TypeScript:

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

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 ↓

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

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

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

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

Now you’re juggling logic, props, and state