Welcome to the core of modern React. If you're learning React today, you're learning **Functional Components**. These are the fundamental building blocks, the "Lego bricks" you'll use to construct every user interface. For years, React developers used class-based components, which were more verbose and complex. The introduction of React Hooks in 2018 revolutionized the ecosystem, making functional components the undisputed standard for their simplicity, reusability, and power.

At its heart, a functional component is **just a JavaScript function**. It takes in some data (called `props`) and returns a description of the UI (using JSX). That's it. This simplicity is its greatest strength.

Anatomy of a Functional Component

Let's break down the syntax for the most common way to write a component: an arrow function assigned to a constant.

// 1. Import React (often optional in modern setups)
import React from 'react';

// 2. Define the component (MUST be capitalized)
const WelcomeMessage = (props) => {
  
  // 3. Return the UI (JSX)
  return <h1>Hello, {props.name}!</h1>;
};

// 4. Export the component to use it elsewhere
export default WelcomeMessage;

The 3 Golden Rules of Components

• 1. Capitalization is King: A component name **must** start with a capital letter (e.g., `MyComponent`, not `myComponent`). This is how React distinguishes your custom components from regular HTML tags (like `div` or `p`).
• 2. Return a Single Root Element: Your component's `return` statement must output a *single* JSX element. You can't return two `div`s side-by-side. To fix this, wrap them in a parent `div` or, even better, a **Fragment** (`...`).
• 3. Components Must Be "Pure": A component should always return the same JSX given the same props. It should not modify its props or rely on external variables. Think of it as a pure mathematical function.

Deep Dive: Props and Destructuring

**Props** (short for properties) are how you pass data from a parent component to a child, making them dynamic. They are passed as attributes in JSX and received as the *first argument* in your function, bundled into a single object.

While you can access them with `props.name` and `props.age`, a much cleaner and more common pattern is **destructuring**.

const User = (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.age} years old</p>
    </div>
  );
};

const User = ({ name, age }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>{age} years old</p>
    </div>
  );
};

The Power of Composition: `props.children`

React's most powerful feature is **composition**. You build complex UIs by nesting components. But what if you want to create a "generic" wrapper component, like a `Card` or `Modal`, and pass *other* components *inside* it?

This is where the special `props.children` comes in. It contains whatever you pass between the opening and closing tags of your component.

// 1. Create a generic Card component
const Card = ({ children }) => {
  return (
    <div className="card-container">
      {children}
    </div>
  );
};

// 2. Use it to wrap other content
const App = () => {
  return (
    <Card>
      {/* This h1 and p are passed as props.children */}
      <h1>User Profile</h1>
      <p>This is the content inside the card.</p>
    </Card>
  );
};

Key Takeaway: Mastering functional components is mastering React. Focus on these three ideas: 1. A component is a **capitalized function** that returns JSX. 2. Use **props** to pass data *down*. 3. Build complex UIs by **composing** simple components together.