DEV Community: Ahmad Mahboob

Responding to Events – React

How to Add Tailwind CSS to a React App (Step-by-Step Guide)

How to Use Bootstrap in a React Project (Beginner Guide)

Conditional Rendering in React: A Practical Guide for Beginners

How to Create a React App Using Vite (Step-by-Step Guide for Beginners)

Understanding React Project Structure Created by Vite (Beginner’s Guide)

React Fragments Explained: How to Group Elements Without Extra DOM Nodes

React Components Explained: A Beginner-Friendly Guide with Examples

Passing Children as Props in React (Beginner Friendly Guide)

Ahmad Mahboob — Sat, 27 Dec 2025 15:54:33 +0000

When you start learning React, you often hear about props. Props help us pass data from one component to another.

But there is one special prop in React that beginners usually find confusing — children.

In this blog, we’ll understand:

What children is in React
Why we use it
How to pass children as props
Simple examples you can understand easily

No advanced concepts. Just clear basics.

What Are Children Props in React?

In React, children is a special prop that allows you to pass JSX or content inside a component, instead of passing it as a normal prop.

Simple meaning:

Whatever you write between the opening and closing tag of a component becomes children.

Example:

<Card>
  <h2>Hello World</h2>
</Card>

Here, <h2>Hello World</h2> is the children of the Card component.

Why Do We Use Children Props?

Children props are useful when:

You want to create reusable components
You don’t know in advance what content will go inside a component
You want to keep components flexible and clean

Think of it like a container or wrapper that can hold different content.

Basic Example of Children Props

Let’s start with a very simple example.

Parent Component

function App() {
  return (
    <Box>
      <p>This is inside the Box</p>
    </Box>
  );
}

Child Component

function Box({ children }) {
  return (
    <div style={{ border: "2px solid black", padding: "10px" }}>
      {children}
    </div>
  );
}

What’s Happening Here?

Box is a component
Whatever we write inside <Box>...</Box> becomes children
{children} renders that content inside the component

Children Can Be Anything

Children are not limited to text only. They can be:

Text

<Card>Welcome</Card>

HTML / JSX

<Card>
  <h3>Title</h3>
  <p>Description</p>
</Card>

Components

<Card>
  <Button />
</Card>

React treats all of this as children.

Real-World Use Case (Very Common)

Imagine a Button component:

function Button({ children }) {
  return (
    <button className="btn">
      {children}
    </button>
  );
}

Usage:

<Button>Login</Button>
<Button>Sign Up</Button>

Instead of creating multiple buttons, you reuse one component and pass different text using children.

Children vs Normal Props

Using Normal Props

<Button text="Login" />

Using Children

<Button>Login</Button>

Why Children Is Better?

More readable
More flexible
Can pass complex JSX, not just text

Common Beginner Mistakes

Here are some common mistakes beginners make:

Forgetting to render {children} inside the component
Thinking children is a keyword (it’s just a prop)
Using self-closing tags when children are needed

❌ <Box />

✅ <Box>Content</Box>
Confusing children with normal props

When Should You Use Children?

Use children when:

You are building reusable UI components
Your component is acting as a wrapper or layout
Content inside the component can change

Do not use children when the component has a fixed structure.

Final Thoughts

Children props are one of the most powerful and simple features of React.

Once you understand them, writing clean and reusable components becomes much easier.

If you are serious about React, mastering children is not optional — it’s essential.

Keep practicing small examples. That’s how React really clicks.

Important Links

CSS Modules in React: Scoped Styling Without the Headache

How to Add Tailwind CSS to a React App (Step-by-Step Guide)

How to Use Bootstrap in a React Project (Beginner Guide)

Conditional Rendering in React: A Practical Guide for Beginners

How to Create a React App Using Vite (Step-by-Step Guide for Beginners)

Understanding React Project Structure Created by Vite (Beginner’s Guide)

React Fragments Explained: How to Group Elements Without Extra DOM Nodes

React Components Explained: A Beginner-Friendly Guide with Examples

CSS Modules in React: Scoped Styling Without the Headache

Ahmad Mahboob — Fri, 26 Dec 2025 15:59:52 +0000

Introduction

