react

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


React使ってSPAを作るよ目次

React使ってSPAを作るよ(1)の続き。

今回はJSXを触っていきたいと思います。
前回環境構築をした時に使われていたapp.jsxというファイル。これを毎回コンパイルしているので、まずはこの1ファイルに書いていっちゃいましょう。

コンポーネント化するコードの分割ポイントをチェック

その前に、出力したいHTMLの構造を理解しておかないといけませんね。
モックの記事リストの構造ですが、下記のul#article-listが一番大枠となっていて、liごとに1記事分のarticleが入っています。

articleの中身は、

・記事のタイトルや画像、description、URLが含まれたリンク

・記事に対してつけたタグのリスト

・読んだ人のリスト

・コメント

となっています。

まあ、単純な造りですので、なんとなくコンポーネント化しやすそうですね。

Reactの特徴であるJSXでの記述に書き換えていく

まずはJSXの枠組みから。

最後のレンダリングのところで、#article-listの中にArticleListを描画することになります。ArticleListというのはコンポーネントの名前(Class)ですので、好きな名前で構いません。
では、このArticleListの中身を作っていきましょう。

#article-listの中に入るのはもちろんarticleの入ったliたちなので、その要素たちを渡してあげるんですが、実際には何件ものデータを入れたliを連続で描画することになります。
for文とか出てきそうな雰囲気ですね。
でも最初なのでひとまず中身を作ることだけ考えて進めていきます。

最終的には、こんな感じで各コンポーネントをまとめたいと思います。

記事リンクのコンポーネントを作る

上記の最終形態を目指して、まずは記事リンクの「ArticleArea」コンポーネントを作ります。

ド━(゚Д゚)━ン!!

「ArticleLink」Classに、articleTitleといったプロパティの値を指定してあげることができます。
気を付けないといけないのが、background-imageの設定の仕方。Reactだと、インラインのstyleは文字列として指定できないんですね。
公式ドキュメントのInline Stylesにあるように、いったん変数に入れないとダメみたい。

いったんこの状態で確認すると、記事リンクが1件レンダリングされます。モックにあるタグリストやコメントはまだコンポーネントがないのでなにも出てきませんね。

react

次回、残りのコンポーネントも加えていきます。

React使ってSPAを作るよ目次

スポンサードリンク

菜摘

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

コメントを残す

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