Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Installing and Using Create React App

Philip Kroupoderov
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Philip Kroupoderov
Front End Web Development Techdegree Graduate 21,641 Points

How does the import statement know where to import from??

Given this line: import React, { Component } from 'react'; - how does the import statement know where to find React and Component when we are supplying the string 'react' instead of a pathname to a file???

1 Answer

Ari Misha
Ari Misha
19,323 Points

Import is just a syntactic sugar of require() method of CommonJS pattern, which we still follow with Node/ExpressJS. But your question made me really think so I dug into Nodejs core, and here is what i found out:

  • There is a file called Module.js and it looks something like this:

            ```
              function Module (parent, id) {
                     this.id = id;
                     this.exports = {};
                     this.parent = parent;
                      ......
               }
             ```
    
  • Module.js provides two powerful mechanisms:

    • Each file is given the instance of this Module constructor. on load, that's why you're able to attach properties even after it has been loaded or exported to another file.
    • require function is just an abstraction around module.require which internally calls `module._load
  • Module._load handles file loading and module caching, which in turn removes any redundant imports and enhances the development time. As soon as this process is done, everything is shipped to Module._compile where real magic happens

  • In Module._compile, a real standalone require() function gets created for the same module. We all have used THIS function, right? Turned out THIS is just a wrapper around the require() function for the same file/module. Amazing isn't it? Also, Module._compile has other helper functions just to check the valid extension types, and resolving a path name to absolute name, and the absolute path to main module and access to all cached modules.

So yeah whenever you open your editor and import any module, the above steps are happening behind the scenes. Also, your editor shows the intellisense on auto imports, right? Editors indexes all the modules and cache them by the variables or classes or Interfaces or module names, that's how you get the imports and auto imports.

~ Ari