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

2018年5月29日

前回は、第5章について写経して、Firebaseでチャットアプリのサーバを構築した。

http://twosquirrel.mints.ne.jp/?p=22789

引き続き、以下の本の第6章の写経にtryしてみる。

この本を買った理由は、

（１）チャットアプリのサーバを、Firebaseで作成し、

（２）フロントエンドを、React, Vue, Angularで作る
( => Angularを参考にしてIonicで作れば、すぐにスマホアプリが作成できる)

とうたっているからである。このうち、Reactでチャットアプリのフロントエンドを作成するのが第6章である。

がんばってやってみたい。

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

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

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

（開発環境）(構築方法はhttp://twosquirrel.mints.ne.jp/?p=22642で記載した。)
Windows 8.1 Pro
VisualStudioCode 1.23.1
node v8.11.2
npm v6.1.0
webpack-cli 2.0.11
webpack 4.4.1
npx v10.2.0
webpack-dev-server 3.1.1

babel-loader@7.1.4 style-loader@0.20.3 css-loader@0.28.11 babel-core@6.26.0 babel-preset-env@1.6.1 babel-preset-react@6.24.1

eslint@4.19.1

（構築する環境）
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

（１）Reactの基礎知識

ここはおバカな私にはさっぱりわからなかった。

とりあえず、文章を写して、何回か繰り返し読んでみた。

●Component

Componentって何なのかよく分からない。。。

WEBページの見栄えを部品ごとに分けて、そのひとつひとつの部品をcomponentと言っているのかもしれない。。。

●props と　state

propsはComponentに対する入力で、親Componentから子Componentに渡される（降ろされる）ものらしい。

propsは読み込み専用で、変更してはいけないらしい。。。

stateはComponent自体が持つ状態。ユーザが入力中のテキストなどを「状態」と言い、変更可能らしい。

stateを変更する場合は、必ず、this.setState()を利用するらしい。

●Componentのライフサイクル

ライフサイクルとは、

「Componentがマウントされたとき」

「Componentがpropsを受け取るとき」

といった、Componentの状態の推移のこと。（？？？）

Reactもどんどんバージョンアップしていて、v16.2(2018年3月時点), v16.3, v17の間でもいろいろ変わるらしい。（私には詳細理解不可能。）

●Componentライフサイクルに関わるメソッド

以下の解説を何回か読んでみたが、よく分からなかった。。。後述のチャットアプリ作成のときに、また戻ってきて読んでみようと思う。

componentDidMount

componentWllUnmount

componentWillRecieveProps

componentDidUpdate

shouldComponentUpdate

componentDidCatch

●公式チュートリアルとスターターキット

create-react-app

react-starter-kit

react-firebase-starter

●コミュニティとサードパーティパッケージ

Reactはフルスタックフレームワークではないため、サードパーティパッケージと組み合わせて利用することが多い。

Data Fetching には、Axios または、Apollo(GraphQLのクライアント)など。

UI Component には、Semantic UI React や、Material-UI　など。

（２）Reactを利用して、チャットアプリを作成。

ここからが本題。写経していきたい。

●アプリケーションの完成イメージ

→絵にかいておく。

●実装するComponent

Routing設定：Routes.tsx

チャンネル一覧：ChannelList.tsx

チャンネル詳細：Channel.tsx
メッセージフィード：MessageFeed.tsx　メッセージの一覧を管理するComponent
メッセージフォーム：MessageForm.tsx　新規メッセージを送信する役割を持つComponent

チャンネル一覧：ChannelList.tsx

●実装の順序

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

２．Routing設定Componentを実装。

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

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

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

●使用するパッケージ

React 16.2.0
react-router 4.2.0
semantic-ui-react 0.77.1
axios 0.17.1

（３）プロジェクト作成とパッケージのインストール

はい、個人的にReactの大嫌いなところは、環境構築のあまりにも面倒なことです。はい。以下をインストールするだけで30分くらいかかりました。

C:/js/react-sample-app/ フォルダを作成し、そのフォルダをVisualStudioCodeで開く。

ターミナル(cmd.exe)を表示するために、”Ctrl + @”

npm init -y

アプリケーションが依存するパッケージをインストール

npm i react@16.2.0 react-dom@16.2.0

npm i react-router@4.2.0 react-router-dom@4.2.2

npm i semantic-ui-react@0.78.3

npm i axios@0.18.0

開発環境用パッケージのインストール（typescriptを使用するためかな？）

npm i -D @types/react@16.0.40 @types/react-dom@16.0.4
npm i -D @types/react-router@4.0.22 @types/react-router-dom@4.2.4
npm i -D typescript@2.7.2 ts-loader@4.0.1
npm i -D webpack@4.1.1 webpack-cli@2.0.10 webpack-dev-server@3.1.0

npm i -D tslint@5.9.1
npm i tslint-config-typings@0.3.1