{"id":2716,"date":"2021-08-24T01:20:00","date_gmt":"2021-08-24T06:20:00","guid":{"rendered":"http:\/\/upmostlymulti.onpressidium.com\/?p=2716"},"modified":"2022-10-28T11:03:08","modified_gmt":"2022-10-28T16:03:08","slug":"react-import-component","status":"publish","type":"post","link":"http:\/\/upmostly.com\/tutorials\/react-import-component","title":{"rendered":"Importing Components in React From Other Files: Step-by-Step Tutorial"},"content":{"rendered":"
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n

React allows you to build very complex applications. But as your applications grow in size, your code can become messy and difficult to build on.<\/p>\n\n\n\n

Sometimes, we’d like to split different React components into logically separated files. This act of separating functionality is a common operation in almost any programming language, from Python to C++. <\/p>\n\n\n\n

In this article, we will cover how to split React components into different files, and enable them to reference each other. By the end of this article, you’ll know how to import class components and functional components in React<\/a> as well as understand a key limitation. <\/p>\n\n\n\n

Background: Multi-file JavaScript<\/h2>\n\n\n\n

Since React is a JavaScript library, much of the programming is done in the exact same way across the two. Imports are no exception. <\/p>\n\n\n\n

We’ll see a quick example of importing functions and classes from other files in JavaScript below:<\/p>\n\n\n\n

In a file named importFrom.js:<\/span><\/strong><\/p>\n\n\n\n

importFrom.js<\/div>
function<\/span> printToScreen<\/span>(<\/span> message )<\/span> {<\/span>\r\n    console.<\/span>log<\/span>(<\/span> message )<\/span>;<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> {<\/span> printToScreen }<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
Then, in a file named import.js<\/span><\/strong>:<\/p>\n\n\n\n
import.js<\/div>
import<\/span> {<\/span> printToScreen }<\/span> from<\/span> \".\/importFrom\"<\/span>;<\/span>\r\n\r\nprintToScreen<\/span>(<\/span> \"Test Message\"<\/span> )<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
When import.js<\/span><\/strong> is run, “Test Message” is logged to the console. Let’s walk through the different key parts of this example.<\/p>\n\n\n\n
In importFrom.js<\/span><\/strong>, we define the function printToScreen<\/em><\/strong> as you’d expect, with a very simple execution. Then, we use the keyword “export” followed by a set of curly braces “{}” with the function printToScreen<\/em><\/strong> within. <\/p>\n\n\n\n
This exposes the function printToScreen<\/em><\/strong> to the directory, so that other files can reference the function. Then, in import.js<\/span><\/strong>, we use the “import” keyword to reference the printToScreen<\/em><\/strong> function in importFrom.js<\/span><\/strong>. <\/p>\n\n\n\n
Notice how we use curly braces “{}” here as well, and put the function we’d like to import, printToScreen<\/em><\/strong>, within. This allows us to reference the function as if it was written directly in the file. <\/p>\n\n\n\n
Notice also how we use the relative path of the file, “.\/importFrom”. This means that we are importing from the same directory. <\/p>\n\n\n\n
We then use the function we imported to print “Test Message” to the console. <\/p>\n\n\n\n
Functional Component Imports in React<\/h2>\n\n\n\n
In React, importing is the same as in vanilla JavaScript. Let’s do a similar example to the one above, but instead of printing “Test Message” to the console, we’ll render it to the screen:<\/p>\n\n\n\n
In the file App.js<\/span><\/strong> automatically generated by the create-react-app<\/strong> command: <\/p>\n\n\n\n
App.js<\/div>
import<\/span> {<\/span> ImportComponent }<\/span> from<\/span> '.\/ImportElement'<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n  return<\/span> (<\/span>\n    <<\/span>ImportComponent<\/span> \/><\/span><\/span>\n  )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
Then, in a file called ImportElement.js <\/span><\/strong>in the same directory:<\/p>\n\n\n\n
ImportElement.js<\/div>
function<\/span> ImportComponent<\/span>(<\/span>)<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n        <<\/span>div<\/span>><\/span><\/span>\r\n            Test Message\r\n        <\/span><\/<\/span>div<\/span>><\/span><\/span>\r\n    )<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> {<\/span> ImportComponent }<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
We can see many similarities when importing the functional component ImportComponent.<\/em><\/strong> The import <\/em>and export<\/em> keywords are used in the exact same way.<\/p>\n\n\n\n
Since we are using JSX, we can call ImportComponent<\/em><\/strong> just by typing “<ImportComponent \/>”, rather than needing to call the function itself explicitly. <\/p>\n\n\n\n
Of course, there is a difference in ImportElement.js<\/span><\/strong> as well, as the function must return a JSX component instead of just printing to the console. <\/p>\n\n\n\n
Otherwise, we see that the React and JavaScript imports are identical. <\/p>\n\n\n\n
Class Component Imports in React<\/h2>\n\n\n\n
What about class component imports? <\/p>\n\n\n\n
We’ll first see an example in vanilla JavaScript:<\/p>\n\n\n\n
As before, we start with a file called importFrom.js<\/span><\/strong>:<\/p>\n\n\n\n
importFrom.js<\/div>
class<\/span> printToScreen<\/span> {<\/span>\r\n    constructor<\/span>(<\/span> message )<\/span> {<\/span>\r\n        console.<\/span>log<\/span>(<\/span> message )<\/span>;<\/span>\r\n    }<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> {<\/span> printToScreen }<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
And a file called import.js:<\/span><\/strong><\/p>\n\n\n\n
import.js<\/div>
import<\/span> {<\/span> printToScreen }<\/span> from<\/span> \".\/importFrom\"<\/span>;<\/span>\r\n\r\nvar<\/span> printToScreenElem =<\/span> printToScreen<\/span>(<\/span> \"Test Message\"<\/span> )<\/span>;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
As before, when import.js<\/span><\/strong> is run, “Test Message” is logged to the console. <\/p>\n\n\n\n
And as before, the import process is identical in React:<\/p>\n\n\n\n
In App.js:<\/span><\/strong><\/p>\n\n\n\n
App.js<\/div>
import<\/span> {<\/span> ImportComponent }<\/span> from<\/span> '.\/ImportElement'<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n  return<\/span> (<\/span>\n    <<\/span>ImportComponent<\/span> \/><\/span><\/span>\n  )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
In ImportElement.js<\/span><\/strong>:<\/p>\n\n\n\n
ImportElement.js<\/div>
import<\/span> React from<\/span> \"react\"<\/span>;<\/span>\r\n\r\nclass<\/span> ImportComponent<\/span> extends<\/span> React.<\/span>Component<\/span> {<\/span>\r\n    render<\/span>(<\/span>)<\/span> {<\/span>\r\n        return<\/span> (<\/span>\r\n            <<\/span>div<\/span>><\/span><\/span>\r\n                Test Message\r\n            <\/span><\/<\/span>div<\/span>><\/span><\/span>\r\n        )<\/span>;<\/span>\r\n    }<\/span> \r\n}<\/span>\r\n\r\nexport<\/span> {<\/span> ImportComponent }<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
Once again, since we are using React and JSX, the creation and calling of the class ImportComponent<\/strong> is different. <\/p>\n\n\n\n
However, the export and import process is identical as in vanilla JavaScript. <\/p>\n\n\n\n
Here’s what the output looks like:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Importing from Another Directory in React<\/h2>\n\n\n\n
So far, we’ve been exporting and importing from the same directory. What if we have subdirectories that we want to pull React component definitions from? <\/p>\n\n\n\n
All we have to do is change the path of the file we are importing from. This element is located in a subdirectory called “importSubdirectory”, and the file is called ImportElement.js<\/span><\/strong>:<\/p>\n\n\n\n
ImportElement.js<\/div>
import<\/span> React from<\/span> \"react\"<\/span>;<\/span>\r\n\r\nclass<\/span> ImportComponent<\/span> extends<\/span> React.<\/span>Component<\/span> {<\/span>\r\n    render<\/span>(<\/span>)<\/span> {<\/span>\r\n        return<\/span> (<\/span>\r\n            <<\/span>div<\/span>><\/span><\/span>\r\n                Test Message\r\n            <\/span><\/<\/span>div<\/span>><\/span><\/span>\r\n        )<\/span>;<\/span>\r\n    }<\/span> \r\n}<\/span>\r\n\r\nexport<\/span> {<\/span> ImportComponent }<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
We import this class component from App.js<\/span><\/strong>, which is in the default directory:<\/p>\n\n\n\n
App.js<\/div>
import<\/span> {<\/span> ImportComponent }<\/span> from<\/span> '.\/importSubdirectory\/ImportElement'<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n  return<\/span> (<\/span>\n    <<\/span>ImportComponent<\/span> \/><\/span><\/span>\n  )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
As you can see, all we did was change the path we import from in App.js<\/span><\/strong>! The output is the same as before:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
What if App.js <\/span><\/strong>was located in “importSubdirectory” instead, and ImportElement.js<\/span><\/strong> in the default directory? All we’d have to do is change the path in App.js<\/span><\/strong> once again:<\/p>\n\n\n\n
App.js<\/div>
import<\/span> {<\/span> ImportComponent }<\/span> from<\/span> '..\/ImportElement'<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n  return<\/span> (<\/span>\n    <<\/span>ImportComponent<\/span> \/><\/span><\/span>\n  )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
In the example above, we changed the path to “..\/ImportElement” instead. <\/p>\n\n\n\n
If you’re unfamiliar with the ‘..’ before the first slash, all it does is navigate one directory upward. So rather than importing from the directory “\/importSubdirectory\/”, we import from the root directory, “\/”, where ImportElement.js<\/span><\/strong> is located. <\/p>\n\n\n\n
The output is exactly the same:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Import Limitations in React<\/h2>\n\n\n\n
There is a key import limitation in React which we haven’t discussed thus far: you cannot import from files outside the src directory. The src directory is created by ‘create-react-app’, and is meant to encompass all React files<\/a> in your application.<\/p>\n\n\n\n
With the file structure below:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
We cannot import from the file importError.js<\/span><\/strong> from within the ‘src’ directory. If we try to do so in App.js<\/span><\/strong>:<\/p>\n\n\n\n
importError.js<\/div>
import<\/span> {<\/span> ImportComponent }<\/span> from<\/span> '..\/..\/importError'<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n  return<\/span> (<\/span>\n    <<\/span>ImportComponent<\/span> \/><\/span><\/span>\n  )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
We’ll encounter the following error in the console: “Module not found: You attempted to import ..\/..\/importError which falls outside of the project src\/ directory. Relative imports outside of src\/ are not supported.”<\/p>\n\n\n\n
This means that if you have any existing JavaScript code you’d like to integrate with React, you have to place the entire source code within the ‘src’ directory in your React app, and work from there. <\/p>\n\n\n\n
So long as you keep all your files within the ‘src’ directory, React imports are powerful and straightforward, working exactly like their vanilla JavaScript counterparts. <\/p>\n\n\n\n
I hope you enjoyed learning how to import components in React! If you have any questions or comments, please leave them below.  <\/p>\n","protected":false},"excerpt":{"rendered":"
React allows you to build very complex applications. But as your applications grow in size, your code can become messy and difficult to build on. Sometimes, we’d like to split different React components into logically separated files. This act of separating functionality is a common operation in almost any programming language, from Python to C++. […]<\/p>\n","protected":false},"author":14,"featured_media":2761,"comment_status":"open","ping_status":"open","sticky":false,"template":"post-tutorial-new.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[33,38],"class_list":["post-2716","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-beginner-react-tutorials","tag-react-components"],"acf":[],"_links":{"self":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/2716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/comments?post=2716"}],"version-history":[{"count":5,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/2716\/revisions"}],"predecessor-version":[{"id":13062,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/2716\/revisions\/13062"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media\/2761"}],"wp:attachment":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media?parent=2716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/categories?post=2716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/tags?post=2716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}