「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でチャットアプリ作成の準備まで行った。

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

今回は、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 を作成。

現時点では、空のdiv要素をレンダリングするだけのComponentらしい。

（２）render() に、メニューのリストを配置する。

Semantic-UI-ReactのMenuとIconをインポート

src/components/ChannelList.tsx

複数のチャンネルを扱るために、チャンネル一覧を配列で定義し、map()　で取り出す。

src/components/ChannelList.tsx

（３）チャンネルが変更できるようにする。

URL変更を伴うメニューの実装

LinkとNavLinkをreact-router-dom からインポートする。

src/components/ChannelList.tsx

上記により、チャンネル名を選択した場合にURLが変更されるようになったらしい。。。

このChannelList.tsxでは、Reat.Componentを継承してChannelListをクラスとして定義したが、このComponentはpropsもstateも必要としないため、このような場合は、Functional Componentとすることが検討できるらしい。。。（？？？）

（４）ChannelListをFunctional Componentに書き換え

トップページへのリンクも追加

src/components/ChannelList.tsx

（５）src/components/index.ts の作成

（６）Routing設定Componentの実装

src/Routes.tsx の作成

最後に、

render(routes, document.getElementById('app’));

を追加。

（７）アプリケーションを読み込むためのindex.htmlを作成

dist/index.html

<div id="app"></div> のところに、アプリが読み込まれるらしい。

Routes.texの、

render(routes, document.getElementById('app’));

の’app’ と一致させている。

（８）アプリの起動。

タイプミスはないかな？動くかな？

npm run start

すぐにブラウザがたちあがり、その後、1分くらいして、下記の画面のようになった。

ふう。なんとか動いた。ほっとした。

ここまで4時間くらい。やっと動くものが見えてほっとした。

画面左の方にある、general をクリックすると、

なかなかかっこよい。

 

続く。。。