react

React使ってSPAを作るよ(10)


React使ってSPAを作るよ目次

React使ってSPAを作るよ(9)の続きです。

ヘッダにフォームを追加する

まずはモックを修正します。

See the Pen EKVLMM by natsumi (@mayo31) on CodePen.18228

幅が狭いと見づらいと思うので、できればこのモックはPCで新規タブで表示していただいた方がいいかと思います!

共有したいURLを入力する欄と、送信ボタン。
さらに、URL入力欄をクリックしたときにタグの選択エリアが表示されます。
すでに登録してあるタグをチェックボックスのリストで表示。
それから、新しく追加したいタグをinputに入力するとそのタグのチェックボックスのDOMが追加されていく想定です。

実際には送信したときに既存のタグと重複していないか判定したりこまごま処理しないといけないんですが、とりあえず見た目を作ることだけ考えます。

Reactのコンポーネントを追加する

さて、前回せっかくコンポーネント別にファイルを分割したので、このフォームもどうせならヘッダにベタで書くよりも、別ファイルで管理したいですね。

既存タグのリストはJSONファイルを作っておきます。

そして、URLForm.jsxを用意します。

これまでにやってきたのと同じですね!

2016/03/07追記
#tag-inputがulの中に入っていておかしかったのでソースを少し修正しました。

そして、ヘッダに追加するためには、前回作ったSiteHeader.jsxを修正します。

app.jsxでヘッダコンポーネントを読み込むのと同じように、フォームのコンポーネントを読み込むだけです。
こうやって分割したJSXファイルを入れ子みたいにして読み込んでいけるんですね~
( ゚д゚)ウム

最終的にできあがるソースがこれですね。

あーもう…
#bodyと#containerのネストがいや~(つд⊂)エーン
なんかいい方法ないか調べよう…

新規タグを追加する部分は、正直jQueryで書いたら早いんですが、ここらへんでそろそろReactだったらどうやるのか?を勉強したいので、ユーザの入力操作に合わせてレンダリングしていくやり方を調べたいと思います!

React使ってSPAを作るよ目次

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です