Understanding imports and exports

import and export statements allow JavaScript to be structured into modules.

This section will start by covering why JavaScript modules are important and then how to define and use them using import and export statements. We will then use that knowledge to add the alert component to the React component tree in the CodeSandbox project.

Understanding the importance of modules

By default, JavaScript code executes in what is called the global scope. This means code from one file is automatically available in another file. Unfortunately, this means that the functions we implement can overwrite functions in other files if the names are the same. You can imagine how this structure quickly becomes challenging and risky to maintain.

Thankfully, JavaScript has a modules feature. A module’s functions and variables are isolated, so functions with the same name in different modules won’t collide. This is a much safer way to structure code and is common practice when structuring React apps.

Next, we will learn about how to define modules.

Using export statements

A module is a file with at least one export statement. An export statement references members that are available to other modules. Think of this as making members publically available. A member can be a function, a class, or a variable within the file. Members not contained within the export statement are private and not available outside the module.

The following code statement is an example of a module with its export statement highlighted. This is called a named export statement because the public members are explicitly named:

function myFunc1() {
  ...
}
function myFunc2() {
  ...
}
function myFunc3() {
  ...
}
export { myFunc1, myFunc3 };

In the example, the myFunc1 and myFunc3 functions are public, and myFunc2 is private.

Alternatively, the export keyword can be added before the function keyword on the public functions:

export function myFunc1() {
  ...
}
function myFunc2() {
  ...
}
export function myFunc3() {
  ...
}

We will use the export keyword approach in this book because it is immediately apparent which function is public. With the single export statement at the bottom of the file, you have to keep going to the bottom of the file to find out whether a function is public.

A default export statement can be used to export a single public member. Like named exports, this comes in two variants. The first variant is where the export statement is defined at the bottom of the module:

export default myFunc1;

The default keyword signifies that the export is a default export statement.

The second variant is where the export and default keywords are added in front of the member:

export default function myFunc1() {
  ...
}

This book will generally use named exports rather than default exports.

Next, we will learn about import statements.

Using import statements

Using an import statement allows public members from a module to be used. Like an export statement, there are named and default import statements. A default import statement can only be used to reference a default export statement.

Here is an example of a default import statement:

import myFunc1 from './myModule';

The default exported member from the myModule.js file is imported and named myFunc1.

Note

The name of an imported default member doesn’t necessarily need to match the name of the default exported member, but it is common practice to do so.

Here is an example of a named import statement:

import { myFunc1, myFunc3 } from './myModule';

Here, the myFunc1 and myFunc3 named exported members from the myModule.js file are imported.

Note

Unlike default imports, the names of imported members must match the exported members.

Now that we understand how to structure JavaScript code into modules, we will use this knowledge to add the alert component in the CodeSandbox project to the React component tree.

Adding Alert to the App component

Going back to the Alert component in our CodeSandbox project, we will reference Alert in the App component. To do this, carry out the following steps:

1. First, we need to export the Alert component. Open Alert.js and add the export keyword before the Alert function:

   export function Alert() {
     ...
   }

Note

It is common practice to have each React component in a separate file and, therefore, a separate module. This prevents files from becoming too large and helps the readability of the code base.

2. Now we can import Alert into the App.js file. Open App.js and add the highlighted import statement at the top of the file:

   import { Alert } from './Alert';
   import "./styles.css";
   export default function App() {
     ...
   }

3. We can now reference Alert in the App component’s JSX. Add the highlighted line inside the div element, replacing its existing content:

   export default function App() {
     return (
       <div className="App">
         <Alert />
       </div>
     );
   }

The component will display the following in the Browser panel:

Figure 1.2 – The alert component in the Browser panel

Nice! If you have noticed that the alert component isn’t styled nicely, don’t worry – we will learn how to style it in Chapter 4, Approaches to Styling React Frontends.

Here’s a recap of a couple of key points in this section:

• React apps are structured using JavaScript modules to help the code base be maintainable.
• Generally, a React component is structured in its own module and so needs to be exported and imported before being referenced in another React component.

Next, we will learn how to make the alert component a little more flexible.