ビルド反応＆firebaseブログサイト:パート1

この投稿は当初出版されたon my personal blog site .
ようこそ!これは、どのように反応し、FireBaseを使用してブログのサイトを構築する方法をお教えします投稿シリーズの最初のです.これはおそらくすべてを設定するために行うことがほとんどないので、おそらく最長されます.
このポストの終わりには、あなたのアプリをFirebaseに接続してからいくつかのデータをプルする方法を学びますよFirebase's Realtime Database . 次回は、“CREATE POST”機能を使用してCRUD関数の設定を開始します.その後、私たちは、私たちのCRUD関数を簡単にし、より興味深い機能を作成しやすくするフロントエンド上でインターフェイスを作るために何ができるかを見るでしょう.
準備ができましたか?)

目次

ファイアベースにサインアップ

プロジェクトの作成

起動コード

アプリケーションにfirebaseを接続する

データベースにデータを追加する

データベースから読み込む

ラッピング

1 .ファイヤーベースのサインアップ
これは簡単です!ヘッドオーバーFirebase's website ボタンをクリックします.ページは次のようになります.

あなたが既に1つにサインされていない場合は、Googleアカウントを選択するように求められます.いったん署名したら、プロジェクトを作成できます.ここでは、そのページがFireBaseに新しいものであるかのように見えます.


プロジェクトを作成する
つのステッププロセスを開始する「プロジェクトを作成する」ボタンをクリックします.まず、プロジェクト名を入力します.プロジェクトのネーミングreact-firebase-blog . 必要に応じてプロジェクトIDを変更することができますが、自動的に生成されたものと一緒に行くのも結構です.

ステップ2は私たちがプロジェクトのためにGoogle Analyticsをセットアップしたいかどうか尋ねます.私は今すぐ選択しています.このオプションを選択すると、プロセスはここで終了します.そうでなければ、別のステップです

をクリックして“プロジェクトを作成する”と、ローディング画面に持って来るでしょう.“あなたの新しいプロジェクトは準備ができている”と言うと、“続行”ボタンをクリックします.


3 .起動コードのクローン
次のコマンドを端末で実行することで、起動コードをクローン化できます.

git clone https://github.com/ashleemboyer/react-firebase-blog-starter.git

我々が持っているものを見ましょう!前方に移動し、プロジェクトを変更することによって圧延を得るreact-firebase-blog-starter ディレクトリと実行npm install , 実行中npm run start . 以下を参照してください.

ああ!先に行くと少しプロジェクトを探る.あなたが始めるいくつかの領域をハイライトします.
src/App.js我々は4を持っているRoutes : ホームページ、404、およびブログのポストスラグ(別名URL)を処理するための別の.あなたはなぜマッチしないパスを扱うための1つがない理由を疑問に思うかもしれません.良いキャッチ!我々は実際にはPost コンポーネントsrc/pages/post.js ). 先に行きましょう.
src/pages/post.js我々はルータを使用しているのでsrc/App.js (から)react-router-dom ), コンポーネント名Route 要素は match 彼らの小道具に渡されます.我々は、URLバーからのポストのスラグを得ることができますmatch.params.slug , 次に、サイト上でサポートするスラグのリストに比較してください.それらはハードコード化されているpostSlugs 現在の変数.スラグが存在しないならば、我々は帰りますRedirect 404ページに.そうでなければ、正しいポストを表示します.
src/pages/home.jsまず、あなたはblogPosts 変数.我々はハードベースに我々のアプリを接続するまで我々の記事をコーディングしている.すべてのこのページはsection すべてのブログ記事の要素blogPosts 配列.あなたの後に何かを変更する必要はありませんreturn 我々がこのシリーズを通して我々の方法を作るので、声明.

Firebaseをアプリケーションに接続する
まず、インストール firebase 走らせるnpm install firebase プロジェクトのルートディレクトリにあります.
では、JavaScriptファイルをsrc プロジェクトのディレクトリとそれを呼び出すfirebase.js . ここではFireBaseの設定を定義し、FireBaseオブジェクトを初期化します.
このファイルにコードを追加する前に、FireBaseプロジェクトに必要な設定データを取得しましょう.左側のサイドバーの設定ギアをクリックし、メニューから「プロジェクト設定」を選択して、FireBaseプロジェクトの設定に移動します.ページの“あなたのアプリ”セクションにスクロールします.それはおそらく下にある.あなたのプロジェクトには何のアプリもありません

円をクリックします</> WebアプリケーションにFireBaseを追加するには.あなたはアプリのニックネームを求められます.私は鉱山を呼んでいるReact Firebase Blog .

