Default and named exports

As mentioned earlier, ECMAScript 2015, also known as ES6, was a major milestone in the effort to improve standards in the JavaScript language. Among the new features added were modules and the ability to use import expressions. Modules allow us to better organize our code base into logical units. Basically, modules could be a function or related functions designed to perform specific tasks. They make code reusability across projects easier.

In React, we use a default export to make component functions, variables, classes, or objects available to other component files. Only one default export is allowed per file.

For instance, the following code makes it possible to import a file from the Speaker component:

import Speaker from './Speaker';

The following code makes it possible to export the file to another component file:

function App(){
    return (
    <div>  …  ...