React Starter Kitで開発をはじめるときの新しくページを追加するときの手順についてです。
ページファイルですが、Jadeをつかったページ開発とReact Routesをつかったページ開発が用意されているみたいです。
基本、React Routesの方でページをつくっていけばいいと思います。Routesでつくるときのファイル構成はこんな感じ。
それでは新しくページを追加するときの流れをやっていきます。Accountページを追加してみます。
次のファイルを用意します。(Contactなどからフォルダをコピーして作るのが簡単です。)
- Account.js
- Account.scss
- index.js
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を編集します。
こんな感じで、追加したaccountページの情報を追記します。これでRoutes側のファイルは用意できました。新しいページの追加はこれで完了です。
最後にこのページを表示するためのリンクを追加します。componentフォルダのNavigationコンポーネントに追加してみました。
リンクをクリックして無事にページにアクセスできました。
React Starter Kitでページを追加する手順はこんな感じでした。新しいページの追加が確認できたのでTutorialサイトなどのサンプルコードなどいろいろ試していけるかなと思います。