Function Components

React components are the building blocks of any React application. Function components are the modern, recommended way to create components in React.

What is a Component?

A component is a reusable piece of UI. In React, components are JavaScript functions that return JSX (UI description).

Component Structure

Components follow a consistent structure:

Naming Conventions

Components Return Single Elements

Exercise: Create a Component

Exercise: Component with Logic

Key Takeaways

1. Components are functions - They take no arguments (for now) and return UI
2. PascalCase naming - Always start component names with capital letter
3. Single root element - Return one element (use Fragment if needed)
4. Can contain logic - Variables, conditions, and helper functions
5. Reusable - Same component can be used multiple times