Building Your First React Component – The Right Way

When you begin learning React, the first thing you hear about is components. But what exactly makes components so effective for building modern UIs? And how do you build one that’s flexible, reusable, and maintainable?

Let’s explore React fundamentals by creating a simple but powerful component: An Alert Box.

Why React?
React is popular for good reason, it simplifies UI development by encouraging developers to break down interfaces into independent, reusable pieces. These pieces are called components.

Getting Set Up
To start a React project today, you don’t need much. With tools like Vite, you can scaffold and launch your app in minutes:

Choose React and either JavaScript or TypeScript (we’ll be using TypeScript here).

Creating an Alert Component

Let’s create a component that displays an alert with a heading, a message, and a close button:

You can swap "warning" with "info", change the heading, or omit closable if you don’t want the close button.

Bonus: Developer Tools Make Debugging Easy
Install the React Developer Tools browser extension to inspect props, hooks, and rendering performance directly in your browser. It’s a game-changer for debugging.

Final Thoughts

The power of React lies in its component model. Even a basic alert box teaches you how to:

• Manage internal state
• Handle user events
• Build accessible UI
• Create flexible, reusable code

This example is taken from Learn React with TypeScript, which goes on to cover TypeScript types, server components, data fetching, and more.