なぜ

Question

私は動作するコードを持っている

のみリアクトインポートした後に反応インポートするが、私は私が代わりに

import ReactDOM from 'react-dom' 
import React, {Component} from 'react' 

class App extends Component { 
    render() { 
    return (
     <div>comp </div> 
    ) 
    } 
} 

//ReactDOM.render(<App/>, document.getElementById('root')) 
ReactDOM.render(<div>sv</div>, document.getElementById('root')) 

なぜそのリアクトインポートする必要がreactDomに使用していますどこにもリアクト使用していませんよ？

Answer 1

インポートしたReactインスタンスを明示的に使用していませんが、JSXはそれを使用するReact.createElement()呼び出しに変換されます。

例では、<div>comp </div>は、BabelによってReact.createElement('div', null, 'comp')に転送されます。

Answer 2

私は、ReactDOMがReactを使用すると、それをインポートすることに気を配ると思いました。しかし、そうではありません。ソースコード内のJSXが変換された後、明示的にReactパッケージを使用していることが明らかです。したがって、それが必要です。

React.createElement('div', null, 'comp') 

Answer 3

は、インポートは、次のJSXコードので必要ですリアクト： -

(
    <div>comp </div> 
) 

が

React.createElement(
    "div", 
    null, 
    "comp " 
); 

にtranspiledます。これは、あなたが反応インポートする必要がある理由です。 私はあなたの質問に答えることを願っています。

いつでもhttps://babeljs.ioを参照して、getが何に変換されたのかを理解することができます。

Answer 4

これは本当に面白い質問です。コードがではないと思われます。はReactを使用しているようですが、それは扱いにくいです。

<Component />略語を使用すると、JSXはBabelによって通常のJavascriptに変換されます。それが答えのいずれかがあなたを助けている場合、その答えに受け入れるをクリックしてくださいリーダー