React ES6 Modules

Modules help to split various functionalities of your app into separate files/scripts. You can have different scripts for form validation, logging a user in, and so on.

ES Modules depend on the import and export statements.

Export

This is the way, to export a function or variable from any file. It means to exchange contents between several files one to an other.

There are two types of exports: Named and Default. You can have multiple named exports per module but only one default export.

• Named Exports
• Default Exports

Named Exports

Also named exports can be create two ways In-line individually or all at once at the bottom

Create a file name employee.js

In-line individually : export individual features (can export var, let, const, function, class)

export const name = "Jackson"
export const designation = "developer"
export const salary = "40000"

All at once at the bottom :

const name = "Jackson"
const designation = "developer"
const salary = "40000"

export { name, designation, salary }

Default Exports

Default exports are useful to export only a single object, function, variable. During the import, we can use any name to import. You can only have one default export in a file.

Consider above created, file name employee.js

    const employee = () => {
    const name = "Jackson";
    const designation = "developer";
    const salary = "40000";

  return name + ' is a ' + designation + 'and his salary is' + salary  + ' Rs per week. ' ;
};

export default employee;

Import

Import allows using contents from another file.The basic idea behind imports is to exchange contents between several JavaScript files.

there are two ways to import.

• Importing from default exports.
• Importing from named exports.

Importing default export:

Every module is said to have at most one default export. In order to import the default export from a file, we can use only the address and use the keyword import before it, or we can give a name to the import making the syntax as the following.

import GIVEN_NAME from ADDRESS;

Importing named values:

Every module can have several named parameters and in order to import one we should use the syntax as follows.

import { PARA_NAME } from ADDRESS;

How to apply modules in React.js

We have seen how we can use modules in vanilla JavaScript, let's have look at how you can use them in a React app.

When you create a React application, the App.js component usually acts as the main component. We are going to create another component called User.js with some content about a user.

function App() {
  return (
    <div className="App">

    </div>
  )
}

export default App

This component has just a div without any content.

And here's the User.js component

function User() {
    return (
        <div>
            <h1>My name is Ihechikara.</h1>
            <p>I am a web developer.</p>
            <p>I love writing.</p>
        </div>
    )
}

export default User

you can export your functions at the bottom of the script as we just did. Next, we will import this function into the App.js component:

import User from "./User"

function App() {
  return (
    <div className="App">
      <User/>
    </div>
  )
}

export default App

Just two additions to the script: import User from "./User" which point to the location of the component, and <User/> being the component itself. Now you can reuse the logic in the User.js component across your React Application.