Open In App

React Importing and Exporting Components

Last Updated : 01 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

React Importing and Exporting Components are two major operations that enable the re-use of the components to create a collection of components and hence a complete application.

Importing and Exporting React Components

We have learned so far that React Apps are a collection of interactive Components, and from the article, on React Components. we know how to create components but even with that knowledge, it will not be sufficient to create a full-fledged React App. To do so we need to know two operations broadly known as Importing and Exporting.

We may not have told earlier, but we have been using the import operation in every one of our previous articles when we were importing react and react-dom itself. Similarly, we can also import user-defined classes, components, or even a part of the same. Let us shift our discussion over Importing.

Importing a React Component

The world of JavaScript is always moving and one of the latest ES2015 now provides a more advanced module importing/exporting pattern. In previous engines, the developer had to use the module.exports = { // Define your exports here. }, but now with ES2015 every module can have a default export or may export several named parameters, and if it is possible to export it will surely be possible to import the same. Thus, with ES2015 every module may import the default export or several named parameters or even a valid combination. 
React uses the same features as mentioned above, and you may treat each React Component as a module itself. Thus, it is possible to import/export React Components, and is one of the basic operations to be performed. In React we use the keyword import and from to import a particular module or a named parameter. 

Let us now see the different methods of importing ReactJS components.

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

Similarly, for multiple such imports, we can use a comma to separate two-parameter names within the curly braces.

Importing a combination of Default Exports and Named Values:

The title makes it clear what we need to see is that the syntax is the same. In order to import a combination, we should use the following syntax. 

import GIVEN_NAME, { PARA_NAME, ... } from ADDRESS

Note: When importing we sometimes come across files that have .js extensions like Color.js, when importing we can follow any of the below-given syntaxes:

import Color from './Color.js'
// OR
import Color from './Color'

In the above syntax both the codes work correctly because ES Modules working allows importing in both the ways

Exporting a React Component

Now, importing is an operation that requires the permission of the module. Importing is possible only if the module or named property to be imported has been exported in its declaration. In React we use the keyword export to export a particular module or a named parameter or a combination. 

Let us now see the different ways we can use the export operation in React.

Exporting default export:

We have already learned that every module is said to have at most one default export. In order to export the default export from a file, we need to follow the syntax described below. 

export default GIVEN_NAME

Exporting named values:

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

export { PARA_NAME }

Similarly, for multiple such exports, we can use a comma to separate two-parameter names within the curly braces.

React Importing and Exporting Components Example:

Let us see it in the example below where we would use the import and export operations in several ways. Let there be two files, one index.js, and the other change-color.js. Let us see how to implement the import and export operations. 

javascript




// Filename - src/index.js
 
// Importing combination
import React, {Component} from 'react';
 
// Importing Module
import ReactDOM from 'react-dom';
import ChangeColor from './change-color.js';
 
// Importing CSS
import './index.css';
 
class App extends Component {
    render()
    {
        return (<div><h2>Welcome to</h2>
        <ChangeColor title="GeeksforGeeks" /></div>);
    }
}
 
ReactDOM.render(
  <App/>,
  document.getElementById('root')
);


This is the change-color.js file exporting component as default export: 

javascript




// Importing combination
import React, {Component} from 'react';
 
class ChangeColor extends Component {
    constructor(props)
    {
        super(props);
        this.state = { color : '#4cb96b' };
    }
 
    getClick()
    {
        if (this.state.color === '#4cb96b')
            this.setState({ color : '#aaa' });
        else
            this.setState({ color : '#4cb96b' });
    }
 
    render()
    {
        return <h1 style = { this.state }
                   onClick = {this.getClick.bind(this)}>
               {this.props.title} < /h1>
  }
 
// Exporting the component as Default export
export default ChangeColor;


Output:

React Import and export component example - output

Explanation:

The codes above generate the following App which on clicking the “GeeksforGeeks” changes the text color of it. It is illustrated in the figure below. 

Now apparently we have completed all the basic requirements to create a basic yet presentable app of our own. Stay tuned to create one for yourself.
 



Similar Reads

JavaScript Importing and Exporting Modules
JavaScript Modules are basically libraries which are included in the given program. They are used for connecting two JavaScript programs together to call the functions written in one program without writing the body of the functions itself in another program. Importing a library: It means include a library in a program so that use the function is d
3 min read
Foundation CSS XY Grid Importing
Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. The XY Grid system is a 12-column grid system based on flexbox. The XY grid structure is similar to t
2 min read
Foundation CSS Float Grid Importing
Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. The Float Grid system is a 12-column grid system based on flexbox. Importing: We need to some changes
2 min read
Foundation CSS Flex Grid Importing
Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. Flex Grid is nothing but a grid system that’s formed on the flex property that permits the responsive
2 min read
How do Styled Components work in terms of styling React components?
Styled Components is a library for React and React Native that allows you to write CSS in your JavaScript code in a more component-oriented way. Working of Styled Components:Component-Based Styling: Styled Components allow you to write actual CSS directly into your JavaScript files using tagged template literals. This means you can define styles fo
2 min read
Migrating from Class Components to Functional Components in React
React version 16.8.0 or higher allows users to write the functional components without the use of class components. Using class components, we need to write the whole class to interact with the state and lifecycle of the component. The code was quite complex and harder to understand which led to lower performance and limited usability. With the hel
4 min read
Differences between Functional Components and Class Components
In this article, we will learn about the differences between functional and class components in React with the help of an example. We will create a counter and implement it using both class and functional components to understand the differences practically. Functional Components Functional components are some of the more common components that wil
4 min read
How does React.memo() optimize functional components in React?
React.memo() is a higher-order component provided by React that can help optimize functional components by reducing unnecessary re-renders. Let's explore how it works and how it optimizes functional components: Table of Content Optimizing with React.memo()When to use React.memo() ?Benefits of memoization using React.memo()How to use React.memo() ?C
4 min read
Why it is Recommended to use Functional Components over Class Components ?
In this article, we will learn about the use of the functional component over the class component. In React JS, there are two main types of components:  Functional Components Class Components.Functional Components are JavaScript functions that take in props as an argument and return a React element to be rendered. They are simpler and less verbose
4 min read
Use nested Components With Standalone Components in Angular 17
Angular 17 introduced a new feature called Standalone Components, which allows you to create self-contained components that can be used independently without being tied to a specific module. This feature can make your code more modular and easier to maintain. However, when working with Standalone Components, you might need to nest components within
3 min read