実は公式がすでに公開しているものを、ほぼそのままパクっています。独自のお作法を攻略すべく、ソースの中でどことどこがどう繋がっているのかを図にしてみました。側が一手に担っています。特別な拡張言語が用意されています。返している(ように見える)のが直感的にわかります。つめの機能であるイベント処理にいってみます。テキストボックスの入力と表示を連動させる仕掛けを見よう見まねで書いてみました。以下のデモの「お名前:」欄を変更して、表示の変化を確かめていただくことができます。参照するよう変更するここでは簡単のため、「ラベル」「テキストボックス」「メッセージエリア」を、すべて一つのコンポーネントとしてまとめて扱っています。コンポーネントの分割さきほどのサンプルでは、画面内のすべての構成要素を単一のコンポーネントとしてコーディングしました。コンポーネント一つ一つを分割し、それぞれに親子関係を与えることができます*1。すべてを詰め込まずに済むため、個人的にはスッキリしているように見えます。面倒な点といえば、子コンポーネントで発生したイベントを親コンポーネントに通知するための仕掛けが必要になることでしょう。ここでは、以下の方法で子から親にイベント通知を行っています。自分用メモちょっとお勉強してちょっとわかったことを適当に書き留めておくコーナー。ともにコンポーネントの入力となるデータで、それぞれ意味合い(役割)が異なる。親のコールバック関数を子に参照させたい場合、などで使うstatestateとは、Reactコンポーネントの内部状態を表すデータのこと要素の表示内容を決定するために使用されるチェックボックスのチェック状態テキストボックスの入力内容、などで使う*1:言い換えると、小さなコンポーネントを組み合わせて、より大きく複雑なコンポーネントを作ることもできます。01:05JavaScript初心者だけどReactにさわってみたよ!Tweet広告を非表示にする関連記事2019-06-30データビジュアライゼーションの教科書を実践してみよう(棒グラフ篇)こんばんは、たーせるです。部分的に無効化するおはようございます。お話こんにちは、たーせるです。昨日と同じテーマです。@pi_cro_s.はてなブログをはじめよう!tercel_sさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。