今回やること

firebaseをReactアプリにインストールする
firebaseプロジェクトを作成する
データベースを作成する
接続用コンポーネントを作成する
データを出し入れしてみる

1と2はすでにやってある人は飛ばしていいデモよ！

firebaseをReactアプリにインストールする

Reactアプリのディレクトリでnpm installするデモ

npm install firebase@latest

firebaseプロジェクトを作成する

説明しなくてもわかると思うけど、コンソール入ってプロジェクトを追加！

あとは適当に名前をつけて続行すれば大丈夫デモ(適当)

データベースを作成する

サイドバーからDatabaseを選択するとデータベースの作成ボタンが現れるのでクリックデモ！

「本番環境で開始」「テスト環境で開始」があるデモ。

「本番環境で開始」を選ぶとルールで設定したクライアントからしかアクセスできなくなるデモ。
「テスト環境で開始」を選ぶとどこからでもアクセスできるデモ。

今回はテスト環境を選択するデモ。
これはリリースするまでに本番環境に設定し直す必要があるんだけど、30日後に自動的に本番環境に移行してくれるみたいデモ。
開発中にいきなりアクセスできなくなるので、はやめに本番環境用に設定しておいた方が良いデモね。（今回はやらないけど）

リージョンはasia-northeast1（東京）にとりあえず設定。

アジアリージョンのロケーションはこんな感じ

接続用コンポーネントを作成する

サイドバーからOverview→</>アイコン（わかりづらい）

アプリ名を登録（プロジェクト名じゃなくてアプリ名デモ。複数のクライアントから呼ぶ予定がある場合はReactAppとかWebAppとか適当につけたらいいと思うデモ）したら次に埋め込むためのコードが表示されるデモ。
設定があらかじめ埋め込んであるデモ。

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxx.firebaseapp.com",
    databaseURL: "https://xxxxxxxxxxxxxxx.firebaseio.com",
    projectId: "xxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxx.appspot.com",
    messagingSenderId: "xxxxxxxxxxxxxxx",
    appId: "?????????????????????????????????????",
    measurementId: "xxxxxxxxxxxxxxx"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

このうち今回使うのは// Your web app's Firebase configuration以下だけデモ。

適当な名前（firebase.jsとか）でこんな感じでコンポーネントを作成するデモ。

import firebase from 'firebase';
// Your web app's Firebase configuration
var firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxxxxxxxxx.firebaseio.com",
  projectId: "xxxxxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxxxxxx",
  appId: "?????????????????????????????????????",
  measurementId: "xxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

export default firebase;

export default firebaseを忘れずに

データを出し入れしてみる

入れ

import './さっき作ったfirebase.jsのパス'

firebase.firestore().collection('test').add({id: 'testid', name: 'test'})
  .then(function (docRef) {
    console.log("Document written with ID: ", docRef.id);
  })
  .catch(function (error) {
    console.error("Error adding document: ", error);
  });

出し

firebase.firestore().collection('test').get().then((querySnapshot) => {
  querySnapshot.forEach((doc) => {
      console.log(doc.data());
  });
});;

出し入れっていうけど入れてから出すもんだよね...

まとめ

簡単！！！！

Twitterやってるデモ！仲良くしてくださいデモ！@akumachanit

[超簡単] Reactからfirestoreにアクセスするデモ！