04-ReactJS Fragment with Video Tutorial in Khmer

Hello my friends! Today let me show you step by step how to use React Fragment and Empty Fragment (<>...</>) in ReactJS! In React, components must return a single root element. Fragment allows us to wrap multiple elements without adding unnecessary extra <div> tags to HTML DOM! Very easy explanation with code examples and video demo in Khmer!

1. The Problem: Unnecessary Extra <div> Nodes

In React JSX, if you want to return multiple elements (like <h1> and <p>), you cannot return them directly without a parent wrapper:

Bad Example (Extra <div> wrapper created in DOM):

import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is React JS Khmer Tutorial.</p>
    </div>
  );
}

export default HelloWorld;

When React renders this component, it creates an unnecessary extra <div> node inside HTML Document Object Model (DOM). This causes DOM bloat and can break CSS Flexbox, Grid layouts, or HTML table structures!

2. Solution: React Fragment (<React.Fragment>)

React Fragment lets you group a list of children elements without adding extra nodes to HTML DOM tree. For details, refer to the React Fragment Official Docs. If you missed the previous lesson on user inputs, catch up on 03 - Basic Event Handling and Form first!

import React from 'react';

function HelloWorld() {
  return (
    <React.Fragment>
      <h1>Hello, World!</h1>
      <p>This is ReactJS Tutorial in Khmer</p>
    </React.Fragment>
  );
}

export default HelloWorld;

3. Fragment Shorthand Syntax (<>...</>)

You don't need to type <React.Fragment> every time! Modern React provides an empty tag shorthand syntax (<>...</>) to keep your code super clean:

import React from 'react';

function HelloWorld() {
  return (
    <>
      <h1>Hello, World!</h1>
      <p>Learn React JS Khmer Tutorial</p>
    </>
  );
}

export default HelloWorld;

💡 Tip: Use shorthand <>...</> syntax everywhere in your components to keep JSX clean and avoid adding extra wrapper <div>s to your DOM tree!

💡 Tip: When mapping lists with .map(), shorthand <> CANNOT accept a key prop! In list loops, you MUST use full <React.Fragment key={item.id}>...</React.Fragment>!

Watch Video: Example of how to use React Fragment in Khmer

💡 Next Lesson: Master state management in 05 - ReactJS State Management (useState)!

---

Hope this tutorial helps you understand React Fragments and shorthand syntax easily! Practice using <>...</> in your components. Happy coding my friends! Sharing is caring!