In this blog, we’ll discuss what CSS Modules in React are, why we use them, and what problems they solve. We’ll also look at an example to understand the concepts better. CSS Modules provide a modular way of defining CSS styles for a component. Developers can define CSS styles for a component without name clashes. I’ll explain this later in the blog.

What Are CSS Modules?

CSS Modules allow us to define styles for a component. As these are defined for a specific component, it reduces global CSS conflicts. CSS Modules are local styles by default. When classes are defined in CSS Modules, they are transformed into unique identifiers at build time.

What Problems Do CSS Modules Solve?

You have probably faced situations where your desired styles do not work. This issue often arises in projects with multiple developers. For example, you define CSS styles for one component. Another developer defines the same class with different styles. When you use the class in your component, your styles are not working. This is because you both have defined the same class with different styling. That creates unintentional name clashes.

Also, the developers add CSS styles and classes in CSS files. They do not remove the CSS styles/classes from the codebase, thinking that some other component might be using this styling. That results in the CSS file becoming larger over time. CSS Modules solve these issues.

Why Use CSS Modules in React?

Developers use CSS Modules because:

It avoids global CSS conflicts.
It allows component-level styling.
It is easier to maintain.
No headache of creating unique class names.

How CSS Modules Work (Concept)

To work with CSS Modules, you should consider the following points. The CSS filename would be like this Component.module.css. Here Component is the name of your component. (Component.module.css is usually named after the component for clarity, but React does not enforce this strictly.) module.css implies that this is a CSS module. Component.module.css implies that this CSS module contains the styles for Component. For example, if a component is named Item. The CSS module file would be named Item.module.css. React (via the bundler) transforms CSS Module class names into unique identifiers during development and build time. Like .list-item would become ._list-item_zpzj8_1. React converts your CSS classes into an object. You can apply the styles using an import statement in the React component. You can access CSS module classes in a React component using dot-notation or bracket-notation of the object in JS. CSS Modules work out of the box in popular React setups like Create React App, Vite, and Next.js.

Using CSS Modules in a React Project (Example)

This is my component:

function App() {
  return (
    <>
      <h2>Hello World</h2>
      <p>Using CSS Module</p>
    </>
  );
}

I want to change the text color and its background color of both the heading and paragraph. My component name is App. So, I would create App.module.css file for defining styles. In my App.module.css file, I would define my component’s styling as:

.main-heading {
  background-color: aqua;
  color: white;
}
.paragraph {
  background-color: chartreuse;
  color: antiquewhite;
}

Now, import this styling into the App.jsx (App component) by adding this line:

import styles from './App.module.css'

After this, you can apply your defined classes to your component. Use dot-notation or bracket notation to use styles (Because styles/classes are converted into an object). Like:

import styles from "./App.module.css";
function App() {
  return (
    <>
      {/* Using Bracket Notation */}
      <h2 className={styles["main-heading"]}>Hello World</h2>
      {/* Using Dot-Notation*/}
      <p className={styles.paragraph}>Using CSS Module</p>
    </>
  );
}

export default App;

In this way, your styles are applied.

Transformation of class names: In this example, when I inspected the styling of the app in the browser. The .main-heading is transformed into ._main-heading_zpzj8_1 and .paragraph into ._paragraph_zpzj8_9. (In your case, they might be different.) That’s how CSS Modules avoid global CSS conflicts. You can also use global CSS along with CSS module styling as:

import styles from "./App.module.css";
function App() {
  return (
    <>
      {/* Using Bracket Notation */}
      <h2 className={`${styles["main-heading"]} text-center`}>Hello World</h2>
      {/* Using Dot-Notation*/}
      <p className={`${styles.paragraph} text-center`}>Using CSS Module</p>
    </>
  );
}

export default App;

Common Mistakes to Avoid

Using class instead of className

Forgetting module.css

Incorrect import syntax

Trying to use global selectors like body inside CSS Modules

Forgetting to import the CSS module file

When Should You Use CSS Modules?

Small to medium React projects
Component-based UI
Teams where CSS conflicts are common

Conclusion

