###### Table of Contents
- [[#CommonJS vs ES modules]]
- [[]]
- [[]]
- [[]]
### CommonJS vs ES modules
- CommonJS (found in Node) uses the `require` statement and `module.export`
- ES modules uses the `import` statement and `export default`
### Not destructuring
When importing properties from a library (which is nothing more than a big object) we can use syntax that _looks_ a lot like destructuring, but isn't.
One of the reasons ES6 modules are so performant is that they don't import the whole library in order to access the property was ask for, but _just_ that singular property, keeping our application much more lightweight:
```jsx
import React, {useState, useEffect} from 'react';
```
In the statement above, we don't have to import every piece of the React library--instead it's just the default export (which we've assigned the label of `React` and the properties `useState` and `useEffect`
#### [Example](https://stackoverflow.com/questions/33524696/es6-destructuring-and-module-imports)
```javascript
import {Link} from 'react-router';
```
imports a **named export** from `react-router`, e.g., something like:
```javascript
export const Link = 42;
```
whereas:
```javascript
import Router from 'react-router';
const {Link} = Router;
```
pulls out the property `Link` from the **default export**, assuming it is an object, e.g.
```javascript
export default {
Link: 42
};
```
___
**Tags**: #modules