Posted in React

React Functional Components Explained for Beginners: What They Are and How to Use Them

Estimated read time 4 min read

If you’ve just started learning React, there’s one concept you’ll keep running into — components. Whether it’s a button, a form, a header, or even the entire layout, React breaks everything down into smaller parts called components.

Understanding components is one of the first steps in getting comfortable with React. In this post, we’ll focus on functional components, which are the most common type of component used in modern React apps.

What is a Component in React?

In simple terms, a component is a reusable piece of UI. You can think of it like a JavaScript function that:

  • Accepts input (called props)
  • Returns output in the form of JSX (a syntax that looks like HTML)

Here’s a basic example of what a component looks like:

const WelcomeMessage = () => {
  return <h1>Welcome to React</h1>;
};

This component can be used anywhere in your React app, and it will always show the same message.

Types of Components in React

React supports two main types of components:

1. Class-Based Components (Older Style)

Before React version 16.8, class components were the standard way to write components.

Example:

class Greeting extends React.Component {
  render() {
    return <h1>Hello from Class Component</h1>;
  }
}

While this works, class components are less common now. Most developers prefer a simpler way.

2. Functional Components (Modern Style)

Functional components are written as regular JavaScript functions. They are easy to read, write, and manage. React Hooks (like useState and useEffect) made them powerful enough to do everything class components can do — and more.

Here’s the same greeting example written as a functional component:

const Greeting = () => {
  return <h1>Hello from Functional Component</h1>;
};

Or even shorter:

const Greeting = () => <h1>Hello from Functional Component</h1>;

Basic Rules for Functional Components

There are a few simple rules to keep in mind when creating functional components:

✅ 1. Always Start the Name with a Capital Letter

React treats lowercase names as HTML tags, not custom components.

Correct:

const MyButton = () => <button>Click me</button>;

Incorrect:

const myButton = () => <button>Click me</button>;

✅ 2. Use Parentheses for Multi-line JSX

If your JSX spans more than one line, it’s good practice to wrap it in parentheses.

Example:

const Layout = () => (
  <div>
    <header>Header Section</header>
    <main>Main Content</main>
  </div>
);

✅ 3. Use return if You’re Using Curly Braces

If you open a function body with {}, you must use return.

const Example = () => {
  return <p>This works fine</p>;
};

How to Display a Functional Component in the Browser

To make your component appear on the screen, you need to render it into the DOM using the React root API.

Here’s a simple example:

import { createRoot } from 'react-dom/client';
import Greeting from './Greeting'; // assuming you created this component

const root = createRoot(document.getElementById('root'));
root.render(<Greeting />);

Make sure your HTML file has a container with id="root" like this:

<div id="root"></div>

What Makes Functional Components So Popular?

Functional components are widely used because they are:

  • Easy to write – less code and no need for classes
  • Easier to understand – you can see at a glance what the component does
  • Hook-friendly – allows use of useState, useEffect, and other hooks
  • Reusable – small components can be reused across your project

You can even break down large pages into many smaller components. For example, a blog page might have:

  • <Header />
  • <BlogPost />
  • <Comments />
  • <Footer />

Each of these can be its own functional component.

Example: A Simple Blog Post Component

Here’s a functional component for a blog post:

const BlogPost = ({ title, author }) => {
  return (
    <article>
      <h2>{title}</h2>
      <p>Written by {author}</p>
    </article>
  );
};

You can use it like this:

<BlogPost title="React Basics" author="Techcanva" />

This shows a clear example of how props are passed and used inside a functional component.

Conclusion

Functional components are now the standard way to build interfaces in React. They are simple, readable, and work well with hooks. If you’re just starting out, focus on building your app using functional components. Learn how to pass props, manage state with hooks, and break your UI into smaller, reusable parts.

And remember, you don’t need to know everything at once. Start small, experiment, and keep practicing. That’s the best way to get better at React — one component at a time.

📺 Want to Learn React by Watching?

Watch the complete beginner-friendly video:
👉 React Functional Components Explained (YouTube)

📌 Like, Share, and Subscribe to support and stay updated with more content.

Related