Functional Components

A functional component in React is a JavaScript function that contains JavaScript logic, uses React hooks, accepts properties (also called props), and returns JSX that is rendered on the screen.

Basic Structure

Here is a simple functional component that returns an h1 tag:

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

Component Naming Convention

React component names must start with a capital letter. This is not just a style convention — it is a rule enforced by React itself. A lowercase component name like <welcome /> is treated as a plain HTML tag by the browser, not a React component, and will not render correctly.

function Welcome() { ... }  // ✅ Correct — React recognises this as a component
function welcome() { ... }  // ❌ Wrong — React treats <welcome /> as an HTML tag

Exporting and Importing Components

After creating a component, it must be exported so it can be used in other parts of the application. There are two ways to export a component:

Default Export — Used when a file has one primary component to export. There can only be one default export per file.

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

export default Welcome;

Named Export — Used when a file exports multiple components. Named exports must be imported using the exact name wrapped in curly braces.

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

export function Goodbye() {
  return <h1>Goodbye!</h1>;
}

Importing them:

// Default import
import Welcome from './Welcome';

// Named imports
import { Welcome, Goodbye } from './components';

Using a Component

Once exported and imported, a component is used like an HTML tag inside JSX:

// In App.jsx
import Welcome from './Welcome';

function App() {
  return <Welcome />;
}

Props (Properties)

Props are how data is passed into a component from its parent. They allow the same component to render different content depending on what is passed in — making components reusable and dynamic.

Props are passed like HTML attributes and received as an object inside the function:

function Greeting({ name, role }) {
  return <h1>Hello, {name}. You are a {role}.</h1>;
}

Using the component with props:

<Greeting name="Wariz" role="Developer" />
// Renders: Hello, Wariz. You are a Developer.

<Greeting name="Ali" role="Designer" />
// Renders: Hello, Ali. You are a Designer.

Props are read-only — a component cannot modify the props it receives. Data flows one way, from parent to child.

Component Composition

Components can be nested inside one another. This nesting is called composition and is how you build a full UI from smaller, focused pieces.

function Header() {
  return <header><h1>My App</h1></header>;
}

function Sidebar() {
  return <aside><p>Navigation links here</p></aside>;
}

function MainContent() {
  return <main><p>Page content here</p></main>;
}

function App() {
  return (
    <div>
      <Header />
      <Sidebar />
      <MainContent />
    </div>
  );
}

Each component is responsible for its own piece of the UI. The App component composes them together into a complete page.

Returning Multiple Elements with Fragments

As covered in the JSX topic, a functional component can only return one root element. When you need to return multiple elements without adding an extra div to the DOM, use a React Fragment:

function UserInfo() {
  return (
    <>
      <h2>Wariz</h2>
      <p>Developer & Founder</p>
    </>
  );
}

The Fragment <>...</> acts as the single root wrapper without rendering any actual HTML element in the browser.