Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

6章アプリケーションのビルド

Reactに組み込みのコンポーネントやカスタムコンポーネントについての基礎をすべて学び、必要に応じてJSXを使ってユーザーインタフェースを定義し、ビルドとデプロイも行えるようになりました。ここからは、より本格的なアプリケーションを作ってゆきましょう。

作成するアプリケーションの名前はWhinepad（ワインパッド、whineは「ぶつぶつ言う」の意）といいます。ワインについてのメモや評価を記録できるアプリケーションです。実際にはワインにかぎらず、whineしたいものなら何でもかまいません。CRUD（create、read、update、delete）アプリケーションとして期待されるすべての機能が実装されます。クライアント側のアプリケーションとして、データもブラウザ内に保持されます。ここでの目標はReactについて学ぶことであり、React以外の部分（データの格納や表現形式など）についての解説は最小限にとどめます。

この章での作業を通じて、読者は次の点について学べます。

• 再利用可能な小さいコンポーネントを使い、アプリケーションを組み立てます。
• コンポーネント間でインタラクションを行い、協調動作させます。

6.1　Whinepadバージョン0.0.1

5章で作成したアプリケーションのひな型を元に、Whinepadを作ってゆきましょう。Whinepadは、ユーザーが試してみたものについて評価やメモを記録できるアプリケーションです。最初の画面には、今までに評価してきたものを表形式で表示することにします。つまり、3章で作った<Excel>コンポーネントを再利用します。

6.1.1　セットアップ

まず、ひな型のアプリケーションreactbook-boiler