Import/Export JSX ES6
Sun Jun 18 2023 17:09:40 GMT+0000 (Coordinated Universal Time)
Saved by
@sarfraz_sheth
#react.js
---------------- App page ------------------------------------
import Heading, { SubHeading, SubHeading2 } from "./Heading"
// optional you can use import * as NameYouWant from "./root"
// when using the when call the function use NameYouWant.NamOfFunction
------------------- Heading Page -------------------------
function Heading() {
return (
<div>
<h1>This is My Componente Heading</h1>
<h2 style={customStyle}>{greeting}</h2>
</div>
);
}
function SubHeading() {
return (
<ul>
<li>This is the Subheading 1</li>
</ul>
);
}
function SubHeading2() {
return (
<ul>
<li>This is the second Subheading 2</li>
</ul>
);
}
export default Heading;
export { SubHeading, SubHeading2 };
content_copyCOPY
the default export does not need to be exact name as in the export expresion, but the others export componenets need to be exact name when importing
Comments