⚛️ React Components

? Quick Overview

A component in React is a reusable, self-contained piece of UI. You can think of components as small building blocks that you combine to build a full web page or entire app.

Components make your code modular, reusable, and easier to maintain.

? Small UI block   ♻️ Reusable   ?️ Easy to maintain

? Key Concepts

• Component – a function or class that returns JSX to describe part of the UI.
• Functional Components – simple JavaScript functions that return JSX.
• Class Components – older ES6 class-based components (less common in modern React).
• Composition – components can contain other components to build complex UIs.
• PascalCase Naming – component names start with a capital letter (e.g. Navbar).

Modern React mainly uses functional components + hooks, so we will focus on those.

? Syntax & Theory

A basic React functional component:

• Is a JavaScript function.
• Returns JSX (HTML-like syntax in JavaScript).
• Usually exported and then imported where it is used.

General form:

// Basic functional component pattern
function ComponentName() {
return (
<div>
<h2>Some UI here</h2>
</div>
);
}

export default ComponentName;

? Functional Component Example

Here is a simple functional component called Welcome:

// Functional component that shows a welcome message
function Welcome() {
return (
<div>
<h2>Hello from a Component!</h2>
<p>This is a functional component.</p>
</div>
);
}

export default Welcome;

This component can now be imported and used inside another component like <Welcome />.

?️ Using a Component in App.js

To display the Welcome component on the page, import and render it inside App.js (or another component):

// App component that renders the Welcome component
import Welcome from "./Welcome";

function App() {
return (
<div>
<h1>My React App</h1>
<Welcome />
</div>
);
}

export default App;

Notice that we use the component as a custom tag: <Welcome />.

? Component Naming & Files

• Use PascalCase for component names (e.g. Navbar, UserCard).
• Store each major component in its own file (e.g. Navbar.jsx).
• Export the component using export default and import it where needed.

// Header.jsx - component file
function Header() {
return <h2>Site Header</h2>;
}

export default Header;

// App.js - importing and using Header
import Header from "./Header";

function App() {
return (
<div>
<Header />
<p>Welcome to my site!</p>
</div>
);
}

export default App;

? Components Inside Components (Composition)

A component can contain other components — this is called composition. It lets you build big UIs from small, focused pieces.

// Card.jsx - composing smaller components
function Title() {
return <h3>Card Title</h3>;
}

function Description() {
return <p>This is a simple card description.</p>;
}

function Card() {
return (
<div className="card">
<Title />
<Description />
</div>
);
}

export default Card;

Here, Card is made up of two smaller components: Title and Description.