「+ Reduxのフロントエンドを反応させるの開発実際の戦闘は」1ノート：Hello Worldのケースが反応建設プロジェクトを含みません

このセクションでは、Hello Worldのを構築するためのプロジェクトの実現を必要としません。

[最初のページ]を反応させたHello World

ソースアドレスします。https：//jsfiddle.net/allan91/2h1sf0ky/8/

<！DOCTYPE HTML> 

<HTML LANG = "EN"> 

<HEAD> 

    <メタ文字コード= "UTF-8"> 

    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 

    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 

    <タイトル>のHello World </ TITLE> 

    <スクリプトSRC = "https://cdn.bootcss.com/react/15.4.2/ react.min.js "> </ SCRIPT> 

    <スクリプトSRC =" https://cdn.bootcss.com/react/15.4.2/react-dom.min.js "> </ SCRIPT> 

    <スクリプトSRC =" https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js "> </ SCRIPT> 

</ HEAD> 

<BODY> 

    の<divのid ="ルート"></ DIV> 

    <スクリプトタイプ= "テキスト/バベル"> 

      ReactDOM.render（

        <H1>のHello World </ H1>、// JSX格式

        document.getElementById（ "ルート"）

      ）; 

    </スクリプト> 

</ BODY> 

</ HTML>

上記のコードは、CDN（ContentDeliveryNetwork）に直接参照react.min.jsは、反応-dom.min.js非常にシンプルであり、これらの3つのスクリプトを直接使用することができbabel.min.js。唯一の注意点は、スクリプトのtype属性がテキスト/バベルで記述する必要があります。ブラウザは、Hello Worldのコピーライティングを表示するためのHTMLファイルを開きます。

注1：CDN（コンテンツ配信ネットワーク）は、エッジサーバーを中心に展開頼って、ネットワークコンテンツ配信ネットワークの上に構築され、プラットフォーム、コンテンツ配信、スケジューリングおよび他の機能モジュールの中心を通ってロードバランシング、ユーザーが最寄りの必要なコンテンツを取得することができますネットワークの輻輳を軽減し、ユーザアクセス応答速度を改善し、ヒット率。

注2：react.main.jsが反応コアコードのパッケージであり、反応-dom.min.jsはDOMパッケージに関連して、主にDOM仮想レンダリングするためのドキュメントのDOMに真となり、当然のことながら、他の方法があります。 babel.min.jsは、ブラウザのビルドツールでサポートされていないコードをコンパイルするために使用されます。minが、これは圧縮されたJSライブラリであることをであることを示します。

または、このようなルートディレクトリに新しいmain.jsとして、外部のJavaScriptコードを記述します

ReactDOM.render（

        <H1>のHello World </ H1>、// JSX格式

        のdocument.getElementById（ "ルート"）

）;

その後、HTMLファイル内に導入されました：

ます。<script type =「text /バベル」SRC =「./ main.js」> </ SCRIPT>

ロジャーの「ワンピース」は、誰もが自分のチャンス出演している、と述べました！将来的には、歴史の波のフロントエンドに忘れかもしれない反応するが、今日、デザインのアイデアは、無数の開発者に影響を与えた反応した瞬間には、その時間の一部です！！

「+ Reduxのフロントエンドを反応させるの開発実際の戦闘は」1ノート：Hello Worldのケースが反応建設プロジェクトを含みません

おすすめ