How to Create and Use React Components

Introduction

React is one of the most popular JavaScript libraries for building modern web applications. The core concept of React revolves around components, which allow developers to create reusable, independent, and modular UI elements.

If you’re new to React or looking to deepen your understanding of React components, this guide will cover everything you need to know about creating and using React components effectively.

How React Works: Virtual DOM Explained

By the end of this article, you’ll learn:

What React components are
Different types of React components
How to create and use components in a project
How to pass props and manage state in components
How to structure a React project using components

Let’s dive in! 🚀

1. What Are React Components?

A React component is a JavaScript function or class that returns React elements (JSX), which are rendered as HTML in the browser.

1.1 Why Use Components?

React components help in:

✅ 1. Code Reusability

🔍 What It Means:

React components are self-contained units of UI and logic. Once a component is built, it can be reused across your entire application, even in different projects.

🔄 Benefits:

Reduces duplication — no need to write the same code multiple times.
Consistency — ensures a unified design and behavior.
Easy updates — change the component once, and it reflects everywhere it’s used.

💡 Example:

You can reuse a Button component with different labels or behaviors:

<Button label="Submit" onClick={handleSubmit} />
<Button label="Cancel" onClick={handleCancel} />

Same layout, different functionality — thanks to props.

✅ 2. Better Code Organization

🔍 What It Means:

React encourages breaking your UI into small, manageable components, each with a single responsibility. This makes your codebase cleaner, more organized, and easier to scale.

📦 Structure Example:

/components
  ├── Header.js
  ├── Footer.js
  ├── ProductCard.js
  ├── UserProfile.js
/pages
  ├── HomePage.js
  ├── ProductPage.js

Each file handles a specific UI piece, making it easy to find, edit, and test parts of your app independently.

🧠 Advantages:

Simplifies debugging — errors are isolated to specific components.
Team collaboration — multiple developers can work on different components in parallel.
Scalability — easy to grow from a small app to a large one without messy code.

✅ 3. Improved Performance

🔍 What It Means:

React uses a Virtual DOM and component-level rendering, so only the components that are affected by a change are re-rendered — not the entire UI.

⚙️ How It Works:

When state or props change in a component, React:
1. Re-renders the affected component.
2. Compares the new Virtual DOM with the previous one.
3. Updates only the changed parts of the real DOM.

⚡ Result:

Faster UI updates
Less browser workload
Smoother user experience (especially on mobile or slower devices)

🧠 Real-Life Analogy

Think of React components like LEGO blocks:

Each block (component) has a clear shape and purpose.
You can reuse the same block in different parts of your project.
If one block breaks or needs a change, you can swap or fix it without tearing down the whole structure.
The more blocks you organize properly, the easier it is to build complex things quickly.

✅ In Summary:

Benefit	How Components Help
Code Reusability	Reuse logic/UI across the app with minimal duplication.
Code Organization	Modular structure for easier debugging and scaling.
Performance	React renders only what’s necessary — not the whole page.

Let me know if you want this explained visually (like a chart or infographic), or if you’d like real project examples using these principles!

1.2 Example of a Basic Component

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

This simple function returns JSX (<h1>Hello, Welcome to React!</h1>) and can be used anywhere in a React application.

2. Types of React Components

React supports two main types of components:

2.1 Functional Components (Recommended)

Functional components are simple JavaScript functions that return JSX. These are the modern and preferred way to write React components.

Example: Functional Component

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

export default Welcome;

Functional components can also use React Hooks (useState, useEffect, etc.), making them powerful and easy to manage.

2.2 Class Components (Older Approach)

Before React Hooks were introduced, developers used class-based components, which manage state using the this keyword.

Example: Class Component

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

export default Welcome;

Although class components are still supported, functional components with Hooks are now preferred due to their simplicity and better performance.

3. Creating a React Component Step-by-Step

Let’s create a simple React application and add components to it.

3.1 Setting Up a New React Project

First, create a new React project using Create React App:

npx create-react-app my-app
cd my-app
npm start

