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

この投稿は当初出版されたon my personal blog site .
我々は、我々の反応とFireBaseシリーズの第3の部分に達しました.インpart one , 私たちはすべてを準備する方法を学んだ.Last time , 新しいブログ記事を作成するページを作りました.今日、我々は我々のFireBaseリアルタイムデータベースから単一の記事を読んで、私たちのアプリでそれらを表示するつもりです.
最初の2つの記事を読んでいない場合は、代わりに使用できるいくつかのスターターコードがあります.ちょっとあなたがステップ1、2と5に従うことを確認してくださいthe first part あなたがこれ以上行く前に.

目次

クローン(パート3 )起動コード[オプション]

検査するPost コンポーネント

接続するPost コンポーネントの設定

(第3部)起動コードのクローン[オプション]

Part 2が正常に完了したら、この手順を飛ばしてください.それ以外の場合は、次のコマンドを端末で実行してコードをクローン化できます.

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

続行する前にファイルを変更する必要があります.src/firebase.js . あなたがそれを開くならば、あなたは以下を見ますconfig 定数

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>"
};

定数内の属性は、FireBaseプロジェクトにアプリケーションを接続するために使用されます.これらの値を見つけるには、プロジェクトの設定を左のサイドバーのギアのアイコンを使用してFirebase console . 「あなたのアプリ」の下の「Firebase SDKスニペット」にスクロールして、彼らが呼び出しているものから特質をコピーしてくださいfirebaseConfig . 属性を置換しますconfig これらの値を持つ定数.
今すぐ実行することができますnpm install それからnpm run start ブラウザでプロジェクトを表示するには.

2章コンポーネントの検査

このコンポーネントはsrc/pages/post.js ファイル.今のことを見てみましょう.
まず、URLからスラッグをつかみますRouter 我々は2009年に設立したsrc/App.js . コンポーネントRoute コンポーネントRouter を持っているmatch プロップは彼らに送りました.この小文字をコンポーネントに送信する他の方法がありますover here .
次に、我々はpostSlugs 本当のブログ記事で存在するスラグの配列である定数.あなたがデータベースを見るならば、これらは我々が第1で第2のブログ柱に与えたスラグにマッチします.問題は、このコードが動的でなく、データベースにも接続されていないことです.数分でこれに戻ってきます.
次に、私たちはslug URLバーの1つはpostSlugs . それがそうでないならば、ユーザーは実際に存在しないポストを見ています.だから、我々はRedirect 我々に404 コンポーネント.あなたは、より多くを読むことができますRedirect over here .
最後に、私たちのリターンステートメントがあります.たった今、それはすべての有効なポストのために同じものを返しますslug . 代わりに、FireBaseに格納されている本当のブログ投稿コンテンツを表示します.

3 .ポストコンポーネントをFirebaseに接続する

まず、インポートを追加しましょうgetFirebase 機能は、データベースから読むことができます.我々はそれをしている間、我々もインポートする必要がありますuseState 物事のカップルを管理するために.

import React, { useState } from "react";

import { getFirebase } from "../firebase";

次に、どうしたらいいか考えてみましょうuseState . 心に浮かぶ最初のことはloading 状態.これは、データベースから何かをロードしようとしているかどうかを示すブール値です.また、私たちのための変数が欲しいcurrentPost データベースから読み取ろうとしています.置換するpostSlugs 次の2行のコードを行

const [loading, setLoading] = useState(true);
const [currentPost, setCurrentPost] = useState();

ページがロードされているユーザーを示すために、ページが異なる何かを示すことができるように、我々はローディング状態で始めたいです.アニメーション、GIF、プレーンテキスト、あなたが何を喜ばせることができます.今のところ簡単にしておいてください.

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

私たちのデータベースコールは、この前に行く必要がありますif しかし声明.私たちがそれを置くならば、それは決して達しませんif ステートメントはコードを初期化します.我々が我々の呼び出しの後で加えるものは、ここにありますuseState とif ステートメントを書きました.

if (loading && !currentPost) {
  getFirebase()
    .database()
    .ref()
    .child(`/posts/${slug}`)
    .once("value")
    .then(snapshot => {
      if (snapshot.val()) {
        setCurrentPost(snapshot.val());
      }
      setLoading(false);
    });
}

ポストが存在するかどうかのチェックを更新しましょう.更新postDoesNotExist 次に示す

const postDoesNotExist = !currentPost;

これらの条件は最初は少し混乱するかもしれません.何をチェックしていますか?ここで実行する手順をリストするのに役立つかもしれません.

最初の負荷loading が真でありsetCurrentPost が定義されていないので、if 文.一旦我々がそれを作るならばthen , if snapshot.val() オブジェクトを返すslug ), コールsetCurrentPost , メイキングcurrentPost 未定義.

アフターsetCurrentPost コール:この呼び出しでコンポーネントを再描画します.我々は到達if (loading && !currentPost) 再びステートメント.以来currentPost が定義されているので、再度コードブロック内に移動しないため、データベースへの呼び出しを不必要にしないようにします.我々はif (loading) 文.loading がtrueの場合、コンポーネントはいくつかのテキストを返し、何もしません.

アフターsetLoading コール:この呼び出しでコンポーネントを再描画します.loading が偽ですcurrentPost が定義されていないか、オブジェクトであるかもしれません.それがどこだif (postDoesNotExist) チェックイン.我々がデータベースからポストを得なかったならば、我々はAを返しますRedirect , 前に.さもなければ、我々は我々の決勝に続きますreturn どこで我々はポストを示します.

私はこれらのステップが圧倒的でないことを望みます、そして、彼らはあなたがフックと州管理の力を見るのを手伝います!彼らは、私に反応について最もクールなもののいくらかです.
以下は、私が投稿している方法です.

return (
  <>
    <img src={currentPost.coverImage} alt={currentPost.coverImageAlt} />
    <h1>{currentPost.title}</h1>
    <em>{currentPost.datePretty}</em>
    <p dangerouslySetInnerHTML={{ __html: currentPost.content }}></p>
  </>
);

私も12px 余白<p> 元素src/index.js .
今、あなたがクリックしたときあなたのポストの1つにリンクするか、手動で移動してください、あなたはこのように何かを見るべきです:

私はニュースレターを知っていましたか?📬
私が新しいブログ柱を発表するか、主要なプロジェクト発表をするとき、あなたが通知されたいならばhttps://ashleemboyer.com/newsletter .
どうぞsend me an email または任意の質問や懸念がある場合.私はあなたからの聴聞会が大好き!😊