In this blog, we discussed in detail what CSS Modules are, why and how to use them, and what problems they solve. I explained the concepts in a beginner-friendly way and showed the exact process step-by-step. If you feel it is complicated at first, don’t worry. You will master this by practice. I encourage you to practice following along with the blog to develop a better understanding. Feel free to comment below if you need any help. I’ll be happy to help you.

Important Links

Adding a CSS Modules Stylesheet | Create React App

Property accessors Object - JavaScript | MDN

Create React App is deprecated.

Next.js by Vercel - The React Framework

Getting Started | Vite

How to Add Tailwind CSS to a React App (Step-by-Step Guide)

How to Use Bootstrap in a React Project (Beginner Guide)

Conditional Rendering in React: A Practical Guide for Beginners

How to Create a React App Using Vite (Step-by-Step Guide for Beginners)

Understanding React Project Structure Created by Vite (Beginner’s Guide)

React Fragments Explained: How to Group Elements Without Extra DOM Nodes

React Components Explained: A Beginner-Friendly Guide with Examples

How to Add Tailwind CSS to a React App (Step-by-Step Guide)

Ahmad Mahboob — Thu, 25 Dec 2025 16:41:36 +0000

Introduction

In this blog, we’ll discuss what Tailwind CSS is, how to use it in a React project, and why developers use it. First, understand what Tailwind CSS is:

A utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup. —Tailwind CSS official website

Prerequisites

To follow along, you should have these prerequisites:

You should have Node.js installed on your system. (Visit Node.js website to install Node.js, if you haven’t already, for free)
You should have a React project created
You should have basic knowledge of React

Note: If you haven’t already created the React app, don’t worry. I’ll show you how to create a React app in the section below.

Why Use Tailwind CSS with React?

Tailwind CSS provides a utility-first approach
Tailwind CSS has many commonly used predefined classes. We use those classes in our project.
Tailwind CSS helps developers build UI faster.
The developers do not have to write custom CSS for each element.
It also allows developers to build UI responsive without leaving the HTML.
It also works perfectly with React components.
Many modern websites and tools, such as Shopify and Cursor, use Tailwind. — Source: Tailwind CSS official website

Step 1 - Create React App

You can create a React app using Vite with this command:

npm create vite@latest project-name

I am using Vite because it’s the recommended by React docs,. I have a detailed blog on “How to Create a React App”. Visit this blog to understand the difference much better.

Step 2 - Install Tailwind CSS

Now, install Tailwind CSS in your project (created by Vite) with this command:

npm install tailwindcss @tailwindcss/vite

npm will install the dependencies (it might take a few seconds). You can verify the installation from package.json.

Configure Vite Plugin

To configure Vite plugin, first open the file vite.config.js. You can find this file in project-name/vite.config.js (if you created project using Vite). Here, project-name corresponds to the name of your project.

1- In the top of the vite.config.js add this line to import tailwindcss

import tailwindcss from '@tailwindcss/vite'

2- After this, add this in the plugin section in the file (vite.config.js)

tailwindcss()

So, your vite.config.js looks like this:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})

Import Tailwind CSS

To import Tailwind CSS, locate the index.css file and open it. You can find index.css in project-name/src/index.css. Now, replace the content of index.css with this line:

@import "tailwindcss";

Now, you can start using Tailwind CSS in your project. Like:

function App() {
  return (
    <>
      <h2 className="bg-red-400 font-mono text-4xl text-gray-200 m-4 text-center">
        Hello World
      </h2>
    </>
  );
}
export default App;

In this example, I have styled the background, text-color, font-size, font, text-alignment and added a margin. If you want to learn Tailwind CSS in a beginner friendly way, feel free to comment to let me know.

When Should You Use Tailwind CSS (and When Not)?

Good for component-based apps
Not ideal if someone prefers traditional CSS frameworks

Conclusion

In this blog, I explained what Tailwind is, why it is used, and how to install and use it in a React project. I have explained step-by-step process in beginner-friendly way. I did not go too deep to avoid confusing beginners. If you need help regarding any issue while installing or using, feel free to comment below. I’ll be happy to help you.

Important Links

Installing Tailwind CSS with Vite - Tailwind CSS

Node.js — Run JavaScript Everywhere

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Showcase - Tailwind CSS

