reactjsにbrowser.min.jsが必要なのはなぜですか？

私は単純なReactアプリケーションを構築しようとしていますが、なぜbrowser.min.jsファイルが必要なのか不思議です。reactjsにbrowser.min.jsが必要なのはなぜですか？

私はreactとreact-dom.jsの両方を含んでいますが、browser.min.jsも含まれていなければ何も表示されません。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Hello React!</title> 
    <script src="react/react.js"></script> 
    <script src="react/react-dom.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/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>

出典

2016-04-18 user1050619

スニペットからわかるように、scriptタグのタイプは「text/babel」です。そのため、JSX（XML付きJavascriptを使用）を使用してコーディングするためです。

JSXは、javacriptコード（React要素だけでなく）のXML（この場合はHTML）コンポーネントを構築するために「直感的」にするために作成された砂糖です。 Reactは、UI要素を作成/定義するために使用される合成メソッドより抽象レイヤーとしてそれを使用します。 ただし、 JSXは世界的に認められている標準ではないため、すべてのブラウザでサポートされているわけではありません。これはJSXをバニラJSに変換するためにサードパーティ製の「コンパイラ」ライブラリが必要な理由です。これはBABELのところです。

BABELはjavascriptコンパイラで、 "browser.min.js"ファイルをインポートすると、 "text/babel"スクリプトタグ内のコードを "コンパイル"してバニラのjavascriptとして実行できます。

だから、あなたの例では、あなたは次のコードを持っている

：

は

<div id="example"></div> 
<script type="text/babel"> 
    ReactDOM.render(
    <h1>Hello, world!</h1>, 
    document.getElementById('example') 
); 
</script>

そして「browser.min.js」は、ページがロードされたときにそれを処理し、何かする必要があります実行されるJavaScriptコードをこのように：

ReactDOM.render(
    React.createElement('H1', null, 'Hello world!'), 
    document.getElementById('example'));

あなたは、この「browser.min.js」をロードしたくない場合は、あなたが持っている主な選択肢は以下のとおりです。

あなたのリアクションコードを別々のファイルに入れて、変更するたびにコンパイルします（これはすべてサーバー側です）。あなたのHTMLコードは、オリジナルのJSXのものではなく、コンパイル済みのファイル（バニラJSコードのみを持つ）を参照する必要があります。これを行うにはいくつかの方法がありますdepending on your coding tools。
React "Html"階層（React.createElement（...））を作成および定義するためにvanilla JSのみを使用してください。

これらの方法については、他の質問で詳しく説明する必要があります。

出典

2016-04-18 16:28:56 GonArrivi

あなたの説明に感謝します – user1050619

私は別の質問があります： 'var React = require（ 'react'）;そして、私は 'webpack'がこれらの' require'コマンドで作業するために使用するツールだと読んでいます。これはどうやってここで遊べますか？私はまだ別のファイル（ 'require'行を含む）に私の反応コード（JSX）を持っている必要があります>それをコンパイルして、通常のJSに変換して> webpackを使用しますか？その余分なステップが含まれていない、より簡単な代替プロセスがありますか？ –

あなたは本当に 'webpack'を全く使う必要はありません。これは、複数の '

あなたはバベル（ES7）内のコードを書かれていないブラウザがネイティブに扱うことができるのJavaScriptのバージョンでは、あなたはビルド時に、それをtranspilingのではなく、ブラウザにES7を提供していました。

出典

2016-04-18 14:20:56 Quentin

JSXはES7仕様の一部ではないと思いますが、babel 'browser.min.js'はReact createElemメソッドをコンパイルします。 – GonArrivi

Babelの 'browser.js'がもう動作していないことが判明しましたか？

'browser.js' was deprecated 2015年になると、ブラウザ内のJSXをコンパイルできるようになることが少し難しくなりました。

ありがたいことに、babel-standaloneプロジェクトは、ドロップインの代替品であり、積極的に開発されているようです。

「babel-standalone」はendorsed by the BabelJS project itself, noted by its inclusion on this pageと思われます。

出典

2017-05-12 14:31:24

reactjsにbrowser.min.jsが必要なのはなぜですか？

答えて

関連する問題