React.js入門

複数のコンポーネントで要素を組み立てる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
親コンポーネントに新たにふたつのコンポーネントを加えて、HTMLドキュメントに差し込みます。
講師:
05:58

字幕

このレッスンでは親のコンポーネントに新たに2つの子どものコンポーネントを作ってHTML ドキュメントに差し込んでいきたいと思います。今、開いているJavaScript ファイルなんですけれどもコンポーネントが1つ作ってあります。そして、このコンポーネントはdiv 要素があってそこにテキストが書かれています。そして、このコンポーネントはReactDOM.render というメソッドでcontent という id の要素の子どもとしてこの CommentBox のコンポーネントという要素を差し込んでいるということです。そして HTML ドキュメントの方を見ますとreact のライブラリとそれから、コンパイルをする babel ですね。それに加えて、この外部のJavaScript ファイルを読み込むscript 要素があります。そして content というのはこれです。div 要素がありますのでここに差し込まれます。今現在の状態を確認しましょう。「ファイル」>「ブラウザでプレビュー」でローカルですのでFirefox で確認します。「Comment Box を表示」とあります。そして、「ツール」>「Web 開発」>「インスペクタ」確認してみますとdiv の content の中にCommentBox のdiv 要素が差し込まれテキストが表示されたということが分かります。 では、子どもの2つのコンポーネントを差し込むんですけどもまずは、この render です。render の所でどういう風に、親要素の中に子要素を持って来るのかということなんですがここに、まずは h1 要素ヘッドですね。そこで「コメント」という風にしましてh1 を閉じます。そして、これから作る子どものコンポーネントです。CommentList として、閉じます。もう1つ、CommentFormこれも閉じます。では、これら2つのコンポーネントを定義しましょう。1つ目、CommentList です。コピーを持ってきます。そして、タイプミスをすると痛いのでコピーを持って来てしまいます。} (中括弧)を閉じて) (丸括弧)も閉じる。そして、改行です。ここに、やはり render が必要です。そして render は return をしますのでこれもコピーを持ってきてしまいましょう。return で、 return は ) します。そして、function は } します。ということで、ここに return の内容を書き込んでいけば良いわけです。タグで div にします。そして、こちらと一緒でclassName です。 そして、名前はこのコンポーネントの名前です。コピーを持ってきます。これは閉じます。空っぽだと見てわかりませんのでここにテキストを書いておきます。もう、このまま「CommenList を表示」とします。今回は簡単なテストですので2つ目のコンポーネントも同じかたちです。ですから、コピーをしてペーストをします。名前は CommentForm ということですのでコピーをしてまず、変数名はクラス名です。ペーストをしそれから、この className の所もペーストをしてテキストも分かるようにペーストをします。そして保存しましょう。HTML ドキュメントの方に切り替えます。こちらは特に変更はありません。script.js が変更されていますのでこの div 要素に差し込まれる内容が変わったということですけれども確認しましょう。「ファイル」>「ブラウザでプレビュー」>Firefox です。「コメント」という h1 要素タイトルですね。それから2つのコンポーネントの要素が差し込まれました。一応、確認しましょう。「ツール」>「Web 開発」>「インスペクタ」ということでdiv 要素の中にはまず、これが親要素のCommentBox です。 その中に h1 とこのコンポーネントの要素が2つ差し込まれたということが確認できました。このレッスンでは、親コンポーネントに新たに2つのコンポーネントを加えてHTML ドキュメントに差し込みました。親コンポーネントがこちらです。そして、その親コンポーネントのrender の returnfunction の return の中でこのコンポーネントをタグのかたちで差し込んでいます。そして、その定義です。定義の仕方は親と一緒です。React.createClass でクラスを作りrender メソッドに return でどういう風に要素を組み立てるのかということをJSX で書き込みます。「CommentList を表示」としています。全く同じかたちで、ただし名前がCommentForm ということで子要素をもう1つ作ってそれを、それぞれ差し込んだということです。

React.js入門

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

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

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

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

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