Shorthand Syntax for Fragments
React has a shorthand syntax to represent React fragments, that is by replacing “<React.fragment>” with empty angular brackets
“<>…</>” .
Note: Shorthand syntax cannot accept keys or attributes.
// App.js
import React from "react";
function App() {
return (
<>
<FirstComponent />
<SecondComponent />
<ThirdComponent />
</>
);
}
export default App;
React Fragments: Eliminating Unnecessary Divs in the DOM
React Fragments function as wrapper elements that help us to group multiple components without using any additional DOM node. Fragments in React avoid unnecessary div tags or containers which helps in maintaining an efficient DOM structure.
Table of Content
- What are React Fragments?
- Shorthand Syntax for Fragments
- React Fragments and their impact on DOM structure
- React Fragments vs Regular HTML Elements