Functional Components

Functional Components

Components are the core building blocks of React applications. In modern React, components are written as plain JavaScript functions that accept inputs (props) and return JSX elements.

Defining Functional Components

A functional component is a JavaScript function that starts with a Capital Letter and returns JSX.

// Standard function declaration
function Header() {
  return (
    <header>
      <h1>Tech Blog</h1>
    </header>
  );
}

// Arrow function syntax
const Footer = () => {
  return (
    <footer>
      <p>© 2026 Tech Blog Inc.</p>
    </footer>
  );
};

Component Naming Requirement

React components MUST start with a capital letter (PascalCase).

• Lowercase tags like <button> or <div> are treated by React as standard HTML DOM tags.
• Capitalized tags like <Button> or <Header> tell React to instantiate custom components.

// ❌ WRONG: Lowercase component names will be treated as unknown HTML tags
function profileCard() {
  return <div>Profile</div>;
}
// Usage <profileCard /> renders <profilecard></profilecard> in HTML

// ✅ CORRECT: Capitalized component name (PascalCase)
function ProfileCard() {
  return <div>Profile</div>;
}
// Usage <ProfileCard /> renders component correctly

Nesting & Reusing Components

Components can be nested within other components to build complex user interfaces.

function MainLayout() {
  return (
    <div className="layout">
      <Header />
      <main>
        <ProfileCard />
      </main>
      <Footer />
    </div>
  );
}

Summary & TL;DR

• Functional components are JavaScript functions that return JSX markup.
• Component names MUST start with a capital letter (PascalCase).
• Nest smaller components inside larger parent components to create modular UIs.