This will open http://localhost:3000/ in your browser.

3.2 Creating a New Component

Inside the src/ folder, create a new folder called components/ and add a file Message.js.

Message.js (Functional Component)

import React from "react";

function Message() {
  return <p>This is a reusable React component!</p>;
}

export default Message;

3.3 Using the Component in App.js

Now, import and use this component inside App.js:

import React from "react";
import Message from "./components/Message";

function App() {
  return (
    <div>
      <h1>Welcome to My React App</h1>
      <Message />
    </div>
  );
}

export default App;

💡 Now, the Message component is displayed inside the App component!

4. Passing Data to Components Using Props

4.1 What Are Props?

Props (Properties) are used to pass data from a parent component to a child component. Props are read-only and help in making components dynamic.

Example: Passing Props

Modify Message.js to accept a prop:

function Message(props) {
  return <p>{props.text}</p>;
}

export default Message;

Now, pass a prop from App.js:

<Message text="Hello from App Component!" />

4.2 Using Multiple Props

You can pass multiple props as well:

function User(props) {
  return (
    <div>
      <h2>Name: {props.name}</h2>
      <p>Age: {props.age}</p>
    </div>
  );
}

Using the component:

<User name="Ali" age={25} />

💡 Props make components reusable and dynamic!

5. Managing State in React Components

5.1 What Is State?

State is a built-in object in React that stores data that can change over time.

5.2 Using `useState` in Functional Components

The useState Hook allows components to manage state.

Example: Counter Component

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

🛠️ Explanation:

useState(0) initializes count with 0.
setCount(count + 1) updates the state when the button is clicked.

💡 Now, every time the button is clicked, the count increases!

6. Handling Events in React Components

React allows you to handle events like clicks, key presses, and form submissions.

6.1 Example: Button Click Event

function ClickButton() {
  function handleClick() {
    alert("Button Clicked!");
  }

  return <button onClick={handleClick}>Click Me</button>;
}

🚀 Now, clicking the button shows an alert!

7. Conditional Rendering in React Components

You can conditionally render components based on state or props.

7.1 Example: Show/Hide Message

function ToggleMessage() {
  const [show, setShow] = useState(true);

  return (
    <div>
      <button onClick={() => setShow(!show)}>
        {show ? "Hide" : "Show"} Message
      </button>
      {show && <p>This is a toggled message.</p>}
    </div>
  );
}

💡 Clicking the button toggles the message!

8. Lists and Keys in React Components

You can render lists dynamically using map().

8.1 Example: Rendering a List of Names

function NameList() {
  const names = ["Ali", "Hassan", "Sara"];

  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
}

🔑 The key helps React optimize rendering.

9. Best Practices for Using React Components

Great! Let’s break down each of these best practices in more detail so you understand how and why they help in building efficient, maintainable React applications.

✅ 1. Keep Components Small & Reusable

🔍 Why it matters:

Large components become hard to understand, test, and debug.
Smaller components are easier to reuse, manage, and scale.

🛠️ Best Practice:

Each component should do one thing well — a single responsibility.
Break down complex UIs into multiple nested components.

💡 Example:

Instead of having one big UserProfile component that handles everything (avatar, name, bio, social links, settings), split it:

<UserAvatar />
<UserInfo />
<UserSocialLinks />
<UserSettings />

These smaller components can be reused in other parts of the app as well.

✅ 2. Use Functional Components & Hooks

🔍 Why it matters:

Functional components are lighter and easier to read.
Hooks let you add state and lifecycle logic without classes.

🛠️ Best Practice:

Use useState, useEffect, useContext, and other React hooks to manage component logic.

💡 Example:

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

This is much cleaner and more modern than the older class-based equivalent.

✅ 3. Use Meaningful Component Names

🔍 Why it matters:

Helps with readability and debugging.
Makes the component’s purpose clear at a glance.

🛠️ Best Practice:

Name components based on what they render or represent, not generic names like MyComponent, Box, or Thing.

💡 Examples:

