❮ Previous Next ❯

Functional Components

  • This lesson introduces functional components in React and explains how they are used to build simple and reusable UI elements.

  • Functional components are JavaScript functions that return JSX.

    This is the most commonly used component type in modern React.

    Basic Example:

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

  • Creating Functional Components

    Steps to create a functional component:

    1. Create a JavaScript function

    2. Return JSX

    3. Export the component

    4. Import and use it

    Example:

function Button() {
  return <button>Click Me</button>;
}

export default Button;

  • Component Naming Rules

    React components must follow certain naming rules.

    Rules:

    • Component names must start with capital letters

    • Use PascalCase

    • One component per file (recommended)

    Correct:

function LoginForm() {}

  • Incorrect:

function loginform() {}

  • Capital letters help React identify components.

    Component Reusability

    One of the biggest advantages of React components is reusability.

    Example:

<Button />
<Button />
<Button />

  • Same component used multiple times.

    Benefits:

    • Saves development time

    • Consistent UI

    Easy updates
❮ Previous Next ❯