Importing and Exporting React Components

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....

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....

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....

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....