React.js入門

ReactのコードをJavaScriptファイルに分ける

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLドキュメントに書いたReactのJavaScriptコードを、管理しやすいように外部ファイルに分けます。
講師:
04:11

字幕

このレッスンでは HTML ドキュメントに書いたReact の JavaScript コードを管理しやすいように外部ファイルに分けます。今開いている HTML ドキュメントですが、こちらには React のライブラリ2つそれから jsx を返還するbabel のライブラリが読み込まれています。そして body には div 要素id が example となっています。そしてその中に script 要素で React のJavaScript コードが書かれています。この example という要素に対してh1 要素を差し込むということになっています。けれども React のコードをどんどん書いていくとこの HTML ドキュメントの中に書き込んでいくのはちょっと管理がしずらいです。ですからこちらをカットしましょう。そして新規の JavaScript ファイルを作ります。ファイルの新規で JavaScript、そして今コピーしたコードをペーストします。インデントを下げましょうね。これで保存します。ファイルを「保存」です。そしてフォルダを作りましょう。新規フォルダでソース src ということで作成します。 ファイル名は分かりやすくscript として保存します。JavaScript コードの方は特に書き換えません。ですから実行した結果はこの Hello, world! がdiv 要素の中に差し込まれるということになるんですけれども、HTML ドキュメントの方を少し書き換える必要がありますね。ではこの script 要素はヘッドの方に持って行きましょう。そして閉じタグはくっつけてしまいまして外部から読み込みますのでソースですね、そして参照で今作った src のフォルダに作った script.js これを開きます。これで外部ファイルに書き換えることができました。保存をしましょう。そして確認します。「ファイル」>「ブラウザーでプレビュー」をします。ただしこの時に Google Chrome を使うと何も出て来ません。「表示」の「開発管理」でJavaScript コンソールを見てみます。エラーが出ていますね。XMLHttpRequest の load ができないとscript.js これ外部ファイルなんですけれどもそれが読み込めないということです。これは Chrome のセキュリティ上別のファイルを読み込むという時にはサーバーにアップロードあるいはローカルサーバーをたてないといけないということになっています。 この段階ではまだローカルサーバーをたてません。ですから見るためには別のブラウザーを使うことにしましょう。Dreamweaver に戻りましてファイルからブラウザーでプレビューでFirefox を使うことにします。Firefox であれば Hello, world! ということでh1 要素が差し込まれたということです。Chrome の方もサーバーあるいはローカルサーバーで見れば見ることができるんですけれども今のところはローカルサーバーはたてませんのでGoogle Chrome でなくFirefox の方で確認することにしました。このレッスンでは HTML ドキュメントの中に書き込まれていた React のJavaScript コードを外部ファイルに書き出してそれを読み込むという形にしました。そしてブラウザーで確認する時には、ローカルの場合Chrome だとセキュリティでアウトになってしまうので、Firefox を使ったということです。

React.js入門

React.jsはFacebookが開発したJavaScriptライブラリです。このコースではReact.jsで定めた要素をHTMLドキュメントに差し込むことから始まり、JSONファイルから複数のデータを読み込んでリストを作ったり、サーバーとデータをやり取りするなど段階を踏みながらひとつのWebアプリを作りあげます。

2時間21分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年09月09日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。