IMPORT - EXPORT

 IN REACT,WE HAVE WEBPACK THAT ENABLES IMPORT AND EXPORT.

IMPORT

import component_name from file_name

import("./App.css");
import Title from "./TItle.jsx";

function App() {
 
  return (
      <Title />
  );
}

export default App;

EXPORT

WE CAN EPORT FILES IN 2 WAYS,

1. DEFAULT EXPORT

2. NAMED EXPORT


DEFAULT EXPORT

WE USE DEFAULT EXPORT,WHEN WE HAVE A SINGLE VALUE THAT HAS TO BE EXPORTED AND IT MIGHT HAVE A CUSTOM NAME IN ANOTHER FILE.

export default component_name;

THE App COMPONENT FROM App.jsx IS EXPORTED AND IT IS IMPORTED IN main.jsx

export default App;


NAMED EXPORT

WHEN WE HAVE TO EXPORT MULTIPLE COMPONENTS.

function Title() {
  return <h2>This is the TITLE!!!</h2>;
}

function Sum(a, b) {
  return a + b;
}
export { Title, sum };


IT IS IMPORTED AS,

import {Title,Sum} from "./TItle.jsx";

 IN BOTH CASES, THE CODE WORKS PERFECTLY.

IN SUMMARY, NAMED EXPORTS ARE USEFUL WHEN YOU WANT TO EXPORT MULTIPLE VALUES AND IMPORT THEM WITH THEIR SPECIFIC NAMES.

WHILE DEFAULT EXPORTS ARE USED FOR EXPORTING A SINGLE VALUE AND GIVING IT A CUSTOM NAME WHEN IMPORTING.

THE CHOICE BETWEEN THE TWO DEPENDS ON THE STRUCTURE AND REQUIREMENTS OF YOUR CODEBASE.





Comments

Post a Comment

Popular posts from this blog

DEPENDENCIES IN useEffect()

Image
 DEPENDENCIES REFER TO STATE VARIABLES. WHATEVER VARIABLE DECLARED AS A DEPENDENCY WILL ONLY BE PERFORMED AS A SIDE EFFECT. WE DECLARE THEM AS ARRAYS IN TWO  WAYS,  [COUNTX] - MEANS THAT ONLY COUNTX WILL BE USED AS A SIDE EFFECT. [] - EMPTY , MEANS THAT SIDE EFFECT IS PERFORMED ONLY WHEN THE PAGE IS RENDERED ( NOT RE-RENDERED). ( IN THE BEGINNIG)  EX- WE CREATE TWO STATE VARIABLES, COUNTX AND COUNT Y , HERE WE ONLY ADD SIDE EFFECTS TO COUNT X. import { useEffect , useState } from "react" ; export default function Counter () {   let [ countx , setCountx ] = useState ( 0 );   let [ county , setCounty ] = useState ( 0 );   let incx = () => {     setCountx (( currCount ) => currCount + 1 );   };   let incy = () => {     setCounty (( currCount ) => currCount + 1 );   };   useEffect ( function PrintSomething () {     console . log ( "this is a side effect" );   },[ co...
Read more

ACTIVITY1

Image
 SHOW A HELLO MESSAGE  ALONG WITH THE USERNAME WITH THE GIVEN TEXT COLOR. TWO PROPS ARE GIVEN, USERNAME AND TEXTCOLOR. ACTIVITY1.JSX function Activity1 ({ userName , textColor }) {   let styles = { color : textColor };   return < h3 style = { styles } > Hello! { userName } </ h3 > ; } export default Activity1 ; APP.JSX import Activity1 from "./Activity1.jsx" ; function App () {   // let name = "abhi";   // return <ProductTab />;   return (     <>     < Activity1 userName = "abhii" textColor = "yellow" />     < Activity1 userName = "ashwith" textColor = "orange" />     < Activity1 userName = "bharath" textColor = "red" />     < Activity1 userName = "vinay" textColor = "red" />     </>   ) }
Read more

CONDITIONALS

Image
 CONDITIONAL STATEMENTS (IF) CAN BE PASSED AS TERNARY OPERATORS OR EVEN BY USING(  &&) LOGICAL AND OPERATOR. import "./Product.css" ; function Product ({ title , price , features }) {   return (     < div className = "Product" >       < h4 > { title } </ h4 >       < h5 > price: { price } </ h5 >       { price > 15000 ? < p > Discount of 5% </ p > : null }       { /* <p>{features.map((feature) => <li>{feature}</li>)}</p> */ }     </ div >   ); } export default Product ; LOGICAL AND OPERATOR.       { price > 15000 && < p > Discount of 5% </ p > }
Read more