ReactJS | Importing and Exporting - GeeksforGeeks

29 Jan, 2021
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 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 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 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 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 names 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:  
javascript
// Importing combinationimport React, {Component} from 'react';// Importing Moduleimport ReactDOM from 'react-dom';import ChangeColor from './change-color.js';// Importing CSSimport './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:  
javascript
// Importing combinationimport 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 componentexport default ChangeColor;
Output:
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. 
nidhi_biet
shubhamyadav4
react-js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
How to create footer to stay at the bottom of a Web page?
Differences between Functional Components and Class Components in React
Node.js fs.readFileSync() Method
How to set the default value for an HTML <select> element ?
File uploading in React.js
How to set input type date in dd-mm-yyyy format using HTML ?