ReactJS – import and export components using React And ES6

In this import and export components reactjs tutorial, we will dive into how to call one function into another file to enhance site functionality and code reuse.

Have a look at below examples to get more understanding on import & export functions.

Let’s create a person.js file and put below code where we export the component.

Export ReactJs Example


const person = () => {
  return name: 'blogindices';
}

export default person;

Here you need to return the person function data and export the person so, other file/components can access person data that is returning by person.js components.

Another Import and Export Example

In this example make a file utility.js and add two const in the same file like below:

export const clean = () => {

}

export const hello = 10;

Now create a importconst.js file to get import all const function, variable and names.

Import ReactJs Example

import per from 'Person.js'

import {clean} from 'utility.js';
import {hello} from 'utility.js';

In the above example, you can see person.js file has one const so, you can call that by per object but in the utility.js you need to call the name from the file in {}.

You can use import in many ways like showing in below exmple:

import blogind from 'utility.js';
import {blogind as bl} from 'utility.js';

Hope you are understanding the idea of how to export or import in react and output will come. If you are looking into more React web tutorial, you can join us on FB social channels.

Stay in touch. Ask Questions.
Lean on us for help, strategies and expertise.

Leave a Reply

Your email address will not be published. Required fields are marked *