Question: I'm new to ES6 and a bit confused with the way classes are exported and imported. It seems many different notations are valid but work differently.

I wrote a class like this in `src/web-api.js`:

```
class WebApi {
    // ...
}

export { WebApi };

```

Which I import with:

```
import { WebApi } from './src/web-api.js'

```

This works fine, but before I've tried the same thing without curly brackets and it didn't work:

```
export WebApi; // Tells me '{' expected

import WebApi from './src/web-api.js'; // No syntax error but WebApi is undefined

```

Even though on the [MDN documentation for export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export), the notation `export expression;` appears to be valid.

Likewise, this is how React is imported in my application file:

```
import React, { Component } from 'react';

```

Why is one class with and another one without curly brackets? In general, how can I tell when to use and not to use curly brackets?

Answer: 
In your case, if you import from the `src/web-api.js` file without the curly braces, you should have an`export default something` in the `src/webfile-api.js`

**Without curly braces**

```
class WebApi {...};
export default WebApi;

```

In your file

`import WebApi from './src/web-api.js'`

// Here, the element with`export default` in the `src/web-api.js` file should be imported without the curly braces anywhere.
PS: It must have only one `export default` for each file.

**With curly braces**

```
export { WebApi }

```

In your file
`import {WebApi} from './src/web-api.js'`

Dan Abramov explains clearly the `export/import` methods in ES6 at this answer.
[When should I use curly braces for ES6 import?](https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import/36796281#36796281)
The braces are just syntactic sugar. It will use the variable name as the object key, for example:

```
const a = 1;
const test = {a}; // same as {a: 1};

```

It can also be used to destructure the object by its variable name. It will check if the object has any properties with the same value as the variable name and then output a value if one is found:

```
const test = {a: 1};
const {a} = test; // a = 1

```

In modules, the general use case is that when you import there is usually braces since modules get imported as `MODULE.function` or `MODULE.class`. It'd be more intuitive to look at exports first:

For exporting, it's using the syntactic sugar I mentioned before - you're exporting it as an object. When you do `export { WebApi };` what you're really doing is `export {WebApi: WebApi}`. This makes it easier to access things as you can just do 'MODULE.WebApi' now to access the class instead of having it pollute the namespace unnecessarily. This is also required for all exports!

Moving on to imports, what you're doing in the import statements is essentially destructuring the module object and picking a property to save into a variable of the same name. In your case, when you do `import {WebApi} from './src/web-api.js'` you'd be doing something like `import WebApi = web-api.js['WebApi'] from './src/web-api.js'` (this isn't valid syntax but just to show you what it's doing in the background). This is also required to properly import module functions/classes. There is also the option of importing the whole module, just as NodeJS does: `import * as ModuleName from './src/module.js'`. This will put all of exported functions/classes into the ModuleName object so that it can be treated as a normal module.

However, if a module has a `default` export, braces are not not needed for import and export. For example, react probably has `export default React` in its files - that's why there doesn't need to be braces around it when you do `import React from 'react'`

Hope I wasn't too confusing and let me know if I can clarify anything!