An Introduction to React Components: Core Elements of UI Design

When you start learning React, the very first concept you must understand is Components. They are the backbone of every React application. Whether you are building a small UI widget or an entire large-scale application, everything in React is made up of components.

In this blog, we will explore what components are, why they are important, their types, and how you can create them with simple examples.

---

💡 What is a Component in React?

A Component in React is a small, reusable piece of UI.

Think of a React component like a Lego block:
You can use one block to build a section, and multiple blocks together to build a complete layout.

A component can contain:

• HTML (JSX)

• CSS (inline or external)

• JavaScript logic

• Even other components inside it

Simple Definition:

A React component is a reusable piece of UI that returns JSX.

---

✨ Why Components Are Important

React uses components because they make development:

✔ Reusable

Write once → use anywhere.

✔ Easy to maintain

Small, isolated pieces of code are simpler to debug.

✔ Readable

Your UI is broken into small understandable parts.

✔ Scalable

Large applications become easier to manage.

---

🧩 Types of Components in React

React has two main types of components:

1. Functional Components (Recommended 🚀)

These are simple JavaScript functions that return JSX.

Functional components are faster, easier, and used in modern React.

Example:

function Welcome() {
  return <h1>Hello from Functional Component!</h1>;
}

export default Welcome;

2. Class Components (Not Recommended Now ❌)

Older style components using ES6 classes.
Functional components + Hooks replaced them.

(Only for older projects – avoid in new apps)

---

🛠 How to Create a Component

Let’s create a simple functional component.

Step 1: Create a file — Header.jsx

import React from "react";

function Header() {
  return (
    <header>
      <h1>My React Website</h1>
    </header>
  );
}

export default Header;

Step 2: Use it inside App.jsx

import Header from "./Header";

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

export default App;

That’s it!
You created your first reusable component.

---

🔄 Using Components Multiple Times

One component can be used again and again:

<Header />
<Header />
<Header />

This is the biggest power of React.

---

📦 Components with Props

Props allow you to pass data to components.

Example:

function User(props) {
  return <h2>Welcome, {props.name}</h2>;
}

function App() {
  return <User name="Sandip" />;
}

Output:
Welcome, Sandip

---

🎯 Conclusion

React components make your UI clean, reusable, and easy to manage.
They are the core concept you must master before moving to state, props, hooks, or routing.

In summary:

• Components are the building blocks of React.

• Two types: Functional (recommended) and Class.

• Every component returns JSX.

• Components help create structured, scalable apps.

Originally published on Medium.