Picking apart JavaScript import syntax

Note: this is a follow-up to my first post on destructuring. Import syntax uses destructuring pretty liberally, and it can be really confusing for folks who are new to using it. Give my other article a read first if this all seems confusing!
Let’s talk about importing dependencies into your node projects. As your work gets more complex, you will inevitably come across syntax like this:
import React, { useState, useEffect } from ‘react’;
import { Link } from ‘gatsby’;
import Button from ‘@material-ui/core/Button’;
import moment from ‘moment’;

import { Layout } from ‘../components’;

At first glance, it’s pretty straightforward. We’re importing a handful of bits to use in a React component. As you might imagine, though, I’ve selected these four lines of code because each one is unique. In fact, during my journey as a blossoming Node/React developer, I’ve found ways to mess up every single one of these.
You’re gonna mess this stuff up, too, and that’s perfectly fine! For now, I’m here to help.
We’re going to look through each one of these, in order of complexity, and I’ll do my best to explain what the hell is going on, and the way I think about imports as I work.

Straightforward import syntax – the easiest case

import moment from ‘moment’;

If you’ve worked in .Net languages, or Python, or Ruby, or one of many other languages under the sun, this should be second nature to you. I’m calling it out here specifically because some of us may never have seen it before.

What’s going on here?

Well, it turns out it’s pretty easy. moment is a JavaScript library, which has been included in our node project’s package.json file’s dependencies or devDependencies. If you’re new to node and are unfamilar with package.json, read more about it here.
This line of code creates a reference to everything made available in the moment library, and puts it into what is effectively a variable that we can use to access it. the ‘moment’ bit (in quotes) is what tells the compiler which library to get. The other one, moment (not in quotes) is the variable. So from here in, we can access moment just like any other variable in this file:
import moment from ‘moment’;
console.log(
moment().get(‘year’)
);
// 2019

The un-obvious bit

Behind the scenes, this is just taking everything that is made available by the moment library through export default in its main file , and stuffing it into a variable – and that variable can have any valid name we want!
It may be confusing, but you absolutely could do this, if the this name made more sense to you:
import ThatReallyUsefulDateLibrary from ‘moment’;
console.log(
ThatReallyUsefulDateLibrary().get(‘year’)
);
// 2019

Importing a component from somewhere within a library

Next up – this slightly more complex beast:
import Button from ‘@material-ui/core/Button’;

Here we’re grabbing the