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 import
, export
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.
export
and default
keywordsThe 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 has introduced builtin support for modules in JavaScript so we don’t need to use the other systems used in ES5 like:
module.exports
for export code and require(path)
to import code),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:
You can use both of them inside the same module but it’s not recommended.
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.
You can use named exports in a module for exporting multiple symbols by simply using the export
keyword 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, App
, Header
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 Header
and 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);
As a wrap-up, we’ve seen how to use the import
, export
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
☞ The Complete React Native and Redux Course
☞ React Native - The Practical Guide
☞ React Native: Advanced Concepts
☞ 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