React Component Basics

In the previous lessons, we have learned about JSX and how it allows us to write HTML-like syntax within JavaScript.

React is all about components. Now let’s properly understand what React components are, why they’re so important, and how to create them.

🧩 What Are React Components?

React components are the basic building blocks of any React application. Here are the key points to understand about components:

• Everything is a component - In React applications, every piece of the user interface is either a component or part of a component

• Component-to-view conversion - Technically, React creates a view for each component and all these views combine to form the complete user interface or a web page.

• Foundation of React development - Understanding components is crucial because they form the foundation of how React works and how you build applications

• What React does - React’s main responsibility is taking these components and rendering them on the webpage to create the final UI

⚙️ Key Properties of Components

Most of the React components have some key properties as follows:

Every component knows what it does and how it should appear and that makes them perfect for building complete user interfaces.

🛠️ Creating Your First Component

In React, we write new components using JavaScript functions. Let’s create a simple component step by step:

import React from "react";

function ShoppingItem() {
  return <h2>Apples - 5 pieces</h2>;
}

export default ShoppingItem;

Let’s break this down:

📏 Component Rules

There are two important rules when writing components as functions:

📦 Rule 1: Must Return JSX

The function needs to return some JSX. For Example

// ✅ Correct - returns JSX
function ShoppingItem() {
  return <h2>Apples - 5 pieces</h2>;
}

// ✅ Also correct - returns null
function EmptyComponent() {
  return null;
}

// ❌ Wrong - doesn't return anything
function BadComponent() {
  console.log("This doesn't return JSX");
}

📦 Rule 2: Must return only one parent element

The JSX returned from a component must be wrapped in a single parent element. If you need to return multiple elements, you can wrap them in a <div> or a React Fragment (<>...</>).

// ✅ Correct - wrapped in a div
function ShoppingItem() {
    return (
        <div>
            <h2>Apples - 5 pieces</h2>
            <p>Fresh and organic apples.</p>
        </div>
    );
}


// ✅ Correct - wrapped in a React Fragment
function ShoppingItem() {
    return (
        <>
            <h2>Apples - 5 pieces</h2>
            <p>Fresh and organic apples.</p>
        </>
    );
}

// ❌ Wrong - multiple root elements
function BadShoppingItem() {
    return (
        <h2>Apples - 5 pieces</h2>
        <p>Fresh and organic apples.</p>
    );
}

🎯 Using Components

After creating a component, we need to use the component in our application to see it:

function App() {
  return (
    <div>
      <h1>My Shopping List</h1>
      <ShoppingItem />
    </div>
  );
}

🔄 Component Reusability

One of the most powerful features of components is reusability. Now let’s see the power of reusability. We can use the same component multiple times:

function App() {
  return (
    <div>
      <h1>My Shopping List</h1>
      <ShoppingItem />
      <ShoppingItem />
      <ShoppingItem />
    </div>
  );
}

This will display three identical shopping items. While they look the same now, we’ll learn how to customize each one with different data using props in upcoming lessons.

💡 Reusability Benefits

• Write once, use everywhere - Create a component once and use it multiple times throughout your application
• Reduce code duplication - Instead of copying and pasting similar code, reuse the same component
• Easier maintenance - When you need to make changes, update the component once and it updates everywhere it’s used
• Consistent UI - Ensures all instances look and behave the same way across your application
• Faster development - Build new features by combining existing components rather than starting from scratch

For Example: In above App component, we can see how the ShoppingItem component is reused multiple times to display the same item. We can customize the ShoppingItem component by passing different props to it that we will learn in upcoming sessions.

🧠 Adding Logic to Components

Since components are JavaScript functions, we can add any JavaScript logic we want:

function ShoppingItem() {
  // JavaScript logic goes here
  const itemName = "Apples";
  const quantity = 5;
  const price = 3.99;
  const isUrgent = true;

  console.log("ShoppingItem component is rendering");

  return (
    <div>
      <h3>{itemName}</h3>
      <p>Quantity: {quantity}</p>
      <p>Price: ${price}</p>
      {isUrgent && <span>🔴 Urgent Item!</span>}
      <p>Total: ${(quantity * price).toFixed(2)}</p>
    </div>
  );
}

⚠️ Common Mistakes to Avoid

Thinking in Components

Learning to “think in components” is a fundamental skill for React developers. Here’s a systematic approach:

Step 1: Identify UI Sections

Look at your design and identify distinct sections that could be separate components. Ask yourself:

• Does this section have a specific purpose?
• Could this section be reused elsewhere?
• Is this section complex enough to warrant its own component?

Step 2: Look for Repetition

If you see similar elements repeated, that’s a strong candidate for a reusable component.

Step 3: Consider Data Requirements

Think about what data each component needs and where that data comes from.

Step 4: Plan the Component Hierarchy

Sketch out how your components will be nested and organized.

🔧 Try It Yourself!

Let’s practice creating components:

Example Solution:

function UserCard() {
  const name = "John Doe";
  const email = "john@example.com";

  return (
    <div className="user-card">
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

function ProductCard() {
  const name = "Laptop";
  const price = 999.99;

  return (
    <div className="product-card">
      <h2>{name}</h2>
      <p>${price}</p>
    </div>
  );
}

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

🧩 What You’ve Learned

• ✅ React components are the building blocks of React applications
• ✅ How to create components using JavaScript functions
• ✅ The two essential rules: components must return JSX and have one parent element
• ✅ How to use components in your application with JSX syntax
• ✅ The power of component reusability for reducing code duplication
• ✅ Adding JavaScript logic inside components for dynamic behavior
• ✅ Common mistakes to avoid when creating components
• ✅ How to think in components when designing user interfaces

🚀 What’s Next?

Great! You now understand what React components are and how to create them. In the next lesson, we’ll learn about React Component Types - understanding the different types of components and ways to create them.