FirebaseのHostingにCloud Firestoreを利用するReactアプリをdeployする方法

npmで以下のライブラリをインストールする：
・create-react-app
・firebase-tools

Firebaseコンソールで「プロジェクトを追加」、<API KEY>と<PROJECT ID>を保存する。あとで確認する場所はFirebase console画面左側、歯車アイコンのSettingsからプロジェクトの設定→全般の「 プロジェクト名」と「ウェブ API キー」。

Cloud FirestoreでDBを作成する（Firebase Consoleの画面左側、Databaseを選択して右側のCreate Databaseだっけ？を押す）。

Terminal

$ create-react-app myapp
$ cd myapp
$ firebase login
（Firebaseで作成したプロジェクトを選択する）
$ firebase init
（設定内容：利用するサービス＝全部選択、SPAとして使う=Yes,既存のindex.htmlを置き換える=No）

firebase.json

（前略）
"hosting": {
  "public": "build", // public -> buildに変更
  "ignore": [
（後略）

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
// ここから追加
import firebase from 'firebase';
var config = {
apiKey: "<YOUR API KEY>",
authDomain: "<YOUR PROJECT ID>.firebaseapp.com",
projectId: "<YOUR PROJECT ID>",
};
firebase.initializeApp(config);
export const db = firebase.firestore();
（以下デフォルトのまま）

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import {db} from './index.js'; // 追加
class App extends Component {
// コンストラクタを追加
constructor(props) {
  super(props);
  var docRef = db.collection('users').doc('alovelace');
  var setAda = docRef.set({
    first: 'Ada',
    last: 'Lovelace',
    born: 1815
    });
  }
render() {
  return (
    <div className="App">
    </div>
  );
  }
}
export default App;

Terminal

$ firebase serve （ローカルで動作確認する）
$ firebase deploy

Firebase consoleのCloud Firestore画面を表示して、データにエイダ・ラブレスの情報が保存されていれば成功。ありがちな組み合わせなのに、Google公式ドキュメントにすらFirebase, Hosting, Cloud Firestore + Reactの設定方法が載っていなくて苦労した。
尚、この手順は記事作成時点で有効なのであり、今後Firebaseの仕様変更により変わる可能性がある。