Monday, August 17, 2020

RENDER MULTIPLE ELEMENTS INSIDE ReactDOM.render()

import React from 'react';
import ReactDOM from 'react-dom';

//It is possible in React V16 to return an array
// of elements in render()

ReactDOM.render(
[
    <h1>REACT</h1>//do not use capital alphabets for JSX
    <p>A JavaScript library for building user interfaces</p>,
    <h3>Get Started</h3>
],
  document.getElementById('root')
);

OR

import React from 'react';
import ReactDOM from 'react-dom';

//In React we can use <React.Fragment>...</React.Fragment> OR <>...</>
// inplace of using <div>...</div> OR array of JSX elements

ReactDOM.render(
<React.Fragment> 
    <h1>REACT</h1>
    <p>A JavaScript library for building user interfaces</p>
    <h3>Get Started</h3>
</React.Fragment>,
  document.getElementById('root')
);

No comments:

Post a Comment

TODO PROJECT IN REACT JS USING ARRAY HOOK, COMPONENT AND SPREAD OPERATOR

 App.jsx import   React , {  useState  }  from   "react" ; import   TodoList   from   "./TodoList" ; const   App  = ()  ...