リアクションスニペットはブラウザのJavascriptにどのように変換されますか？

は、コードがリアクションスニペットはブラウザの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へ何かによって変換されます。

この変換がどのように起こり、上記のスニペットのどの部分がバベルによって変形され、どの部分がリアクションによって変形されるのかはあまり明確ではありません。

私はこのレベルのフレームワークがそれを使用する必要はありません理解して実現します。

また、詳細な答えがおそらく単一のスタックオーバーフロー解答の範囲を超えていることに気付きます。詳細な解答を歓迎しますが、私が本当に求めているのは、上記のスニペットでどのライブラリがどのライブラリに提供されているかの概要です。すなわち、何か

text/babel

バベルスキャンは、上記形質転換する

が反応
が上記かかるXのようになり、さらにそれを変換するJavaScriptにDOMノードを回し、X、Y、Zにスニペット
x、y、z方向、古いjavascriptをブラウザに残しておきます。

が、中に満たされたX、Y、Zと。

出典

2016-08-25 Alan Storm

私はこれで十分願っています：ES5にtranspiled

何がブラウザによって完全に許容されます。あなたが正当に言ったのはES以外のものです。

コンパイル結果を見てください。どのファンキーなhtmlタグ<>もJSのようなソートReact.createElement（ "label"、{className： "label"}）の関数呼び出しになっています。多くのjqueryのようにDOM操作を行います（とはいえ、よりシャドウDOMと呼ばれるもので、最適化）

それだ -

はのcreateElementのような機能が含まれている他のどのようなライブラリです反応します。

出典

2016-08-25 20:01:16 NiRR

あなたのbabel設定ファイルには入力と出力が必要です。また、ブラウザの開発者ツールを開いて、ダウンロードされた最終的なjavascriptファイルを表示することもできます。 – NiRR

CLIを使用している場合も、babel script.js --out-file script-compiled.js – NiRR

謝罪しました。これから2つの質問があります。最初に、コンパイラからの出力を見る方法、答えました（あなたの答えはインラインテキスト/ babelを使わず、スクリプトをあらかじめコンパイルしていたことを暗示しています）。しかし、第二の質問は - バーベルはどのようにReactについて知っていますか？このためにbabelはハードコード化されているのですか、またはReactチームがバベルのために追加したプラグインのようなものがあります。 –

JSX in depthリアクトすることにより、より良いことを理解するのに役立つかもしれません。しかし、あなたはちょうどあなたが反応アプリを開発するときに、いくつかのtranspilerを持ってしたくない場合は、JSXはうまく使わずにJSの構文を行うことができ、基本的

var app = <YoucComponent/>; //JSX 
var app = React.createElement(YourComponent); //JS

。

出典

2016-08-25 19:57:34 goldbullet

JSXは、をメソッドを呼び出す関数呼び出しに変換します。を関数呼び出しに変換します。例えば

次JSX：

<p>Hello World</p>

がにtranspiledされます：transpilationステップの間に何が起こるか、

"use strict"; 

React.createElement(
    "p", 
    null, 
    "Hello World" 
);

は、具体的には、その抽象構文三のノード（ AST）が横断され、変換されます。言い換えれば、BabelはASTをとり、ノードを追加、更新、削除して最終的にReact.createElement関数呼び出しを生成します。明らかに、ReactはJSXの変換をすべて処理しません。。

バベルによって処理transpilation処理要約する：

解析します。コードを取り出してASTを出力します。
変換; ASTをトラバースしてノードを操作します。
生成します。最終的なASTをとり、それを一連のコードに戻します。

そうでない場合は、関数呼び出しが失敗するので、あなたがは常には、JSXとの組み合わせで、それを使用するときにスコープ内Reactを持っている必要が理由でもexplaines。

Babelは、JSX変換機能をpluginで公開しています。ボーナス：実際にJSXが転送される関数呼び出しをpragmaオプションで変更することができます。これにより、JSXをReactとは異なるビューライブラリ（例えばdeku）と組み合わせて使用することができます。あなたの.babelrcファイルでこれを指定することができます。

{ 
    "plugins": [ 
    ["transform-react-jsx", { 
     "pragma": "dom" // default pragma is React.createElement 
    }] 
    ] 
}

追加リソース：

をあなたはtranspilation結果hereを見ることができます。
AST hereを視覚化することができます。
バベルが蒸散をどのように扱うかについて詳しくは、hereをご覧ください。

出典

2016-08-25 20:00:51 danillouz

リアクションスニペ​​ットはブラウザのJavascriptにどのように変換されますか？

答えて

関連する問題

リアクションスニペットはブラウザのJavascriptにどのように変換されますか？