readモチベーションReactに慣れるために簡単なSPAを作成したい前提条件Reactの基本文法理解している。以下のようなコンポネントの組み合わせでToDoアプリを構築する。LISTのようにする。JSXで表現するとこんな感じになる。document.body);ToDoアプリの作成それでは、各コンポーネントごとに順々に作成して行こう。App、Headerコンポーネントの作成まずは全てのコンポーネントの親になるAppコンポーネントとヘッダー部分のHeaderコンポーネントを作成する。コンポーネント作成の基本を守るだけ。注意点としてはカスタムタグを定義する変数名は通常のHTMLタグと区別するために必ず大文字で開始すること。ここではToDoAppとToDoHeaderがそれにあたる。document.body);Containerコンポーネントの作成BannerやFormコンポーネントを集約するContainerコンポーネントを作成する。これも難しいところはない。}});Bannerコンポ−ネントの作成Bannerコンポーネントを作成する。ここまでは上に同じでReact.createClassの使い方を学ぶだけ。}});Formコンポーネントここから少し覚えることが増えてくる。value={this.state.item}/>のonChangeはフォームに文字を入力した時にフォーム内に表示するテキストを変化させるためのイベントハンドラ。onChangeに紐付かせるhandleChange関数ではフォーム内テキストの状態管理を行う。フォーム内のテキストを管理する変数itemの初期状態はnullにしておき、文字を入力するたびにitemを更新する。itemボタンをクリック時の動作を定義する。ここでは、親コンポーネントToDoContainerが持つitemsにフォーム内テキストの内容を追加し、ToDoリストにデータを追加する。onSubmit={this.handleSubmit}>また、同じタイミングでフォーム内テキストをitemをnullにすることで、ToDoリストにitem追加後のフィーム内テキストを消す。Objectを参考にすれば良い。}これらを合わせた実装はこのようになる。}});ここまでの状態をブラウザで確認する。Listコンポーネントの作成ToDoFormのhandleSubmitをトリガーにフォーム内テキストを管理する配列を更新するupdateItems関数を定義する。<ToDoListItem>文字列</ToDoListItem>のようにすることでToDoListItemコンポーネントの定義内でthis.props.childrenから文字列を取得できる。}})これでReactを使ったToDoアプリケーションのベースが完成した。おまけ:Bootstrapで装飾するCSSでアレコレいじるのは面倒なので例によってCDN経由でBootstrapを使う。document.body);こんな感じのToDoアプリが出来た。Qiita特定の入力欄にフォーカスを合わせるJavaScriptのサンプル。スクリプトのソースと使用例を紹介。