Importing and Exporting with JavaScript & React

import-export.md

Importing and Exporting with Javascript & React ⚡

There are generally two different types of imports & exports when working with JavaScript these are commonly used with React.js.

They are:

• Default Imports and Exports.
• Named Imports and Exports.

There are a couple of exceptions these more specifically to do with React.

They are:

• Importing and using Images.
• Importing and Applying Styles.

---

Default Import and Export

This is useful when you have one function or a functional component or an object or an array that you need to export / import from a file.

You are only aloud one default export from a file!

Exporting

At the end of the file you define what you want to export using the export keyword, you then use the default keyword, finally the name of the thing you want to export.

All together is would look somthing similar to export default whatYouWantToExport.

Examples

These would all need to be seperate files as you can only have one default export from a file.

// ExampleComponent.js
const ExampleComponent = () => {
  return <p>Hello world!</p>
}

export default ExampleComponent;

// exampleFunction.js
const exampleFunction = () => console.log("Hello world");

export default exampleFunction;

// exampleArray.js 
const exampleArray = [0, 1, 2, 3, 4];

export default exampleArray;

// exampleObject.js 
const exampleObject = { firstName : "Charlie" };

export default exampleExport;

Importing

To use a default import at the top of the file you use the import keyword, you then state a name. The convention is to use the same name as the item you are importing.

You then use the from keyword, after that you give it a string which is the path to the file that is exporting it.

An example of it all together would look like import whatYouWantToExport from "path/to/where/the/file/is";

Examples

If we were to import the default exported files above it might look like this.

import ExampleComponent from "path-to-file";

// WE CAN USE THE IMPORTED COMPONENT IN THIS FILE
<ExampleComponent />

import exampleFunction from "path-to-file";

// WE CAN USE / CALL THE IMPORTED FUNCTION IN THIS FILE
exampleFunction();

import exampleArray from "path-to-file";

// WE CAN USE THE IMPORTED ARRAY IN THIS FILE
exampleArray[0];

import exampleObject from "path-to-file";

// WE CAN USE THE IMPORTED ARRAY IN THIS FILE
exampleObject.firstName

---

Named Imports & Exports

This is useful when you have multiple functions or a objects or arrays that you need to export / import from a file.

The name you export needs to match the name you use when you import!

Exporting

Infront of the variable / function you want to export use the export keyword and that is all.

Examples

You can have as many named exports as you like, all of the examples below could be exported from one file.

export const exampleFunction = () => console.log("Hello world");

export const exampleArray = [0, 1, 2, 3, 4];

export const exampleObject = { firstName : "Charlie" };

Importing

To use a named import at the top of the file you use the import keyword, you then open curly braces inside you state the name of the thing you want to import { thingToImport }.

You then use the from keyword, after that you give it a string which is the path to the file that is exporting it.

An example of it all together would look like import { thingToImport } from "path/to/where/the/file/is";

If you have multiple items from that file to import seperate them with a comma import { thingToImport, otherThing } from "path/to/where/the/file/is";

Examples

If we were to import the named exported files above it might look like this.

import { exampleFunction, exampleArray, exampleObject} from "path-to-file";

// WE CAN USE / CALL THE IMPORTED FUNCTION IN THIS FILE
exampleFunction();

// WE CAN USE THE IMPORTED ARRAY IN THIS FILE
exampleArray[0];

// WE CAN USE THE IMPORTED ARRAY IN THIS FILE
exampleObject.firstName

---

Importing and using an Image

This is similar to a default import statement.

The only difference is how you use the image you have imported.

import nameOfImage from "path-to-file";

// YOU CAN NOW USE IT AS THE IMG SRC FOR YOUR JSX ELEMENT
<img src={nameOfImage} />

---

Importing and Applying Styles

This is for when you want to apply your styles to your component.

For this you use the import keyword then the path to the styles you want to apply.

import "./path-to-styles";

const ExampleComponent = () => {
  return <p>Hello World!</p>
}

If you are using SCSS and you want to import another file remember to use @use.

---

Links

• MDN