DEV Community

Cover image for Differnce between import , export , export default in React
JustinW7
JustinW7

Posted on

Differnce between import , export , export default in React

In React (and in JavaScript/ECMAScript modules in general), import, export, and export default are used for modularizing code and managing dependencies. Here's a brief explanation of each:

Import: The import statement is used to import functionalities (variables, functions, classes, etc.) from other modules into the current module. It allows you to use the exported members of other modules within the current module. You can import specific named exports or import the entire module.

Example of importing a named export:

import { Component } from 'react';
Example of importing the entire module:

import React from 'react';
Export: The export statement is used to export functionalities (variables, functions, classes, etc.) from a module, making them available for other modules to import. There are two main types of exports:

Named Exports: You can export variables, functions, classes, etc., using the export keyword followed by the name of the item being exported.
Default Exports: You can export a single value or functionality as the default export using the export default syntax. Each module can have only one default export.
Example of named export:

export const myFunction = () => { /* function code */ };
Example of default export:

const myComponent = () => { /* component code */ };

export default myComponent;
Export Default: The export default statement is used to export a single value or functionality as the default export from a module. When you import a module that has a default export, you can choose any name for the default import.

Example of exporting a default component:

const MyComponent = () => { /* component code */ };
export default MyComponent;
Example of importing a default export:

import MyComponent from './MyComponent';
In summary, import is used to bring in functionality from other modules, export is used to make functionalities available for other modules to import, and export default is used to export a single value or functionality as the default export from a module.

Top comments (0)