ES6 Modules - Import, Export & Default for React Native Devs

ES6 Modules - Import, Export & Default for React Native Devs

ES6 Modules - Import, Export & Default for React Native Devs

Originally published at techiediaries.com on 08 Aug 2019

I have been exploring React Native for building mobile apps with React and JavaScript. After generating my first project and started looking at the code, I noticed the use of the ES6 modern features like the import and export statements for importing and exporting modules and arrow functions, etc.

In this article, we'll focus on understanding the importexport and default keywords.

In the App.js file, we have the following code, truncated for the sake of brevity:

import React, {Fragment} from 'react';
/* [...] */

const App = () => { return ( <Fragment> <!-- [...] --> </Fragment> ); };

/* [...] */

export default App;

In this file, we first import the React and Fragment APIs from the react package, next, we define a function-based React component that renders a bunch of React Native components. Finally, we export the App component using the export default statement.

The export and default keywords

The export keyword is used to export the symbol but what about the default keyword?

Simply put, when you export a symbol as default, you don't need to specify its name (pay attention here, this is the name used inside the module for the symbol) when you need to import it.

Now, if we look at the index.js file, we'll see the following code:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

This is where our exported App component is imported using the import keyword:

import App from './App';

We can use any name instead of App and will be still importing the App component. Because it's exported by default. For example, we can write the following instead:

import MyApp from './App';

MyApp will be an alias for the App symbol (which is exported by default so we don't need to specify its "internal" name to import it).

I hope, you understand the meaning of default because it may be confusing since developers usually use the same name used inside the module to import from another JS file. In our example, we used the App name for importing the App component from the App.js file.

If you want to learn more about ES6 modules, continue reading below.

ES6 Modules

ES6 has introduced builtin support for modules in JavaScript so we don't need to use the other systems used in ES5 like:

  • CommonJS modules used in Node.js (CommonJS modules use module.exports for export code and require(path) to import code),
  • Asynchronous Module Definition (AMD) used in RequireJS.

For more information, read Writing Modular JavaScript With AMD, CommonJS & ES Harmonyand Axel Rauschmayer’s ExploringJS: Modules.

Now, what's a module?

A module is a piece of code that encapsulates the code for specific functionality. It makes it easy to write decoupled and easy maintainable and testable code.

You can create a JavaScript module by simply creating a JavaScript file with the js extension and use the export keyword for exporting a piece of code (a symbol) such as a function, object or variable. .

Note: Unlike CommonJS modules which are loaded synchronously, ES6 Modules are loaded asynchronously which is better suited for the frontend code.

In ES6, you can export a symbol in two ways:

  • Using named exports,
  • Default exports.

You can use both of them inside the same module but it's not recommended.

Default Export

Just like we've seen earlier, you can make a default export by using the export and default keywords in front of the symbol. Since it's the default export, you don't necessarily need to import it using the same name in your other JavaScript files but it is a common case to import default exports with the same names which were used to define them inside their modules.

Named Export

You can use named exports in a module for exporting multiple symbols by simply using the exportkeyword in front of each symbol. These exports can be distinguished from each other using their names and are called named exports.

We can change our App.js file as follows:

import React, {Fragment} from 'react';
/* [...] */

export const App = () => { return ( <Fragment> <!-- [...] --> </Fragment> ); };

/* [...] /

We simply remove the default keyword to make a named export instead of a default export.

We can then import the App component in the index.js file as follows:

import { App } from  './App';

First, we used the curly braces (ES6 destructuring assignment) and second we need to specify the same name used in the containing module i.e App.

If you have more than one named export. For example, AppHeader and Footer, you can write the following statement to import them:

import { App, Header, Footer } from  './App';

If you have a default export (for example the App function) and named exports (for example the Headerand Footer components), you can import them as follows:

import App, { Header, Footer } from  './App';

You can also import all the exported symbols using  and as:

import * as app from './App';

You can then access each named export as a property:

console.log(app.App);
console.log(app.Header);
console.log(app.Footer);

Conclusion

As a wrap-up, we've seen how to use the importexport and default keywords for working with ES6 modules in React Native.

Originally published at techiediaries.com on 08 Aug 2019

=======================================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ The Complete React Native and Redux Course

☞ React Native - The Practical Guide

☞ React Native: Advanced Concepts

☞ Understanding TypeScript

☞ Typescript Masterclass & FREE E-Book

☞ React - The Complete Guide (incl Hooks, React Router, Redux)

☞ Modern React with Redux [2019 Update]

☞ The Complete React Developer Course (w/ Hooks and Redux)

☞ React JS Web Development - The Essentials Bootcamp

☞ React JS, Angular & Vue JS - Quickstart & Comparison

☞ The Complete React Js & Redux Course - Build Modern Web Apps

☞ React JS and Redux Bootcamp - Master React Web Development

javascript react-native es6

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

Build a simple React Native Pokemon app with React-Navigation

As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology.

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.