How to Use Bootstrap in a React Project (Beginner Guide)

Conditional Rendering in React: A Practical Guide for Beginners

How to Create a React App Using Vite (Step-by-Step Guide for Beginners)

Understanding React Project Structure Created by Vite (Beginner’s Guide)

React Fragments Explained: How to Group Elements Without Extra DOM Nodes

React Components Explained: A Beginner-Friendly Guide with Examples

How to Use Bootstrap in a React Project (Beginner Guide)

Ahmad Mahboob — Wed, 24 Dec 2025 16:03:28 +0000

Introduction

In this blog, we’ll discuss what Bootstrap is, how to use Bootstrap in a React project, and why we use Bootstrap. First, understand what Bootstrap is:

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes. —- From Bootstrap Official Website

Why Use Bootstrap with React?

Bootstrap helps developers build UI components faster by providing pre-built components that can be customized using utility classes. It is good for beginners who are learning React. This allows beginners to focus on learning React concepts rather than writing CSS. Rather than writing the styles, i.e., CSS of the component. But it comes with its costs. Bootstrap is not ideal for projects with highly custom UIs. From a beginner’s point of view, it’s a great resource that boosts their learning speed by focusing on concepts.

Prerequisites

To follow along with this beginner guide, there are some prerequisites. These are:

You should have basic React knowledge.
You must have Node.js installed on your system.
You should have created a React project. If you haven’t, you can read this guide or run this command in your terminal:
```
npm create vite@latest project-name
```

Installing Bootstrap in React

For installing Bootstrap in your React project, follow these steps:

1- Install via npm

If you have Node.js installed on your system, then you can run this command in your terminal to install Bootstrap:

npm install bootstrap@5.3.8

or simply (replacing install with i in command):

npm i bootstrap@5.3.8

This command will install the Bootstrap version 5.3.8 package in your React project. When you run this command in your terminal, it will install like this:

You can also verify it from package.json. If the package is installed successfully, it will be listed in the dependencies in package.json.

Note: The version of Bootstrap may be different. At the time of publishing this blog, the latest version is 5.3.8. You can check for the latest version from the official Bootstrap website.

2- Import Bootstrap CSS in `main.jsx` or `index.js`

Now, to use Bootstrap in a React project, import Bootstrap in main.jsx or index.js. Add this line in main.jsx.

import 'bootstrap/dist/css/bootstrap.min.css';

Note: To use Bootstrap in React, there is no need for jQuery.

Using Bootstrap Classes in React Components

Now, as we have imported Bootstrap, we can use Bootstrap classes in our projects. I’m showing you a simple example.

function App() {
  return (
    <>
      <h3 className="font-monospace bg-success text-white">
        Hello World! - Styled using Bootstrap
      </h3>
    </>
  );
}
export default App;

Note: I have not used class, instead, I used className. The word className is used to add classes in a React component because class is a keyword in JavaScript. So, the word class is not used.

Common Mistakes to Avoid

Using class instead of className
Importing Bootstrap JS unnecessarily
Mixing Bootstrap with too many other UI libraries

Conclusion

In this guide, we learned what Bootstrap is and how to install, import, and use it in a React project. Bootstrap can be a helpful tool for beginners who want to build user interfaces quickly while focusing on core React concepts. While it may not be suitable for highly customized designs, it works well for learning, prototyping, and small to medium projects.

Important Links

Get started with Bootstrap · Bootstrap v5.3

Node.js — Run JavaScript Everywhere

Conditional Rendering in React: A Practical Guide for Beginners

How to Create a React App Using Vite (Step-by-Step Guide for Beginners)

Understanding React Project Structure Created by Vite (Beginner’s Guide)

React Fragments Explained: How to Group Elements Without Extra DOM Nodes

React Components Explained: A Beginner-Friendly Guide with Examples

What Are Props in React? A Beginner-Friendly Guide

Ahmad Mahboob — Tue, 23 Dec 2025 15:24:23 +0000

Introduction

In this blog, we’ll discuss what props are in React, why we use them, what problems they solve. Also we’ll see an example of using props. Sometimes, you need to pass data to a React component to make your app dynamic. You may find it difficult to understand how to pass data.. props do this thing for you. They are used to pass data from a parent component to a child component.

