React  

What is functional component in React?

A JavaScript function that returns JSX. Read more about jsx

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

This Hello Function is a functional component that returns the UI.

  • It's a function, so it takes props as input, returns JSX.

  • Stateless (originally), but since React 16.8, you can use hooks (like useState, useEffect) to manage state and side effects.

Example with Props

function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

Usage

<Greeting name="Alice" />

Example with Hooks

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p> Total-Count: {count} </p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Various ways to write a functional component

1. Regular function declaration: The one we saw above.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

2. Arrow function expression

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

  1. Arrow function with implicit return

If your component just returns JSX (no extra logic), you can make it a one-liner

const Greeting = ({ props }) => <h1>Hello, {props.name}!</h1>;

4. Destructuring props directly in the parameter

Instead of doing props.nameYou can unpack props in the signature

function Greeting({ name, age }) {
  return <p>{name} is {age} years old</p>;
}

5. With React.FC (TypeScript only)

You can define component types using React.FC (or React.FunctionComponent)

import React from 'react';

const Greeting: React.FC<{ name: string }> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

A single React file can contain multiple functional components

// Card.jsx
function Card({ title, children }) {
  return (
    <div className="card">
      <CardHeader title={title} />
      <CardBody>{children}</CardBody>
    </div>
  );
}

function CardHeader({ title }) {
  return <h2>{title}</h2>;
}

function CardBody({ children }) {
  return <div>{children}</div>;
}

export default Card;

When to Keep Multiple Components in One File

  • They’re small and only used inside that file

  • They help structure your JSX (like subcomponents)

  • It keeps your code more readable

When to Split Into Separate Files

  • It’s large

  • It’s reused across multiple places

  • It has complex logic (state, effects, etc.)

1. One file can define multiple functional components (just like we saw earlier)

// Components.jsx
export function Header() {
  return <h1>Hello!</h1>;
}

export function Footer() {
  return <p>© 2025 MyApp</p>;
}

2. How to import them in another file - Named import

// App.jsx
import { Header, Footer } from './Components';

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

export default App;

3. What if you have one default export too?

You can have one default export and also named exports in the same file.

// Components.jsx
export default function Header() {
  return <h1>Hello!</h1>;
}

export function Footer() {
  return <p>© 2025 MyApp</p>;
}

Then you can import like this

import Header, { Footer } from './Components';

Or even rename it : Default exports can be named anything on import

import MyAppHeader, { Footer } from './Components';

Named exports must match the original name unless you explicitly rename them

import MyAppHeader, { Footer as MyFooter } from './Components';

4. What you cannot do

A React component (i.e., a function) can only return one root element but that element can contain multiple children.

Invalid

function App() {
  return <Header />;
  return <Footer />; // ❌ Only first return runs
}

Valid

function App() {
  return (
    <>
      <Header />
      <Footer />
    </>
  );
}

Here, the <>...</> is a React Fragment, allowing multiple JSX elements under one root.

Membership not found