Why does the directive throw an error (React + TS)?

Question

typescript

Hello.
In Of. doc-tion
there is such a recommendation as

// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.

externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }

but when i do that i get an error like

React is not defined

You clean up - everything is normal ...
And along the way, question 2:
Why is it in the same office. docks is used, but I use Tell me what's the matter and what I'm doing wrong, or the docks are outdated, or ...
import * as React from 'react';
import React from 'react';

Answer 1

1. In this case, React must be connected to the page with an external library. For example like this:

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

2. You have the allowSyntheticDefaultImports property in tsconfig.js set to true .
This option is more convenient because you can write imports of the form:
import React, { useContext } from 'react';