Node.jsデザインパターン 第2版

8.5

 ユニバーサル

JavaScript

アプリケーションの作成

279

8.5.1

 再利用可能なコンポーネントの作成

先に作成したサンプルプログラムには、

JoyceBooks

と

WellsBooks

という非常に似た

2

つのコン

ポーネントがありました。この

2

つのコンポーネントはほとんど同一です。違っているのは、異なるデー

タを使っているという点だけです。ここで、現実的なシナリオを考えて見ましょう。著者は何百人、い

や何千人もいるかもしれません……。そう、各著者専用のコンポーネントを作り続けるのは意味があり

ません。

この節では、より一般的なコンポーネントを作成し、ルーティングがパラメータで指定できるように

改良します。

一般的なコンポーネント

components/authorPage.js

の作成から始めましょう（

11_react_

reusable_components

）。

const React = require('react');

const Link = require('react-router').Link;

const AUTHORS = require('../authors');

class AuthorPage extends React.Component {

render() {

const author = AUTHORS[this.props.params.id];

return (

<div>

<h2>{author.name}'s major works</h2>

<ul className="books">{ ...