React.js入門

コンポーネントを定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Reactの部品となるコンポーネントを定めて、HTMLドキュメントに要素を差し込みます。
講師:
08:36

字幕

このレッスンでは React の部品となるコンポーネントを JavaScript で定めてHTML ドキュメントに動的に要素を差し込んでみます。まず今開いている HTML ドキュメントですがReact を使う準備は整っています。つまり3つのライブラリのファイルですね。2つは React です。それからもう1つはReact の jsx をコンパイルする babel、これらを script 要素で読み込んでいます。けれども JavaScript のコードはまだ1行も書いていません。body には div 要素、id は content となっていますけれどもその中に子要素としてさらに div 要素があってテキストが書き込まれています。ではこれを確認しましょう。「ファイル」>「ブラウザーでプレビュー」でGoogle Chrome です。テキストが表示されました。これからやろうというのはこの子要素の div ですね、これをReact で作って id=content の子要素として差し込もうということです。JavaScript は外部ファイルに書きますので「ファイル」>「新規」でJavaScript のファイルを作りましょう。 何も書いていませんがすぐに保存してしまいます。保存で src というフォルダに入れたいと思います。ファイル名は script にしましょう。そして「保存」です。後でここに React のコードを書いていきます。HTML ドキュメントの方ではここで今の script.js を読み込むわけでscript 要素でそしてタイプを指定する必要があります。テキストのここでは babel でコンパイルしますのでここは babel と。ということで後は普通に src ソースですね、参照して今まだ空っぽですけれどもscript.js を読み込みます。タグは閉じます。ということで一旦保存しておきましょう。そして script.js の方に移ります。では React のコンポーネントを定義します。まずクラスという形ですがコンポーネントはクラスという形で定義するんですがそれを入れる変数です。CommentBox としましょう。コンポーネントとはいうんですがこれは JavaScript の扱いとしてはクラスです。クラスは大文字で名前を始めるのが通常なのでCommentBox の C は大文字になっています。そしてクラスを作るという React のメソッドがありましてcreateClass まんまですね。 そしてその中にはオブジェクトの形でメソッドを定義していきます。そして必須のメソッドがrender です。そして function で定めるんですけれどもそしてこの render の function ですね、これについては必ず return をしなければいけません。その return する内容というのが実は作られる要素になります。return ですね。長くなることもあるので括弧でくくっておきましょう。そしてここに動的に作ろうとしているこの div 要素ですね、これを持ち込みます。ですからカットしてここはもう詰めてしまいましょう。保存しておきます。そして今カットした HTML のタグですね、これをペーストします。タブを落としておきましょう。そしてこの div にはクラスを定義します。ただしこれは HTML のクラス属性ではなくてJavaScript のプロパティのクラスのキーワードになりますのでclassName とします。class ではありません。そしてここにこの createClass で作ったclass 名になるんですけれども変数ですね。この名前をコピーして持って来ます。これでこの CommentBox というクラスが定義されこのクラスからこの要素を作ることができるようになります。 ただし作ることができるようになっただけですので実際に作ってHTML ドキュメントに差し込むという命令をさらに書く必要があります。React の DOM、ReactDOM のメソッドなんですがこれが HTML ドキュメントに対して操作をする、そして要素を作って差し込んで描画しろということですのでここもまた render というメソッドです。この中には2つの引数を定めます。まずは jsl ですね、ここもそうですがもうタグを打ってしまってこの CommentBox から作った要素を差し込むんだよということでCommentBox そして閉じます。これが第1引数です。第2引数はどこに差し込むんでしょうということですね。それは HTML ドキュメントのこの id=content を差し込むことですのでこちらをコピーしましょう。そしてdocument のgetElementByIdid で要素を探しなさいということになります。今コピーしましたのでそれをペーストです。そうするとこの content というid のある要素の子供としてこの CommentBox を差し込むということになります。あ、render の function はプロパティとして定めていますのでセミコロンを入れてはいけませんね。 もし複数のプロパティがあるのでしたらカンマが入ります。では保存をします。HTMLドキュメントの方に切り替えまして「ブラウザーでプレビュー」をします。ただし Google Chrome ですとセキュリティの関係で外部の JavaScript ファイルをローカルで読み込むことができません。その場合にエラーになってしまいますので今回は Firefox を使います。そうすると動的にテキストが表示されました。これは div 要素に入っています。確認しましょう。「ツール」>「Web 開発」>「インスペクタ」この div 要素の中に確かに動的に作られた要素が入っています。この data-reactroot というのはReact が自動的に入れているものです。このレッスンでは React の部品となるコンポーネントをJavaScript で定めてHTML ドキュメントに要素を差し込みました。その場合に React.createClass でクラスを定義してコンポーネントという形になるんですがコンポーネントを定めます。コンポーネントは render メソッドでreturn で差し込むべき要素を定めます。その上で ReactDOM の render でコンポーネントから作ったものをタグで書いてそれをどこに差し込むのかと。 GetElementById でその id を指定するという定義の仕方でした。

React.js入門

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

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

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

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

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