What are Props in React?

Props are inputs passed to a React component to customize its behavior or content.

Props are the properties. They are a way to communicate data from parent element to child. We design React components to show the required data. We use placeholders for the data in React component. When we use a component multiple times, different data is passed to the component. This data is passed from parent to child using props. This is the advantage of React that we can use a component multiple time. Props make components reusable and dynamic. Props are read-only. They are designed for one-way communication between components i.e., from parent to child.

Why Props are Important?

Props are one of the most important concepts in the journey of React. They give us flexibility that we can design a component and use it multiple times with different data. Reusability of components reduces the developers’ stress. Props help developers write cleaner code by defining the component only once. We can keep data and UI separate from each other. And then for rendering, we can pass data using props. Props allow us to use the same component with different data. Like we can pass different data to a function in JavaScript.

Passing Props to a Component

Props are passed as attributes. Any valid JS value can be passed (string, number, object, function) as a prop. You can pass props like this:

You give the attribute a name which will be used to receive the data in the child component. Like in my case, I have given the attribute the name, skillName.

Receiving Props in a Component

Props are received as an argument to the function i.e., component. When the props are passed, React creates an object of props and pass to the function. We can use the props by using dot notation of an object. Like:

const Skill = (props) => {
  return <li>{props.skillName}</li>;
};

export default Skill;

Using Object Destructuring

The props can also be used directly using object destructuring. Like:

const Skill = ({ skillName }) => {
  return <li>{skillName}</li>;
};

export default Skill;

Note: If you haven’t read about object destructuring, you can visit: Destructuring - JavaScript | MDN. Or if you want me to explain, feel free to comment below if you want me to explain it..

Some Important Points About Props

Props are read-only and are immutable (cannot be modified)
You can pass multiple props to a single component

Common Beginner Mistakes

Trying to modify props
Forgetting to pass props
Mismatched prop names
Assuming props are optional

Important Links

Passing Props to a Component – React

Destructuring - JavaScript | MDN

Conditional Rendering in React: A Practical Guide for Beginners

How to Create a React App Using Vite (Step-by-Step Guide for Beginners)

Understanding React Project Structure Created by Vite (Beginner’s Guide)

React Fragments Explained: How to Group Elements Without Extra DOM Nodes

React Components Explained: A Beginner-Friendly Guide with Examples

Conditional Rendering in React: A Practical Guide for Beginners

Ahmad Mahboob — Mon, 22 Dec 2025 14:20:03 +0000

Introduction

Sometimes, we want to render some content in our app based on a certain condition. If a certain condition is not met, we don’t want to render the content. We only want to render the content when a certain condition is met. In this case, we use conditional rendering to render content based on certain conditions.

What is Conditional Rendering in React?

Conditional rendering is a technique used to render specific content based on a condition. We use different methods for conditional rendering. Some of these are given below:

Conditional Rendering Using if-else

An easy way to render conditionally is the traditional if-else in JavaScript. In this method, an if-else is placed before the JSX (return statement) in a React component. This if-else executes the condition. Based on that condition, the relevant code block is rendered. For example, if I have a list. I want to render ‘No item found’ if the list is empty. I can do this by:

function App() {
  const skills = [];

  if (skills.length === 0) {
    return <h3>No Items Found</h3>;
  }

  return (
    <>
      <h4>Skills</h4>
      <ul>
        {skills.map((skill) => (
          <li key={skill}>{skill}</li>
        ))}
      </ul>
    </>
  );
}

export default App;

In this example, the skills array is empty. So, skills.length == 0 is true. So, No Items Found is displayed. As I am returning the message here, so the list will not render.

Why if-else is not Used?

if-else is used, but less often for simple UI. This is because we cannot write if-else in JSX. But for complex conditions, we use if-else for conditional rendering.

Using Conditional Operator

Another method for conditional rendering is by using ternary operator i.e., conditional operator. We use this for inline conditional rendering. This is the most commonly used method for conditional rendering. For example, if I want to implement the same functionality using ternary operator, I can implement it by:

