React Functional Components

In the last lesson you learned the Introduction to React Components, where you saw that a React app is built from small reusable pieces. Now comes the natural question: how do you actually write one of those pieces in code?

🤔 Why functional components?

Picture showing a friendly greeting on your page without any reuse. Here is the pain:

• You could write the same HTML again and again every time you need it, so it gets repetitive fast.
• And when the wording changes, you have to fix it in many places, right?

A functional component fixes this. Here is the deal:

• You write the greeting once as a function, then you give it a name.
• After that you use that name anywhere you want the greeting to appear. One source, used everywhere.
• A functional component is just a plain JavaScript function that returns JSX. That is the whole idea.
• JSX is the HTML-like markup you write inside React to describe what the screen should show. So the function does not do anything fancy. It just returns a little piece of UI.

🧩 What a functional component is

Think of a function component like a recipe card. The card has a name on top, like “Pancakes”. Follow the steps and you get a plate of pancakes every time, as often as you like.

A component works the same way:

• It has a name, like Greeting.
• You “follow” it by writing <Greeting /> in your JSX.
• React runs the function and you get the same piece of UI every time.

Here is the smallest possible version. This is a function that returns one line of JSX.

function Greeting() {
  return <h1>Hello, Alex!</h1>;
}

Let’s walk through it line by line.

• function Greeting() declares a normal JavaScript function named Greeting.
• return <h1>Hello, Alex!</h1>; returns JSX, which looks like HTML but lives in your JavaScript file.
• The <h1> is what will show up on the screen.

So why is this enough? See:

• Because it is just a function, you can reuse it.
• You can pass data into it later.
• And React knows how to turn its returned JSX into real things on the page.

🔤 The naming rule that trips people up

There is one rule you cannot skip. The component name must start with a capital letter. So Greeting, not greeting. This style of starting each word with a capital is called PascalCase.

Why does this matter so much? Because React uses the first letter to decide what <Greeting /> means:

• A capital first letter (<Greeting />) tells React this is your component, so run that function.
• A lowercase first letter (<greeting />) tells React this is a plain HTML tag, like <div> or <span>.
• So if you name your function greeting with a small g, React looks for an HTML tag called “greeting”. It will not find one, and your component will not appear.

// ❌ Avoid: lowercase name, React treats it as an unknown HTML tag
function greeting() {
  return <h1>Hello!</h1>;
}

// ✅ Good: capital first letter, React treats it as a component
function Greeting() {
  return <h1>Hello!</h1>;
}

✍️ Two ways to write it: normal function and arrow function

You will see function components written in two styles. They do the exact same job, so pick whichever reads better to you, then stay consistent across your project.

This is the normal function style you already saw.

function Greeting() {
  return <h1>Hello, Alex!</h1>;
}

And this is the arrow function style. We store the function in a const and use the => arrow syntax.

const Greeting = () => {
  return <h1>Hello, Alex!</h1>;
};

Here is how the two compare:

• Both create a component named Greeting, and both return the same <h1>.
• The arrow version is a little shorter, so you will see it a lot in real code and tutorials.
• There is no “right” one, so do not worry about it too much.

🖥️ Rendering a component

Writing the function is only half the job. Now you have to actually use it so it shows up on the screen:

• You use a component by writing its name as a tag, like <Greeting />.
• That self-closing slash matters when the tag has nothing inside it.

Here is a small page that defines a component and then uses it inside another component.

function Greeting() {
  return <h1>Hello, Alex!</h1>;
}

function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
      <Greeting />
    </div>
  );
}

Here is what is happening:

• Greeting is defined once.
• App is another component. Inside its JSX we write <Greeting /> three times.
• Each <Greeting /> runs the Greeting function and drops its <h1> onto the page.

This is the reuse payoff from earlier. One recipe card, three plates of pancakes. On the screen you would see this.

Hello, Alex!
Hello, Alex!
Hello, Alex!

🏛️ A quick word on class components

You might run into older React code that writes components as JavaScript classes instead of functions. These are called class components. Here is the short story:

• For years they were the only way to do certain things, like remembering data over time.
• That changed when React added hooks, which let function components do everything class components could, with much less code.
• So today function components are the modern standard. They are what this course uses from start to finish.

Here is the short comparison so you know what you are looking at if you see the old style.

⚠️ Common Mistakes

A few small things catch almost everyone at the start. Watch for these.

• Naming the component with a lowercase letter. function greeting() will not render as a component. Start with a capital.
• Forgetting to return the JSX. If the function does not return anything, nothing shows up.
• Returning two sibling elements without a wrapper. A component returns one parent element. Wrap siblings in a <div> or an empty <>...</> tag.

// ❌ Avoid: two top-level elements, this is a syntax error
function Profile() {
  return (
    <h1>Riya</h1>
    <p>Web developer</p>
  );
}

// ✅ Good: wrapped in one parent element
function Profile() {
  return (
    <div>
      <h1>Riya</h1>
      <p>Web developer</p>
    </div>
  );
}

✅ Best Practices

• Name components in PascalCase, like UserCard or NavBar. It signals “this is a component” to both React and other people reading your code.
• Keep each component small and focused on one thing. A small component is easier to read, test, and reuse.
• Give the component a name that says what it shows, like Greeting or PriceTag, not vague names like Comp1.
• Pick one style, normal function or arrow function, and use it consistently across your project.

🧩 What You’ve Learned

• ✅ A functional component is a plain JavaScript function that returns JSX.
• ✅ The name must start with a capital letter (PascalCase) so React treats it as a component, not an HTML tag.
• ✅ You can write it as a normal function or an arrow function. Both do the same job.
• ✅ You render a component by writing it as a tag, like <Greeting />, and you can reuse it as many times as you want.
• ✅ Class components are the older style. Function components with hooks are the modern standard and what this course uses.

🚀 What’s Next?

Now that you know what a function component is and how to render one, the next step is building your own from scratch and using it inside your app.

Creating React Components