ReactJS | Importing and Exporting

We have learned so far that React Apps are basically a collection of interactive Components, and from the article on ReactJS Components we have known how to create components but even with that knowledge it will not be sufficient to create a full-fledged React App as in order to create a collection of Components we first need to know the way to use and re-use components that may have been defined elsewhere. 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

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 ways we can use the import operation in React.

  • 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

    And similarly for multiple such imports we can use a comma to seperate two parameter name 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 of the same. In order to import a combination, we should use the following syntax.
    import GIVEN_NAME, { PARA_NAME, ... } from ADDRESS

Exporting

Now, importing is an operation that requires 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 import 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 }

    And similarly for multiple such exports we can use a comma to separate two parameter name within the curly braces.

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

This is the index.js file:

filter_none

edit
close

play_arrow

link
brightness_4
code

// 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')
);

chevron_right


This is change-color.js file:

filter_none

edit
close

play_arrow

link
brightness_4
code

// 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
export default ChangeColor;

chevron_right


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.



My Personal Notes arrow_drop_up

FullStack Developer of six websites Verified Freelancer with 19 complete projects and 4.9 rating Modest Lifelong Learner

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.