Functional Components in React

# Functional Components in React

1. Introduction #

2. Learning Objectives #

• Write standard functional components.

• Write modern Arrow Function components.

• Understand the difference between implicit and explicit returns in JSX.

• Export functional components correctly.

3. Beginner-Friendly Explanations #

What is a Functional Component? #

Arrow Functions vs. Standard Functions #

4. Syntax Explanation #

Standard Function Syntax #

```jsx id="ch5_ex1" // Example React component (Standard Function) function WelcomeMessage() { return ( <div className="alert-box"> <h2>Welcome Back!</h2> <p>We are glad to see you again.</p> </div> ); } export default WelcomeMessage;

### Arrow Function Syntax
This is the modern, preferred way in many codebases.

jsx id="ch5_ex2" // Example React component (Arrow Function) const WelcomeMessage = () => { return ( <div className="alert-box"> <h2>Welcome Back!</h2> <p>We are glad to see you again.</p> </div> ); }; export default WelcomeMessage;

### Implicit Returns (Shorthand)
If your component *only* returns JSX and has no other JavaScript logic (like variables or calculations) above the return statement, you can drop the `return` keyword and the curly braces `{}`. Instead, wrap the JSX in parentheses `()`.

jsx id="ch5_ex3" // Example React component (Arrow Function with Implicit Return) const MinimalButton = () => ( <button className="bg-blue-500 text-white rounded px-4 py-2"> Click Me </button> );

## 5. Output Explanations
In all three examples above, the final output to the browser is identical. The browser receives the HTML tags. The difference is purely in the "Developer Experience" (DX). Arrow functions and implicit returns allow developers to write less boilerplate code.

## 6. Real-World Examples
Imagine an e-commerce site. You need a simple badge to show if an item is "On Sale" or "Sold Out". Because this component doesn't need complex logic, an implicit return arrow function is perfect.

jsx id="ch5_ex4" // Example React component const SaleBadge = () => ( <span className="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full absolute top-2 right-2 shadow-sm"> On Sale! </span> );

## 7. Common Mistakes
- **Mixing up `{}` and `()` in Arrow Functions:** 
  If you use curly braces `() => { ... }`, you **must** use the `return` keyword. 
  If you use parentheses `() => ( ... )`, the return is automatic (implicit). 
  A common mistake is writing `() => { <div>Hello</div> }` which returns `undefined` and renders a blank screen!
- **Not exporting the component:** Creating an amazing arrow function component but forgetting `export default ComponentName;` at the bottom of the file.

## 8. Best Practices
- Pick one syntax (standard functions or arrow functions) and stick with it throughout your project for consistency.
- Use implicit returns for simple, "dumb" components that only display UI and have no logic.

## 9. Exercises
1. Convert this standard function to an arrow function:
   `function Footer() { return <footer>Copyright 2026</footer>; }`
2. Take the arrow function you just made and rewrite it using an implicit return.

## 10. Mini Project: Product Showcase Component
Let's build a clean, modern product display component using arrow functions.

jsx id="ch5_proj1" // Example React component import React from 'react';

// Small sub-component using implicit return const PriceTag = () => ( <div className="text-2xl font-black text-green-600 my-2"> $299.99 </div> );

// Small sub-component using implicit return const BuyButton = () => ( <button className="w-full bg-black text-white font-semibold py-3 rounded-lg hover:bg-gray-800 transition-colors"> Add to Cart </button> );

// Main component using standard arrow function with explicit return const ProductDisplay = () => { // We can write JS logic here before the return! const productName = "Sony WH-1000XM5 Noise Cancelling Headphones"; return ( <div className="max-w-md mx-auto bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100 mt-10"> <img src="https://images.unsplash.com/photo-1618366712010-f4ae9c647dcb?auto=format&fit=crop&w=600&q=80" alt="Headphones" className="w-full h-64 object-cover" /> <div className="p-6"> <h2 className="text-xl font-bold text-gray-900 leading-tight"> {productName} </h2> <PriceTag /> <p className="text-gray-500 text-sm mb-6 leading-relaxed"> Industry-leading noise cancellation. Two processors control 8 microphones for unprecedented noise cancellation. With Auto NC Optimizer. </p> <BuyButton /> </div> </div> ); };

export default ProductDisplay; ``