Functional Components

Introduction

In the last lesson, you learned that React supports two ways to write components: functions and classes. Function components are where nearly all modern React code lives, so this lesson goes deep on exactly how to write them, combine them, and share them across files.

By the end of this lesson you will be comfortable writing your own function components from scratch, understanding why they became React's preferred style, and organizing components across multiple files using exports and imports — a skill you will use in literally every React project you build.

Writing a Function Component

A function component is simply a JavaScript function that returns JSX describing what should appear on screen. It can be written with the function keyword or as an arrow function, and by convention its name starts with a capital letter.

// Using the function keyword
function Greeting() {
  return <h1>Hello there!</h1>;
}

// Using an arrow function
const Greeting = () => {
  return <h1>Hello there!</h1>;
};

Hello there!

Composing Function Components

Just like in the last lesson, function components combine by being referenced inside each other's JSX. Because each one is just a function, you can build very complex UIs by composing many small, well-named function components together.

function Logo() {
  return <h2>PrograMinds</h2>;
}

function NavLinks() {
  return (
    <nav>
      <a href="/home">Home</a>
      <a href="/courses">Courses</a>
    </nav>
  );
}

function Navbar() {
  return (
    <header>
      <Logo />
      <NavLinks />
    </header>
  );
}

PrograMinds
Home  Courses

Why Function Components Became the Standard

Early React relied heavily on class components, especially for anything that needed internal state or lifecycle behavior. That changed in 2019 when React introduced Hooks, letting function components do everything classes could — and more simply.

Exporting and Importing Components

Real React projects split components across many files. To use a component defined in one file from another file, you export it from where it is defined and import it wherever you need it. JavaScript modules give you two export styles: default exports and named exports.

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

export default Button;

export function HomeIcon() {
  return <span>🏠</span>;
}

export function SearchIcon() {
  return <span>🔍</span>;
}

// Default export: choose any name, no curly braces
import Button from './Button';

// Named exports: exact name, inside curly braces
import { HomeIcon, SearchIcon } from './Icons';

function App() {
  return (
    <div>
      <HomeIcon />
      <SearchIcon />
      <Button text="Click me" />
    </div>
  );
}

export default App;

Example: A Small Multi-File App

Putting it all together, here is how a tiny app might be organized across three files, each with one clearly named function component.

function Greeting() {
  return <h1>Welcome back!</h1>;
}

export default Greeting;

import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting />
      <p>Your dashboard is ready.</p>
    </div>
  );
}

export default App;

Welcome back!
Your dashboard is ready.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Function components are the backbone of modern React development: simple functions that return JSX, composed together, and shared across files using JavaScript modules. Understanding exports and imports is essential, since virtually every real project splits its UI across many component files.

In this lesson, you learned how to write and compose function components, why they overtook class components as the standard, and how to organize them with default and named exports. Next, you will look at class components — the older syntax you will still encounter in legacy React code.