JSX Rules
- JSX syntax
- To make our life easier as it returns html
- Always return single element. you cannot do as below
- const App = () => {return (<h2> header </h2><h3> header </h3>)};
- You can wrap up with div
- const App = () => {return (<div><h2> header </h2><h3> header </h3></div>);};
- You can wrap with fragment which doesnt add extra node
- const App = () => {return (<React.Fragment><h2> header </h2><h3> header </h3></React.Fragment>);};
- The short syntax of React.Fragmentconst App = () => {return (<><h2> header </h2><h3> header </h3></>);};