What is Fragment in React JS - Tutorial in Khmer

In ReactJS if we want to return multiple html element like example below ( <h1> and <p>) tags, we usually wrap (group) our content with <div> tag to avoid error.

  import React from 'react';

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

  export default HelloWorld;
 

The code above make React to render extra node ( <div> tag) to the DOM (Document object Model).

Fragment

React use Fragment to group a list of children elements without adding extra nodes.

Example of how to use React Fragment speak Khmer:

  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;

Example React Fragment in Khmer

Fragment shorthand

This shorthand make your code more cleaner

  import React from 'react';

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

  export default HelloWorld;