Functional Components

The modern standard for building React UIs using plain JavaScript functions.

React3 min readConcept 6 of 46

What they are

A **Functional Component** is simply a JavaScript function that returns a React Element (usually written as JSX).

In modern React, this is the default and recommended way to build components, entirely replacing the older Class-based syntax.

Why it matters

Functions are vastly simpler than classes. You don't have to worry about confusing this binding rules, constructor functions, or complex lifecycle methods (componentDidMount, etc.).

Coupled with React Hooks (which we'll learn later), Functional Components can do everything classes could do, but with significantly less boilerplate and better code reuse.

How it works

When React encounters a custom tag like <Profile />, it calls your Profile() function.

Your function executes, calculates any necessary logic, and returns a JSX tree. React then takes that tree and renders it to the screen.

Your First Component

Here is a standard Functional Component. Notice how it's just a regular JavaScript function returning JSX markup.

// 1. Capitalized function name
function UserCard() {
 
// 2. Returns JSX markup
return (

Alice

Developer

);
}
 
// 3. Rendered elsewhere as <UserCard />

Alice

Developer

A Functional Component takes no special boilerplate—just a standard JavaScript function returning UI.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What is a Functional Component in React?
  2. 2Why must Functional Components start with a capital letter?
  3. 3Why did React move away from Class components to Functional components?

Remember this

  • A Functional Component is a JavaScript function that returns JSX.
  • Always start component names with a Capital letter.
  • Functional components are the modern standard; avoid using Class components for new code.

Done with this concept?

Mark it complete to track your progress. No login needed.