Fragment example2 in react js

• Create Components folder under src folder
• Add FragmentsEXP2.js file and add below Code

import React, { Component } from "react";

class FragmentsEXP2 extends Component {

render() {

return (

<>

<div>Fragment EXP 2</div>

<div>Div 1</div>

<div>Div 2</div>

<div>Div 3</div>

</>

);

}

}

export default FragmentsEXP2;

• Open App.js file and update code as below\

import React from "react";

import ReactDOM from "react-dom";

import FragmentsEXP2 from "./components/FragmentsEXP2";

function App() {

return (

<div className="App">

<FragmentsEXP2 />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

Fragment example1 in react js

• Create Components folder under src folder
• Add FragmentsEXP1.js file and add below Code

import React, { Fragment, Component } from "react";

class FragmentsEXP1 extends Component {

render() {

return (

<Fragment>

<div>Fragment EXP 1</div>

<div>Div 1</div>

<div>Div 2</div>

<div>Div 3</div>

</Fragment>

);

}

}

export default FragmentsEXP1;

• Open App.js file and update code as below\

import React from "react";

import ReactDOM from "react-dom";

import FragmentsEXP1 from "./components/FragmentsEXP1";

function App() {

return (

<div className="App">

<FragmentsEXP1 />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output: