1. Introduction

Functional components are one of the fundamental building blocks of React applications. They allow developers to create reusable pieces of user interface using JavaScript functions.

For example, a website may contain a header, navigation bar, product cards, sidebar, and footer. Instead of writing all the interface code in one large component, developers can create separate components for each part and combine them to build the complete application.

Consider this simple functional component:

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

export default Welcome;

Here, Welcome is a functional component that returns JSX. React can render this component wherever it is needed in the application.

What is component reusability?

Component reusability means creating a component once and using it in multiple places, potentially with different data.

For example, a single ProductCard component can display headphones, keyboards, smartphones, and other products.

Reusable components make applications easier to maintain, test, understand, and expand.

2. Learning Objectives

By the end of this tutorial, you will be able to:

• Understand functional components in React.

• Create and export functional components.

• Import components into other files.

• Compose multiple components to build a complete page.

• Understand the difference between reusable and duplicated UI code.

• Pass different data to reusable components using props.

• Organize components using a practical folder structure.

• Apply component design best practices in real-world projects.

3. Core Concepts and Explanation

3.1 What Is a Functional Component?

A functional component is a JavaScript function that returns a React-compatible UI description, usually written using JSX.

Example:

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

export default Header;

Important rules:

• Component names should begin with a capital letter.

• A component can return JSX or another valid React node.

• Components can contain JavaScript variables and logic.

• Components can receive data through props.

• Components can use React Hooks when needed.

• Components should be used through JSX, such as <Header />.

A component named Header is different from a lowercase HTML element such as <header>. React treats capitalized names in JSX as component references.

3.2 Creating Your First Functional Component

Inside your Vite React project, open src/App.jsx and write:

function Welcome() {
  return (
    <div>
      <h1>Welcome to Param Classes</h1>
      <p>Learn React development step by step.</p>
    </div>
  );
}

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

export default App;

Expected browser output:

Welcome to Param Classes
Learn React development step by step.

In this example:

• Welcome defines the UI for the welcome message.

• App is the main component rendered by the application entry point.

• <Welcome /> renders the Welcome component inside App.

• export default App allows the entry point to import the component.

You can use the same component multiple times:

function Message() {
  return <p>Welcome to our website!</p>;
}

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

export default App;

The same message will appear three times. However, each instance currently displays identical content. To customize the output, use props.

3.3 Why Do We Need Reusable Components?

Imagine creating a website with 20 product cards.

Without reusable components, you might repeat the same HTML-like JSX structure 20 times. If you need to change the card layout, you may have to edit many places.

With reusable components, you create the structure once and supply different data to each instance.

Without reusable components	With reusable components
Repeated markup	Shared component structure
Changes need multiple edits	One component can be updated
Harder to maintain consistency	Easier to maintain a consistent UI
More duplicated code	Less duplicated code
Difficult to scale	Easier to extend and organize

Reusability is not only about writing less code. It is also about keeping related UI behavior and presentation consistent.

3.4 Passing Data Through Props

Props are inputs passed from a parent component to a child component. They allow a reusable component to display different content.

Example:

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

function App() {
  return (
    <div>
      <Welcome name="Rahul" />
      <Welcome name="Priya" />
      <Welcome name="Aman" />
    </div>
  );
}

export default App;

Expected output:

Hello, Rahul!
Hello, Priya!
Hello, Aman!

The Welcome component is defined only once, but each instance receives a different name prop.

You can also destructure props for cleaner code:

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

This version receives the name property directly from the props object.

Important: Props should be treated as read-only inputs. If a component needs to manage changing data, React state may be appropriate; state will be covered in a later tutorial.

3.5 Building a Reusable Profile Card

Let's create a reusable profile card that displays a person's name, role, and location.

function ProfileCard({ name, role, location }) {
  return (
    <div className="profile-card">
      <h2>{name}</h2>
      <p>Role: {role}</p>
      <p>Location: {location}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Our Team</h1>

      <ProfileCard
        name="Rahul Sharma"
        role="Frontend Developer"
        location="Raipur"
      />

      <ProfileCard
        name="Priya Verma"
        role="UI Designer"
        location="Delhi"
      />
    </div>
  );
}

export default App;

Both cards use the same component structure but display different information.

