「React，Angular，Vue.js，React Nativeを使って学ぶはじめてのフロントエンド開発」を写経してみる（４）React+Firebaseでチャットアプリ作成その２

2018年5月29日

React，Angular，Vue.js，React Nativeを使って学ぶはじめてのフロントエンド開発
原一浩 (著), taisa (著), 小松大輔 (著), 永井孝 (著), & 4 その他
技術評論社 (2018/5/9)
紙の本の価格：￥ 2,462
Kindle 価格: ￥ 2,280

Firebase+React, Firebase+Angular, Firebase+Vue.js, Firebase+React nativeで同じチャットアプリを作成しているソースコードの解説が書いてある上記の本を読んでいる。前回は、第6章の前半、Reactでチャットアプリ作成の準備まで行った。

「React，Angular，Vue.js，React Nativeを使って学ぶはじめてのフロントエンド開発」を写経してみる（３）React+Firebaseでチャットアプリ作成その１

今回は、Componentの実装を順番に行っていく。（写経していく。）

ソースコードは、以下に記載されているので大変ありがたい。

https://github.com/okachijs/jsframeworkbook/tree/master/3_6_react

（開発環境）（構築方法はこちら１とこちら２へ）
Windows 8.1 Pro
VisualStudioCode 1.23.1
node v8.11.2
npm v6.1.0

react@16.2.0 react-dom@16.2.0
react-router@4.2.0 react-router-dom@4.2.2
semantic-ui-react@0.78.3
axios@0.18.0

@types/react@16.0.40 @types/react-dom@16.0.4
@types/react-router@4.0.22 @types/react-router-dom@4.2.4
typescript@2.7.2 ts-loader@4.0.1
webpack@4.1.1 webpack-cli@2.0.10 webpack-dev-server@3.1.0
tslint@5.9.1
tslint-config-typings@0.3.1

（０）Component実装の流れ（前回の再掲載）

１．チャンネル一覧Componentの実装

２．Routing設定Componentを実装。

３．メッセージフィードComponentを実装

４．チャンネル詳細にComponentを実装。このとき、Routing設定を更新。

５．メッセージフォームComponentを実装

（１）チャンネル一覧Componentの実装

C:/js/react-sample-app/ フォルダに、

C:/js/react-sample-app/src/components/ChannelList.tsx を作成。