In this tutorial, we will learn what functional components are, why React uses them, and how you can create your own in a simple and modern way. By the end, you will understand how React builds your UI using small, reusable functions.

What Are Functional Components?

A functional component is simply a JavaScript function that returns JSX.

That is it. Nothing more complicated.

Example:

export default function Hello() {
  return <h1>Hello world</h1>;
}

If you can write functions, you can write React components.

Why Functional Components?

React uses only functional components because they are:

• Easy to read
• Easy to reuse
• Easy for the React Compiler to optimize
• Pure functions of their inputs

They behave the same way every time, which makes your UI predictable.

Functional components replaced old class components because they are simpler and far easier for beginners.

How Functional Components Work

A functional component:

1. Runs as a function
2. Takes data as parameters (called props)
3. Returns the UI you want to display
4. Let React handle rendering and updates

Think of a component like a vending machine:

You put in props. You get out UI. You don't worry about the internal mechanics.

Creating Your First Functional Component

Inside your React project, create a file:

src/Welcome.jsx

Add this code:

export default function Welcome() {
  return <h1>Welcome to React!</h1>;
}

This is a functional component because:

• It is a function
• It returns JSX
• React can render it on the page

Using the Component in Your App

Open:

src/App.jsx

Add:

import Welcome from "./Welcome.jsx";
 
export default function App() {
  return (
    <>
      <title>Functional Components</title>
      <meta name="description" content="Learning functional components in React 19" />
 
      <Welcome />
    </>
  );
}

When the browser refreshes, React will show the UI returned by your component.

Components Can Accept Props (Inputs)

In React, components can receive data from their parent. This data is called props (short for “properties”). Props allow you to reuse the same component with different values, making your UI more flexible and dynamic.

In the previous tutorial, we created a Greeting component that always displayed the same text. Instead of hardcoding the message, we can pass the name as a prop so the component can display different greetings.

Example

export default function Greeting({ name }) {
  return <h1>Hello {name}</h1>;
}

Here, the Greeting component receives a prop called name. We use object destructuring ({ name }) to access it directly inside the function.

Now we can use the component like this:

<Greeting name="Sarah" />

When React renders this component, it passes "Sarah" as the value of the name prop. The component then displays:

Hello Sarah

This makes the component reusable. You can pass different names and get different outputs without changing the component’s internal code.

Tips for Newbies

1. Start with small components
2. Give each component one job
3. Keep functions simple and focused
4. Let React handle the updating and rendering
5. Return clean, readable JSX

Functional components are the foundation of React. They are simple JavaScript functions that return JSX, making your UI easy to understand and easy for React to optimize. With JSX 2.0 and the declarative model, building components becomes a straightforward process: describe what you want your UI to look like, and React takes care of the rest.