This pattern is useful for:

• Employee directories

• Student profiles

• Customer lists

• Author profiles

• Team member sections

3.6 Component Composition

Component composition means combining smaller components to create a larger interface.

For example, a website can be composed of a header, navigation bar, main content area, and footer.

function Header() {
  return <header><h1>Param Classes</h1></header>;
}

function Navigation() {
  return (
    <nav>
      <a href="/">Home</a>{" | "}
      <a href="/courses">Courses</a>
    </nav>
  );
}

function MainContent() {
  return (
    <main>
      <h2>Learn React.js</h2>
      <p>Build modern user interfaces with reusable components.</p>
    </main>
  );
}

function Footer() {
  return <footer><p>© 2026 Param Classes</p></footer>;
}

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

export default App;

Each component has a clear responsibility. App combines the pieces into a complete page.

For production applications, use your actual navigation routes and links rather than placeholder paths.

3.7 Exporting and Importing Components

In small demonstrations, multiple components can be defined in one file. As an application grows, separating components into individual files makes the code easier to manage.

Consider this folder structure:

src/
├── components/
│   ├── Header.jsx
│   ├── ProfileCard.jsx
│   └── Footer.jsx
├── App.jsx
├── App.css
└── main.jsx

Create src/components/Header.jsx:

function Header() {
  return (
    <header>
      <h1>Param Classes</h1>
    </header>
  );
}

export default Header;

Create src/components/ProfileCard.jsx:

