Importing and Exporting in React
Some of the early syntax I was made aware of when beginning to learn React were the phrases “import” and “export.” What are these terms and what makes them so important to React? What aspects of React make them necessary? My goal here is to explain them to other people just as I attempt to explain these still-very-new concepts to myself.
Just as in English where “import” and “export” are roughly defined as “to bring in/out across a border” respectively, so too do these words explain a kind of border-crossing in JavaScript land. Here’s a brief example:
In the first example we can see the first instance of importing, when React is “imported” into the file, along with a named “Component” from the ‘react’ path. Then we see a new class getting defined, that of “Button”, when extends, or inherits, from the Component class. This class then renders some JSX. At the bottom we see our first export, a default export, allowing it to be imported by another file.
The second example shows another file where the Button is then being imported from the ‘./Button’ path. It then defines a new class, and renders a button component with a new feature, a red color. Then it is exported at the bottom of the file so that it can be used by another file.
Syntactically the curly braces represent the importing or exporting or a “named” component, versus a default component. Here are some helpful examples I found on StackOverflow:
Default components are useful for when only one component is getting exported from a file, while named components are useful for when multiple components are being exported/imported.
In the first example it’s possible for any “name” to be used for the component when it’s being imported, given that the default export is only one component. While in subsequent examples the exported and imported component is wrapped in braces and the name of the component is required.
So this syntax for importing and exporting is interesting, but why do we import or export at all? My best guess is that React is modular! React apps, like most apps, are composed of different files that adhere to the “separation of concerns” philosophy. Since these files are disconnected, we as developers need a way to pass information from one to the other, without having the inherit the entire file. Here’s a handy, plain old English definition of the word “modular:”
Modular
“Each of a set of standardized parts or independent units that can be used to construct a more complex structure, such as an item of furniture or a building.
‘ships are now built in modules rather than built in a whole from the base up’ ”
OED
React is modular, which means it’s flexible and adaptable but it means that each piece of the application needs a way to connect to itself, and passing of information is largely handled by these two key phrases. It is composed of JavaScript Modules, (which for the sake of clarity I won’t get into here) but suffice it to say that each module will remain separate from the rest of the app unless it is connected in some way or another.
Using the definition of modular above, the best way that I can think about a React app as a whole is as if we as developers were designing a building. While I can imagine designing a building composed of one room (or an app composed of one large file) I can also imagine how messy and disorganized that would be if the building were to be designed for a specific purpose. Separating out the spaces into smaller, separate, rooms would mean that each room could be designed for one purpose, allowing for control over the ingress and egress of people to and from rooms, as well as dictating the functionality of the building itself. In this admittedly loose metaphor, the rooms and floors are components of the app, and the doors and elevators are the imports and exports, controlling the flow of people, or in our case, information.
The larger the building, the more necessity there is for separate and distinct compartments, and separation of concerns. So too, in JavaScript did the need for larger and larger files dictate this need for smaller components, with unique purposes.
Resources:
https://facebook.github.io/create-react-app/docs/importing-a-component
