What are Import and Export in Javascript .

Export: This statement is used to enable somethings (function,values,variables etc) to be used in other files.

e.g:

src/utils

export let APIKEY = "hhjdjhddfeuikvjkdkjdfhkdfghkdjfhgkfd";

src/App.js

import "./styles.css";

import { APIKEY } from "./utils/apiKey";

export default function App() {

console.log( APIKEY );

return (

<div className="App">

  <h1>Hello CodeSandbox</h1>

  <h2>Start editing to see some magic happen!</h2>

</div>

);

}

There are following two types of export statements:

1.Named Export (as I used in above code): There might be multiple Named Export statements for exporting multiple values,functions,variables etc.

2.Default Export:There must be only one export default value in whole file or component for exporting value,variable,function etc.Because it actually tells that there would that one default value of that component.

Import:This statement enable a file or component to get some values,variables,functions,objects etc from another file/component .

One important thing we must have to know in case of importing something it is that when we importing Named Export Values then we should have to wrap into object and must use the same names as of variable,functions,values as used in file in which they are created and in case of default export we can give any name to value to which we are importing and we don't need to wrap them in object.

e.g;

// importing named exports

src/utils

export let APIKEY = "hhjdjhddfeuikvjkdkjdfhkdfghkdjfhgkfd";

src/App.js

import "./styles.css";

import { APIKEY } from "./utils/apiKey";

export default function App() {

console.log( APIKEY );

return (

<div className="App">

  <h1>Hello CodeSandbox</h1>

  <h2>Start editing to see some magic happen!</h2>

</div>

);

}

// importing Default exports

src/utils

export default "hhjdjhddfeuikvjkdkjdfhkdfghkdjfhgkfd";

src/App.js

import "./styles.css";

import ApiKey from "./utils/apiKey";

export default function App() {

console.log( ApiKey );

return (

<div className="App">

  <h1>Hello CodeSandbox</h1>

  <h2>Start editing to see some magic happen!</h2>

</div>

);

}