What is the difference between with and without curly bracket notation in export/import statements?

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, 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?

from What is the difference between with and without curly bracket notation in export/import statements?