Javascript ES6 modules name resolution

Question

I'm absolutely sure, that I'm asking a silly question, but I really do not understand how this line of code works

import React from 'react';

My question: who and where searches for 'react' name?

For example, this site tells me, that for module-name I should use relative of absolute path, eg

import React from './react';

or

import React from '/home/user/react';

I thought that 'react' is same as './react' but I've created ReactJS applcation via create-react-app command and didn't find any file named react.js in application folder.

So, obviously there is some tool or rule by which module name has been resolved to a proper file, but I cannot find proper documentation about this.

Answer 1

Import statements are importing packages by name from the node_modules directory in your app , which is where they're saved when you run an installation command such as npm install or yarn inside your app.

When you write:

import React from 'react';

As far as you're concerned, it's as if you'd written:

import React from './node_modules/react/index.js';

Importing by package name means you don't have to be aware of how a given package is structured or where your node_modules directory is relative to your javascript file.