✅ LoginForm, UserCard, ProductList
❌ StuffComponent, HelperBlock, Component1

✅ 4. Separate Logic into Custom Hooks (Advanced)

🔍 Why it matters:

Keeps components clean and focused on UI.
Promotes code reuse across multiple components.

🛠️ Best Practice:

If multiple components use the same logic (e.g., data fetching, form handling, media queries), move that logic into a custom hook.

💡 Example:

function useWindowSize() {
  const [size, setSize] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setSize(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

Now you can use it in any component like this:

const width = useWindowSize();

✅ 5. Keep State Minimal and Manageable

🔍 Why it matters:

Too much or poorly structured state leads to bugs and performance issues.
Makes it harder to trace data flow or debug rendering issues.

🛠️ Best Practice:

Store only what you need in the component state.
Avoid duplicating state — derive it if possible.
Use context or state libraries (like Redux, Zustand, or Jotai) for global/shared state.

💡 Examples:

✅ Store only the selected item’s id, not the whole item object if it can be derived.

✅ If a value can be calculated from props or existing state, don’t store it separately.

✅ Summary of All Practices:

Practice	Purpose
Small & Reusable Components	Simpler logic, reusability, maintainability
Functional Components & Hooks	Cleaner, modern, less boilerplate
Meaningful Names	Self-explanatory code, better readability
Custom Hooks	Reusable logic, cleaner UI code
Minimal & Managed State	Easier debugging, better performance

Let me know if you’d like me to combine this into a cheat sheet, infographic, or slide-style layout for learning or sharing!

Conclusion

In this guide, we explored:
✅ What React components are
✅ How to create functional and class components
✅ How to use props and state
✅ Handling events and conditional rendering
✅ Rendering lists dynamically

By mastering components, you can build scalable and maintainable React applications! 🚀

Now, start creating your own React components and bring your ideas to life! 🎉

Introduction

1. What Are React Components?

1.1 Why Use Components?

✅ 1. Code Reusability

🔍 What It Means:

🔄 Benefits:

💡 Example:

✅ 2. Better Code Organization

🔍 What It Means:

📦 Structure Example:

🧠 Advantages:

✅ 3. Improved Performance

🔍 What It Means:

⚙️ How It Works:

⚡ Result:

🧠 Real-Life Analogy

✅ In Summary:

1.2 Example of a Basic Component

2. Types of React Components

2.1 Functional Components (Recommended)

Example: Functional Component

2.2 Class Components (Older Approach)

Example: Class Component

3. Creating a React Component Step-by-Step

3.1 Setting Up a New React Project

3.2 Creating a New Component

Message.js (Functional Component)

3.3 Using the Component in App.js

4. Passing Data to Components Using Props

4.1 What Are Props?

Example: Passing Props

4.2 Using Multiple Props

5. Managing State in React Components

5.1 What Is State?

5.2 Using useState in Functional Components

Example: Counter Component

6. Handling Events in React Components

6.1 Example: Button Click Event

7. Conditional Rendering in React Components

7.1 Example: Show/Hide Message

8. Lists and Keys in React Components

8.1 Example: Rendering a List of Names

9. Best Practices for Using React Components

✅ 1. Keep Components Small & Reusable

🔍 Why it matters:

🛠️ Best Practice:

💡 Example:

✅ 2. Use Functional Components & Hooks

🔍 Why it matters:

🛠️ Best Practice:

💡 Example:

✅ 3. Use Meaningful Component Names

🔍 Why it matters:

🛠️ Best Practice:

💡 Examples:

✅ 4. Separate Logic into Custom Hooks (Advanced)

🔍 Why it matters:

🛠️ Best Practice:

💡 Example:

✅ 5. Keep State Minimal and Manageable

🔍 Why it matters:

🛠️ Best Practice:

💡 Examples:

✅ Summary of All Practices:

Conclusion

You Might Also Like

What Are React Hooks? A Beginner’s Guide

How to Use useContext for State Management

How React Works: Virtual DOM Explained

5.2 Using `useState` in Functional Components