function App() {
  const skills = [];

  return (
    <>
      <h4>Skills</h4>
      {skills.length === 0 ? <h3>No Items Found</h3> : null}
      <ul>
        {skills.map((skill) => (
          <li key={skill}>{skill}</li>
        ))}
      </ul>
    </>
  );
}

export default App;

Conditional Rendering Using Logical Operators

We also use Logical Operators for conditional rendering. We use AND && operator for conditional rendering. AND operator only returns true if both the values are true. Otherwise, it returns false. Let’s consider the example:

In this example, if the value (condition) on the left side of AND operator is true, then it will go to the right-side value and renders it. But if the value on left side is false, it will not move to the right-side value. The above example using Conditional Operator is:

function App() {
  const skills = [];

  return (
    <>
      <h4>Skills</h4>
      {skills.length == 0 && <h3>No Items Found</h3>}
      <ul>
        {skills.map((skill) => (
          <li>{skill}</li>
        ))}
      </ul>
    </>
  );
}

export default App;

Note: Be careful when the left-side value can be 0, because React will render 0 on the screen.

Difference between CSS hide/show and Conditional Rendering

When we use CSS to hide or display an element based on a condition or event, this makes the app more complex. Because we are rendering unnecessary elements and then hiding them. This makes DOM more complex. React Conditional Rendering solves this problem. We’ve already seen how Conditional Rendering works.

Advantages of Conditional Rendering

It enhances user experience.
It reduces unnecessary rendering.
It makes our app more interactive and dynamic.

Best Practices for Conditional Rendering

Keep JSX readable
Extract complex logic
Prefer clarity over clever code
Use meaningful variable names

Conclusion

In this beginner guide, we have covered what Conditional Rendering is, why we use it, its different methods, its advantages and best practices. If this seems complicated at first, don’t worry. That’s natural. Practice regularly and you’ll master it. Practice makes you better over time.

Important Links

Conditional Rendering – React

if...else - JavaScript | MDN

Conditional (ternary) operator - JavaScript | MDN

Logical AND (&&) - JavaScript | MDN

How to Use map() in React (With Simple Examples)

How to Create a React App Using Vite (Step-by-Step Guide for Beginners)

Understanding React Project Structure Created by Vite (Beginner’s Guide)

React Fragments Explained: How to Group Elements Without Extra DOM Nodes

React Components Explained: A Beginner-Friendly Guide with Examples

How to Use map() in React (With Simple Examples)

Ahmad Mahboob — Sun, 21 Dec 2025 14:21:26 +0000

Introduction

map() is a very important method to render lists in React. It helps us render the lists dynamically in the app. The map() solves many problems related to rendering repeated UI elements. We’ll discuss what problems does it solve.

map() in JavaScript

The map() method of Array instances creates a new array populated with the results of calling a provided function on every element in the calling array.

map() is an array function iterating over each element of the array. It creates a new array after performing the specific operation on each element.

What Problems map() Solve?

For better understanding of the map() working and how it is helpful in rendering lists. For example: if I want to render a list of skills in my app. I can do it by writing an un-ordered list or ordered list in a React component. Just like:

This will work. But here’s the catch. In this case, I already know the exact number of list-items. So, I can just copy-paste with the content different. (That’s not recommended and not a good developer practice). In real world applications, we usually don’t know the number of list-items. Or if we know the number of list-items, we should not be iterating ourselves the list items. In that case, we need an iterating function like map(). It makes rendering lists easier for us.

How map() Solves the Problem?

map() allows us to iterate over an array. So, we can first list the items in an array (for this example). For real world applications, you would be fetching the data from a database. And then we can iterate and render each list-item as shown in the code example below:

function App() {
  const skills = ["HTML", "CSS", "JS"];
  return (
    <>
      <h4>Skills</h4>
      <ul>
        {skills.map((skill) => (
          <li>{skill}</li>
        ))}
      </ul>
    </>
  );
}

export default App;

Here, we are using map() to render our skills list. We are iterating over each skill and then rendering it. This solution would have the same effect as manually rendering list. This is efficient in terms that it takes less time to code and is easier to use. Also, it gives us the flexibility that it can render any number of list items i.e., whether it be 3 or 1000. We don’t need to write for each item manually. That’s the advantage of using map().