function ProfileCard({ name, role }) {
  return (
    <div className="profile-card">
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

export default ProfileCard;

Create src/components/Footer.jsx:

function Footer() {
  return (
    <footer>
      <p>© 2026 Param Classes</p>
    </footer>
  );
}

export default Footer;

Now import and use the components inside src/App.jsx:

import Header from "./components/Header";
import ProfileCard from "./components/ProfileCard";
import Footer from "./components/Footer";

function App() {
  return (
    <div>
      <Header />

      <main>
        <h2>Our Team</h2>
        <ProfileCard
          name="Rahul Sharma"
          role="Frontend Developer"
        />
        <ProfileCard
          name="Priya Verma"
          role="UI Designer"
        />
      </main>

      <Footer />
    </div>
  );
}

export default App;

Vite resolves these local module imports. Including the .jsx extension is also valid and can make file paths explicit.

3.8 Styling Reusable Components

Create or update src/App.css:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f3f6fb;
  color: #172033;
}

header,
footer {
  padding: 20px;
  background: #172554;
  color: white;
  text-align: center;
}

main {
  max-width: 900px;
  margin: 30px auto;
  padding: 0 20px;
}

.profile-card {
  margin: 16px 0;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgb(0 0 0 / 8%);
}

Then import the stylesheet at the top of src/App.jsx:

import "./App.css";

Now each ProfileCard instance receives the same styling through the shared profile-card class.

4. Practical Code Examples

Example 1: Reusable Course Card

Build a component that can display multiple courses.

function CourseCard({ title, duration, level }) {
  return (
    <article className="course-card">
      <h2>{title}</h2>
      <p>Duration: {duration}</p>
      <p>Level: {level}</p>
    </article>
  );
}

function App() {
  return (
    <main>
      <h1>Available Courses</h1>

      <CourseCard
        title="HTML and CSS"
        duration="4 Weeks"
        level="Beginner"
      />

      <CourseCard
        title="JavaScript"
        duration="6 Weeks"
        level="Intermediate"
      />

      <CourseCard
        title="React.js"
        duration="8 Weeks"
        level="Advanced"
      />
    </main>
  );
}

export default App;

Expected result: three course cards with different titles, durations, and levels.

Example 2: Reusable Button Component

A button component can standardize the appearance and label of buttons.

function CustomButton({ label }) {
  return <button type="button">{label}</button>;
}

function App() {
  return (
    <div>
      <CustomButton label="Login" />
      <CustomButton label="Register" />
      <CustomButton label="Explore Courses" />
    </div>
  );
}

export default App;

This example focuses on reusable presentation. To make a button perform an action, you can later pass an event handler through props.

Example 3: Reusable Product Card

This pattern is commonly used in e-commerce websites.

function ProductCard({ name, price, category }) {
  return (
    <article className="product-card">
      <h2>{name}</h2>
      <p>Category: {category}</p>
      <p>Price: ₹{price}</p>
      <button type="button">View Product</button>
    </article>
  );
}

function App() {
  return (
    <main>
      <h1>Featured Products</h1>

      <ProductCard
        name="Wireless Headphones"
        price={2499}
        category="Audio"
      />

      <ProductCard
        name="Mechanical Keyboard"
        price={3999}
        category="Accessories"
      />

      <ProductCard
        name="Smart Watch"
        price={5999}
        category="Wearables"
      />
    </main>
  );
}

export default App;

Notice that numeric prices are passed as numbers, without quotation marks. The component uses the same layout to display each product.

5. Real-World Applications

Functional components and component reuse are essential in professional React development.

E-commerce applications

• Product cards

• Category cards

• Shopping cart items

• Price summaries

• Review sections

Admin dashboards

• Statistic cards

• Tables

• Sidebar navigation

• Header bars

• Status indicators

Educational platforms

• Course cards

• Lesson lists

• Instructor profiles

• Progress displays

• Quiz question components

Business websites

• Service cards

• Testimonials

• Team profiles

• Contact sections

• Reusable calls to action

A well-designed component can be reused across pages while keeping the application's interface consistent.

6. Common Mistakes and Best Practices

Common Mistakes

Mistake 1: Using a lowercase component name

Incorrect:

function profileCard() {
  return <h2>Profile</h2>;
}

Correct:

function ProfileCard() {
  return <h2>Profile</h2>;
}

React component names should begin with a capital letter.

Mistake 2: Calling a component like a regular function

Avoid:

function App() {
  return ProfileCard();
}

Prefer:

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

Using JSX allows React to manage the component's rendering and lifecycle correctly.

Mistake 3: Forgetting to export a component

If another file needs to import a component, export it using a matching export style.

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

export default Header;

Mistake 4: Forgetting to pass required props

If a component expects a name prop but receives none, it may render an empty or unexpected value. Provide the required data or define a sensible default when appropriate.

Mistake 5: Duplicating the same UI repeatedly

If several sections share the same structure, consider creating a reusable component and passing different props.

Mistake 6: Creating too many unnecessary components

Not every single HTML element needs its own component. Create components when they represent a meaningful section, reusable pattern, or distinct responsibility.

Best Practices

• Use PascalCase for component names.

• Give each component a clear purpose.

• Prefer small, focused components over large components that do everything.

• Use props to pass data from parent components to child components.

• Keep props read-only.

• Separate components into files as the project grows.

• Use consistent folder and naming conventions.

• Avoid unnecessary duplication.

• Use semantic HTML elements for accessibility.

• Keep presentation, data, and business logic organized.

• Reuse components when doing so improves clarity and consistency, not merely to reduce line count.

7. Practice Exercises

Exercise 1: Welcome Component

Create a Welcome component that displays a heading and a paragraph. Render it inside App.

Exercise 2: Student Profile

Create a reusable StudentCard component with these props:

• name

• course

• city

Display at least three students with different data.

Exercise 3: Course Cards

Create a CourseCard component with course name, duration, and price. Display three courses using the same component.

Exercise 4: Separate Files

Create separate Header.jsx, MainContent.jsx, and Footer.jsx files. Import and compose them in App.jsx.

Exercise 5: Product Cards

Create a reusable ProductCard component for an e-commerce interface. Display at least four products with different names, prices, and categories.

Challenge Project: Mini Course Website

Build a mini course website using reusable components:

• Header

• Navigation

• Course card

• Instructor card

• Footer

Use props to display different courses and instructors. Apply CSS to create a consistent design.

8. Key Takeaways and Conclusion

In this tutorial, you learned:

• Functional components are JavaScript functions that describe UI.

• Component names should begin with a capital letter.

• JSX lets you render components using syntax such as <Header />.

• Props allow reusable components to receive different data.

• Component composition combines smaller components into larger interfaces.

• Components can be exported and imported across files.

• Reusable components help improve maintainability and consistency.

• Good component design balances reuse with clarity.

Professional tip: Before building a large React page, identify its main UI sections and decide which sections should become reusable components. This planning makes complex applications easier to develop and maintain.