Import Variables from another file in React

avatar

Borislav Hadzhiev

Last updated: Apr 23, 2022

banner

Photo from Unsplash

Import Variables from another file in React #

To import a variable from another file in React:

  1. Export the variable from file A, e.g. export const str = 'hello world'.
  2. Import the variable in file B as import {str} from './another-file'.

Here is an example of exporting two variables from a file called another-file.js.

another-file.js
// 👇️ named export export const str = 'Hello world'; // 👇️ named export export const num = 42;

Here is how we would import the variables in a file called App.js.

App.js
// 👇️ named imports import {str, num} from './another-file'; export default function App() { return ( <div> <h2>Str is: {str}</h2> <hr /> <h2>Num is: {num}</h2> </div> ); }

Make sure to correct the path that points to the another-file.js module if you have to. The example above assumes that another-file.js and App.js are located in the same directory.

For example, if another-file.js was located one directory up, you'd have to import as import {str} from '../another-file'.

We wrapped the name of the variables in curly braces when importing them - this is called a named import.

The syntax we're using to export and import variables is called JavaScript modules.

In order to be able to import a variable from a different file, it has to be exported using a named or default export.

The example above uses a named export and a named import.

The main difference between named and default exports and imports is - you can have multiple named exports per file, but you can only have a single default export.

Let's look at an example of how we would import a variable that was exported using a default export.

another-file.js
const str = 'Hello world'; // 👇️ default export export default str;

And here is how we would import the variable using a default import.

App.js
// 👇️ default import import str from './another-file'; export default function App() { return ( <div> <h2>Str is: {str}</h2> </div> ); }

Notice that we didn't wrap the import in curly braces.

We could have also used a different name when importing the variable, e.g. fooBar.

App.js
// 👇️ default import import fooBar from './another-file'; export default function App() { return ( <div> <h2>Str is: {fooBar}</h2> </div> ); }

This works, but is confusing and should be avoided.

If you are exporting a variable (or an arrow function) as a default export, you have to declare it on 1 line and export it on the next. You can't declare and default export a variable on the same line.

In my experience, most real world codebases exclusively use named exports and imports, because they make it easier to leverage your IDE for autocompletion and auto-imports.
You also don't have to think about which members are exported with a default or named export.

You can also mix and match. Here is an example of a file that uses both a default and a named export.

App.js
const str = 'Hello world'; // 👇️ default export export default str; // 👇️ named export export const num = 42;

And here is how you would import the two variables.

App.js
// 👇️ default and named imports import str, {num} from './another-file'; export default function App() { return ( <div> <h2>Str is: {str}</h2> <hr /> <h2>Num is: {num}</h2> </div> ); }

We used a default import to import the str variable and a named import to import the num variable.

Note that you can only have a single default export per file, but you can have as many named exports as necessary.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.