をクリックして“登録アプリ”ボタンをクリックし、ページを読み込み終了後、変数と呼ばれるいくつかのHTMLコードが表示されますfirebaseConfig . JSON属性をその変数からコピーし、それらのためにfirebase.json ファイル.プロジェクトの設定に戻るには“コンソールに続行”ボタンをクリックします.あなたが以前にコピーしたJSON属性を失うならば、あなたは我々のアプリがリストされる「あなたのApps」セクションの下で、あなたは再びここで彼らを見つけることができます.
我々のところに戻りましょうfirebase.js . 設定データを準備し、次のコードに接続します.

import firebase from "firebase/app";
import database from "firebase/database";

const config = {
  apiKey: "<YOUR-API-KEY>",
  authDomain: "<YOUR-AUTH-DOMAIN>",
  databaseURL: "<YOUR-DATABASE-URL>",
  projectId: "<YOUR-PROJECT-ID>",
  storageBucket: "<YOUR-STORAGE-BUCKET>",
  messagingSenderId: "<YOUR-MESSAGE-SENDER-ID>",
  appId: "<YOUR-APP-ID>",
};

let firebaseCache;

export const getFirebase = () => {
  if (firebaseCache) {
    return firebaseCache;
  }

  firebase.initializeApp(config);
  firebaseCache = firebase;
  return firebase;
};

The getFirebase() 関数は、呼び出しを保証するinitializeApp 一度.

5 .データベースにデータを追加する
我々は実際にそれを追加するまで我々はデータベースから任意のデータを読むことができない!あなたのFireBaseプロジェクトに戻って、サイドバーで「発展する」の下で「データベース」オプションをクリックしてください.あなたは“Real Time Database”セクションを見つけるまでページを少し下にスクロールする必要があります.

このセクションの「データベースを作成」ボタンをクリックします.あなたは、モーダルがあなたのデータベースのためのセキュリティ規則についてあなたに尋ねて来るのを見ます.

“テストモードで起動”を選択し、“有効”ボタンをクリックします.データベースは空で、次のように読みます.

<YOUR-PROJECT-ID>: null

あなたが既に知らなかったならば、リアルタイムデータベースはちょうどJSONオブジェクトです.あなたはそれについてもっと読むことができますhere .
開始する最も速い方法はJSONファイルを使用してデータをインポートすることです.私は、あなたが密接に沿って続いていて、同じものがここにあるものとして示すために、あなたのためにこれを提供しています.このファイルは、スタータープロジェクトのルートディレクトリにあります.「3つのドット」メニューをクリックし、「インポート」「JSON」を選択してファイルをアップロードします.ファイルを参照し、[インポート]ボタンをクリックします.
今、あなたは展開し、探索することができますいくつかのデータ属性を持っている必要があります!


データベースからの読み込み
ついに!我々がすべてを待っていた瞬間.〜についていきましょうsrc/home.js そして、我々がデータベースから若干のものを得ることができるかどうか見てください!
まず、ファイルの先頭にいくつかのインポートを追加します.

// You only need to add the `{ useState }` portion here.
import React, { useState } from "react";

// This is new.
import { getFirebase } from "../firebase";

さあ、ゲットしましょうblogPosts 状態にし、データベースからそれらを読みます.あなたは、より多くを読むことができますuseState フックオーバーhere . 我々はまた、Aを加えるつもりですloading ので、簡単に2つのことができます.

確認するだけでコールgetFirebase 一度

データを待つ間、ユーザーにローディング画面を表示します

置換するblogPosts 定数を以下のコードで指定します.

const [loading, setLoading] = useState(true);
const [blogPosts, setBlogPosts] = useState([]);

if (loading && !blogPosts.length) {
  getFirebase()
    .database()
    .ref("/posts")
    .orderByChild("date")
    .once("value")
    .then(snapshot => {
      let posts = [];
      const snapshotVal = snapshot.val();
      for (let slug in snapshotVal) {
        posts.push(snapshotVal[slug]);
      }

      const newestFirst = posts.reverse();
      setBlogPosts(newestFirst);
      setLoading(false);
    });
}

if (loading) {
  return <h1>Loading...</h1>;
}

多田!あなたは、我々が以前持っていた全く同じものを見るべきです.🎉

ラッピング
ここに何トンかの物があった.ご質問やご関心がございましたら、どうぞsend me an email または!あなたが立ち往生しているか圧倒されるならば、あなたに手を与えるようにします.我々の新しい、空想的なブログ・サイトのためにCRUD機能を書くことをカバーする明日のポストのために、とどまってください!あなたが静かに感じているならば、それを前にそれを与えたいならば、私はあなたにFirebase documentation .
私はニュースレターを知っていましたか?📬
私が新しいブログ柱を発表するか、主要なプロジェクト発表をするとき、あなたが通知されたいならばhttps://ashleemboyer.com/newsletter .