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

最終更新日


React使ってSPAを作るよ目次

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

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

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

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

articleの中身は、

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

    <a href="" target="_blank" style="background-image: url(https://source.unsplash.com/random);">
      <h2>記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル</h2>
      <p>descriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescription</p>
    </a>

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

    <ul class="tag-list">
      <li data-tag="タグ1"><a href="">タグ1</a></li>
      <li data-tag="タグ2"><a href="">タグ2</a></li>
      <li data-tag="タグ3"><a href="">タグ3</a></li>
    </ul>

・読んだ人のリスト

    <h3>読んだ</h3>
    <ul class="account-list">
      <li data-account="アカウント1" style="background-image: url(https://source.unsplash.com/random);"></li>
      <li data-account="アカウント2" style="background-image: url(https://source.unsplash.com/random);"></li>
      <li data-account="アカウント3" style="background-image: url(https://source.unsplash.com/random);"></li>
      <li data-account="アカウント4" style="background-image: url(https://source.unsplash.com/random);"></li>
      <li data-account="アカウント5" style="background-image: url(https://source.unsplash.com/random);"></li>
    </ul>

・コメント

    <h3>コメント</h3>
    <ul class="comment-list">
      <li><span data-account="アカウント1" style="background-image: url(https://source.unsplash.com/random);"></span><span>コメントコメントコメントコメントコメント</span></li>
      <li><span data-account="アカウント1" style="background-image: url(https://source.unsplash.com/random);"></span><span>コメントコメントコメントコメントコメント</span></li>
      <li><span data-account="アカウント1" style="background-image: url(https://source.unsplash.com/random);"></span><span>コメントコメントコメントコメントコメント</span></li>
    </ul>

となっています。

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

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

まずはJSXの枠組みから。

var React = require('react');

//ここにコンポーネントを書いていく

//レンダリング
React.render(
  <ArticleList />,
  document.getElementById('article-list')
);

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

//記事リストコンポーネント
var ArticleList = React.createClass({
  render: function() {
    return (
    <li>
      <article>
    //ここにコンポーネントを書いていく
      </article>
    </li>
    );
  }
});

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

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

//記事リストコンポーネント
var ArticleList = React.createClass({
  render: function() {
    return (
    <li>
      <article>
        <ArticleArea />
        <TagArea />
        <h3>読んだ</h3>
        <MarkArea />
        <h3>コメント</h3>
        <CommentArea />
      </article>
    </li>
    );
  }
});

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

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

ド━(゚Д゚)━ン!!

var React = require('react');

//記事リンク
var ArticleLink = React.createClass({
  render: function() {
    var articleImage = {
      backgroundImage : "url(" + this.props.image + ")" 
    };
    return (
      <a href={this.props.articleUrl} target="_blank"  style={articleImage}>
        <h2>{this.props.articleTitle}</h2>
        <p>{this.props.articleDescription}</p>
      </a>
    );
  }
});

//記事リンクエリア
var ArticleArea = React.createClass({
  render: function() {
    return (
        <ArticleLink articleUrl="/" image="https://source.unsplash.com/random" articleTitle="記事タイトル" articleDescription="discription"></ArticleLink>
    );
  }
});

//記事リストコンポーネント
var ArticleList = React.createClass({
  render: function() {
    return (
    
  • ); } }); //レンダリング React.render( , document.getElementById('article-list') );

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

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

    react

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

    React使ってSPAを作るよ目次