Functional Components & Props

Components are the building blocks of any React application. They let you split the UI into independent, reusable pieces, and think about each piece in isolation.

What is a Functional Component?

The simplest way to define a component is to write a JavaScript function. It accepts a single "props" object argument and returns a React element.

JavaScript

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Understanding Props

Props (short for properties) are used to pass data from a parent component to a child component. Props are read-only, meaning a component must never modify its own props.

JavaScript

function App() {
  return (
    <div>
      <Welcome name="Ashish" />
      <Welcome name="Coder" />
    </div>
  );
}

Destructuring Props

A common pattern in React is to use ES6 destructuring to extract properties from the props object directly in the function signature.

JavaScript

function UserCard({ name, role }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Role: {role}</p>
    </div>
  );
}

Note: Component names must always start with a capital letter. React treats components starting with lowercase letters as DOM tags (like <div /> or <span />).