tyoshikawa1106のブログ

- Force.com Developer Blog -

React:React Starter Kitでページを追加する手順

React Starter Kitで開発をはじめるときの新しくページを追加するときの手順についてです。

f:id:tyoshikawa1106:20160518161753p:plain

React Starter Kit


ページファイルですが、Jadeをつかったページ開発とReact Routesをつかったページ開発が用意されているみたいです。
f:id:tyoshikawa1106:20160518161641p:plain


基本、React Routesの方でページをつくっていけばいいと思います。Routesでつくるときのファイル構成はこんな感じ。
f:id:tyoshikawa1106:20160518162549p:plain


それでは新しくページを追加するときの流れをやっていきます。Accountページを追加してみます。
f:id:tyoshikawa1106:20160518162730p:plain


次のファイルを用意します。(Contactなどからフォルダをコピーして作るのが簡単です。)

  • Account.js
  • Account.scss
  • index.js

f:id:tyoshikawa1106:20160518163012p:plain:w300

Account.js
import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Account.scss';

const title = 'Account Us';

function Account(props, context) {
  context.setTitle(title);
  return (
    <div className={s.root}>
      <div className={s.container}>
        <h1>{title}</h1>
        <p>...</p>
      </div>
    </div>
  );
}

Account.contextTypes = { setTitle: PropTypes.func.isRequired };

export default withStyles(s)(Account);
Account.scss
@import '../../components/variables.scss';

.root {
  padding-left: 20px;
  padding-right: 20px;
}

.container {
  margin: 0 auto;
  padding: 0 0 40px;
  max-width: $max-content-width;
}
index.js
import React from 'react';
import Account from './Account';

export default {

  path: '/account',

  action() {
    return <Account />;
  },

};


上のようにファイルを用意できたら次はRoutesフォルダ内のindex.jsを編集します。
f:id:tyoshikawa1106:20160518163521p:plain


こんな感じで、追加したaccountページの情報を追記します。これでRoutes側のファイルは用意できました。新しいページの追加はこれで完了です。


最後にこのページを表示するためのリンクを追加します。componentフォルダのNavigationコンポーネントに追加してみました。
f:id:tyoshikawa1106:20160518163857p:plain


リンクをクリックして無事にページにアクセスできました。
f:id:tyoshikawa1106:20160518164010p:plain


React Starter Kitでページを追加する手順はこんな感じでした。新しいページの追加が確認できたのでTutorialサイトなどのサンプルコードなどいろいろ試していけるかなと思います。