With this solution, there would be an error/warning message in the console: Each child in a list should have a unique "key" prop.

How to Fix the Console Error?

React wants us to pass a key (a key should be a number or string that can uniquely identify the list-item) to each list item while rendering the list. It is because React uses this key value to manage the list-items. It keeps track of the changes made in the list-item by its key. For beginners, I am not complicating things. So, I just give you the simple solution to the fix the error. (If you want a detailed explanation of how React works and why key is necessary in rendering lists, just comment below to let me know. I will surely bring this soon).

So, for fixing the error, pass the key attribute to each list item as shown in the given example:

<li key={skill}>{skill}</li>

This will fix the error. And now you can render the list without any hesitation. I’ve explained this concept in a simple and beginner-friendly way without going too deep into internal React mechanics. This should help you understand how map() works without confusion.

Note: If you’re learning React, follow me for more beginner-friendly guides.

Conclusion

In this blog, you learnt what is map() in React, how it is useful in rendering lists, what problems exactly the devs face, what is key and how to pass the key value in the list-item.

Important Links

Rendering Lists – React Official Docs

Array.prototype.map() - JavaScript | MDN

Keeping List Items in Order with Key – React official Docs

AhmadCodes

How to Create a React App Using Vite (Step-by-Step Guide for Beginners)

Understanding React Project Structure Created by Vite (Beginner’s Guide)

React Fragments Explained: How to Group Elements Without Extra DOM Nodes

React Components Explained: A Beginner-Friendly Guide with Examples

React Fragments Explained: How to Group Elements Without Extra DOM Nodes

Ahmad Mahboob — Sat, 20 Dec 2025 14:16:09 +0000

In this blog, we will be discussing what React Fragments are. We also discuss the issues that developers face without React Fragments. Then we will see how React Fragments solve our problem. And how React Fragments help us write cleaner and more efficient code.

What are React Fragments?

React Fragments allow the developers to group multiple elements without the need for an extra parent element as a wrapper. We’ll see what it means in the next sections. They were introduced to solve the problem of unnecessary wrapper elements.

What Problems do React Fragments Solve?

For better understanding of what React Fragments solve, first you should know that a return statement in JSX (a React Component) can only return a single parent element. This means that if more than one element is returned, React will throw an error.

For example, if I return two elements as shown in the screenshot below, there occurs an error.

The error says JSX expressions must have one parent element.

How to Fix?

One way to fix this error is by using a wrapper element that wraps the actual elements to be used. For example, you can use <div></div> to wrap the code to make the single parent element returned by the function (component). Like this:

This will work fine. Your code will run without an error. But, this solution creates another problem explained in the next section.

What Problems Occur When Using `<div>` as a Wrapper?

If you look at the code, we are using an extra <div></div> which has no use. This div has no purpose. You can say that this div solves our problem. It is true that it solves our problem But this solution comes with its own costs. It is fine to use if you are using 2-3 components. But in real world application, there are a lot of components. And for each component, if we add an extra div, then we are making the whole DOM complicated. This leads to a cluttered DOM, makes debugging harder, and can cause layout and styling issues—especially in large applications. So, this approach makes our app slow which is not intended in real world applications. So, the question arises, how to solve this?

How React Fragments Solve This?

Now, you have understood what problems the developers are facing. So, to tackle this issue, the concept of React Fragments was introduced. React Fragments allow developers to wrap multiple JSX elements without adding an extra DOM element. So, using React Fragments prevent the use of extra useless elements which are absolutely unnecessary for the application.

Let’s look how exactly React Fragments solve this. To solve this, wrap the component elements within: <React.Fragment></React.Fragment>. For example, I replaced the div with React.Fragment in the above code. Here’s the final code:

import React from "react";
function App() {
  return (
    <React.Fragment>
      <h1>Hello World</h1>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore atque
        itaque eius quia provident tempora sapiente rerum, consequuntur veniam
        sit corporis, amet quae illo repellendus vitae! Libero dolores
        laudantium impedit.
      </p>
    </React.Fragment>
  );
}

export default App;

Note: In older React versions or setups without the new JSX transform, you need to import React to use React.Fragment. In modern React projects (React 17+), this import is often not required. You can import React using this line:

import React from "react";

This will solve our problem without adding any unnecessary element.

Short Syntax:

There’s a short syntax available in React for using React Fragments. This shorter syntax does not require importing React. It can be used without importing React. The shorter syntax is just omitting the words React.Fragment from the wrapper <React.Fragment></React.Fragment. By using shorter syntax, you can use wrap the component in <></>. Here’s the example how to do this:

function App() {
  return (
    <>
      <h1>Hello World</h1>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore atque
        itaque eius quia provident tempora sapiente rerum, consequuntur veniam
        sit corporis, amet quae illo repellendus vitae! Libero dolores
        laudantium impedit.
      </p>
    </>
  );
}

export default App;

Note: I have not imported React while using shorter syntax.

I have tried to cover React Fragments and how to use them in a beginner friendly way by not getting deep into it to avoid confusing beginners. If you want a dedicated detailed blog on React Fragments, Fragments VS div, and advanced explanation, please comment below. I’ll bring the detailed explanation soon.

Important Links:

React - <Fragment> (<>...</>)

How to Create a React App Using Vite Step By Step Guide for Beginners

Understanding React Project Structure Created by Vite (Beginner’s Guide)

React Components Explained: A Beginner-Friendly Guide with Examples

Ahmad Mahboob — Fri, 19 Dec 2025 13:37:49 +0000

Introduction

A React component (functional component) is just a JavaScript function that returns an HTML-like code(JSX — JavaScript XML). It is the core concept in React. It solves many developers’ problems.

Why Components Are Important in React

React component solves the unnecessary repetitions of the same code with a slight change in data. React components are designed to be reused to avoid the unnecessary repetition. Suppose you have to render 4 product cards. The cards are same in design, but the data is different for each product. So, you have to create four cards. That would take a lot of time and energy. That’s boring too. But React understands our worries and makes this easier for us. Now, in the above supposed case, how React solves our problem. With React, you will create only one component as use it for 4 times or any number of times wherever you want to use it in your app. Also, React component ensures UI consistency. Also, by dividing the app into components, the code becomes easy to understand and maintain. For these features, important of React components is not hidden. So, they are absolute necessary and important in our app.

Types of Components in React

There are two main types of React components:

Functional Component

They are modern and recommended way of writing component. Functional components are easy and mostly used today.
```
function Welcome() {
  return <h1>Hello, React!</h1>;
}
```
Class Component

It is an older approach of writing components. It is not used much today in modern apps.
```
class Welcome extends React.Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}
```
Note: If you want a detailed Functional VS Class Component, then comment and I’ll surely bring a detailed comparison soon.

Creating Your First Component

For creating a React component, you follow these steps:

Create a file first in the src/ or src/components/ (Mostly. It is recommended).
Write your component.
Export your component to make it available for use.
Import and use it in your app.

Now, I’ll show how to create your first React component.

First Step: Create a file with an extension .jsx in src/. i.e., create Button.jsx in src/.

Second Step: Write your component in the file i.e.,Button.jsx

function Button() {
  let name = "John Doe";
  return <button>Hello World by {name}</button>;
}

Third Step: Export the component. You can export the component by writing this line at the end of the file (in which you have written your component).

export default Button;

So, your component file would become:

function Button() {
  let name = "John Doe";
  return <button>Hello World by {name}</button>;
}

export default Button;

Fourth Step: Import the component and use it in your app. To import add this line (recommended at the top) of the file where you want to use it:

import Button from "./Button";

Note: ./Button is the relative path of the component file from the file where you are importing.

To use the component, you can use one of these syntax. You can either use this:

<Button></Button>

Or:

<Button />

The final code of the file where I used this component is:

import Button from "./button";
function App() {
  return (
    <div>
      <h1>Hello World</h1>
      <Button />
    </div>
  );
}

export default App;

Now, when you run the React app, your app will have a button as I shown in mine case:

Component Naming Rules

Start the component name with Uppercase letter.
Use one component per file
Use clear names for the components

Common Mistakes to Avoid

Don’t use lowercase component names.
Don’t forget the export statement
Don’t return multiple elements without wrapper

Important Links: