Functional Components in React: Syntax & Examples

What is a Functional Component?

A functional component is simply a JavaScript function that returns JSX. This is the modern and recommended way to write React components.

You may see class components in older code:

jsx

// Legacy style — you will see this in older projects
class Welcome extends React.Component {
  render() {
    return <h1>Welcome</h1>;
  }
}

Functional components do everything class components do, with less code. This tutorial uses functional components throughout.

Syntax

Two equivalent forms:

jsx

// Function declaration
function CourseCard() {
  return <div>React Fundamentals</div>;
}

// Arrow function
const CourseCard = () => {
  return <div>React Fundamentals</div>;
};

Both work. Pick one style and stay consistent. This tutorial uses function declarations because the name appears clearly at the start of the line, which makes debugging easier.

Example: A Component Tree

src/components/ProgressBar.jsx

jsx

function ProgressBar() {
  const progress = 65;

  return (
    <div className="progress-track">
      <div
        className="progress-fill"
        style={{ width: `${progress}%` }}
      ></div>
      <span>{progress}% complete</span>
    </div>
  );
}

export default ProgressBar;

src/components/CourseCard.jsx

jsx

import ProgressBar from "./ProgressBar";

function CourseCard() {
  return (
    <div className="course-card">
      <h3>React Fundamentals</h3>
      <p>12 lessons · Beginner</p>
      <ProgressBar />
    </div>
  );
}

export default CourseCard;

How It Works

• CourseCard imports and uses ProgressBar. A component using another component is called nesting or composition.
• style={{ width: ${progress}% }} builds the width string from the progress variable using a template literal.
• Each component handles one job. ProgressBar knows nothing about courses; it only draws a bar.

Output

A card showing the course title, lesson count, and a bar filled to 65%.

Common Mistakes Beginners Make

• Lowercase component names. <courseCard /> is treated as an unknown HTML tag and renders nothing.
• Forgetting export default. The import will be undefined and React throws an error about an invalid element type.
• Defining a component inside another component. This recreates it on every render and causes strange bugs. Keep each component at the top level of its file.