は、コードがリアクションスニペットはブラウザのJavascriptにどのように変換されますか?
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
がない有効なブラウザのJavaScriptも含まれ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
次のスニペット開始ページを含む取得リアクト - javascriptのコンテキストで実行した場合クラッシュインライン<h1>Hello, world!</h1>
に、と<script/>
タグのtype
はtext/babel
です。
概念的に、私はbabel、コンパイラ/ transpilerを使用して反応し得る、とtext/babel
の内側にそのコードはバベルとして扱われ、有効なJavaScriptへ何かによって変換されます。
この変換がどのように起こり、上記のスニペットのどの部分がバベルによって変形され、どの部分がリアクションによって変形されるのかはあまり明確ではありません。
私はこのレベルのフレームワークがそれを使用する必要はありません理解して実現します。
また、詳細な答えがおそらく単一のスタックオーバーフロー解答の範囲を超えていることに気付きます。詳細な解答を歓迎しますが、私が本当に求めているのは、上記のスニペットでどのライブラリがどのライブラリに提供されているかの概要です。すなわち、何か
が反応
が上記かかるXのようになり、さらにそれを変換するJavaScriptにDOMノードを回し、X、Y、Zにスニペット- x、y、z方向、古いjavascriptをブラウザに残しておきます。
text/babel
ノードに対する
バベルスキャンは、上記形質転換する
が、中に満たされたX、Y、Zと。
あなたのbabel設定ファイルには入力と出力が必要です。また、ブラウザの開発者ツールを開いて、ダウンロードされた最終的なjavascriptファイルを表示することもできます。 – NiRR
CLIを使用している場合も、babel script.js --out-file script-compiled.js – NiRR
謝罪しました。これから2つの質問があります。最初に、コンパイラからの出力を見る方法、答えました(あなたの答えはインラインテキスト/ babelを使わず、スクリプトをあらかじめコンパイルしていたことを暗示しています)。しかし、第二の質問は - バーベルはどのようにReactについて知っていますか?このためにbabelはハードコード化されているのですか、またはReactチームがバベルのために追加したプラグインのようなものがあります。 –