15日目:サイト基本を完了してください

10296 ワード
beginners 100daysofcode react javascript テキストリンク
これは前の投稿の続きです.ここでは私の旅は、ランダムな引用マシンを完了です.

テストに合格🗒


FreecoDecampプロジェクトは通常、当社のウェブサイトをテストするために使用できるJSスクリプトが含まれます.
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
これは、サイトそのものの上で特別なUIをテストするでしょう.

まず最初に私がしたいことはHTMLタグを探すすべてのテストを特定のタグで完了することです.始めましたFive Server vscodeの拡張子で、動作を開始しました.

これは、ウェブサイトの最終的な構造は何かを私に教えてくれます.
その後、必要なライブラリを含んでいます.それから始めましたdart-sass and babel ウォッチオプションで.
それは反応コードのための時間です!

最低限


私がする次のことはdiv with id="wrapper" . これは、我々の反応ものの根源です.1時間後にこれがあります.

「何ですか.これで1時間かかりましたか?」悲しいことに、はい.私は、使用法について文句を言う誤りにつまずいたReactDOM ' reactdom/クライアント'の代わりに.エネルギーと時間のブラックホール😵‍💫.
反応は、サーバー側のレンダリングスクリプトをクライアント側と分離することを計画しています.これは、クライアント側のCDNリンクがない奇妙な原因を感じた.唯一の将軍ReactDOM CDNリンク.私はまだこれに対処する方法を知らない🧐.
それから、残りのコンポーネントを書き、親コンポーネントの中に置きました.
Freecodecampのテストは、私が正しいHTML構造を持っていることを確認しました.それはロジックのための時間です!

APIで遊ぶ


プロジェクトの名前が示すように、ユーザーがボタンを押すたびにランダムな引用符を表示する必要があります.
何百もの信頼できる引用をすることがあまりに賢くないので、私は彼らに役立つAPIを見つけなければなりませんでした.後でいくつかのGoogle検索、私は私が必要とするものを見つけました.

ルピーピービー / 引用表


ランダム引用API


引用表


Quotableは無料でオープンソースの引用APIです.もともとはAの一部として建てられたFreeCodeCamp プロジェクトあなたが貢献に興味があるならば、チェックしてくださいContributors Guide .
サーバ
名称
URL
説明
生産
API.引用可能です.io
パブリックAPIサーバ
演出
ステージング引用可能です.io
ステージングサーバーは、テスト目的のみです.マスターブランチは、すべてのコミット後にステージングサーバーに自動的に展開されます.変更がテストされたら、彼らは生産サーバーにプッシュされます.

API参照

  • Get random quote
  • List Quotes
  • Get Quote By ID
  • List Authors
  • Search Quotes (beta)
  • Search Authors (beta)
  • Get Author By Slug
  • List Tags

    • 例

  • Basic Quote Machine (CodePen)
  • React Quote Machine (CodeSandbox)
  • React Native App (Github)
  • Paginated Author List (codeSandbox)
  • Paginated Quote List (codeSandbox)

    • ランダム引用符

    GET /random

    Returns a single random quote from the database

    Query parameters

    param type Description
    maxLength Int The maximum Length in characters ( can
    …
    View on GitHub



    The code for fetching the API is very simple:

    Now, let's work on the UI!

    ファンシーエフェクト💫

    FreeCodeCamp gave an example for each project. This is the example for this one:

    I want to try and replicate what has been done here. So after two hours, I finally got a simple result!

    Notice that I didn't randomize the colors yet.
    Here's the code if you're curious:

    handleNewQuote() {
    const this_func = this;
    document.documentElement.style.setProperty("--color", "white");

    async function getApi() {
        return fetch("https://api.quotable.io/random?tags=famous-quotes")
            .then(Response => Response.json())
            .then(data => ({
                quote: data.content,
                author: data.author
            }));
    };

    async function updateQuote() {
        let responseData = await getApi();

        setTimeout(() => {
            this_func.setState(() => ({
                quote: responseData.quote,
                author: responseData.author,
            }));

            document.documentElement.style.setProperty("--color", "red");
        }, 1000);

    };

updateQuote();
}
    この関数は、ボタンが押されるたびに呼び出されます.また、CSS変数--color , テキストの色として使用します.変数を<HTML> タグ.

    余韻


    個人的に、これは反応物の大きいジャンプです.私がReduxを使わなかったことに注意してください.これは、状態が簡単で、不要なライブラリを負担したくないということです.私は、私のウェブサイト光が好きであると感じました.
    とにかく、他の皆さんがチャレンジしてくれることを願っています😁
    フォローミーオンGithub !
    また!
    ReactJSのリアルタイムアプリケーションの通知を処理する
    ASPでの作業NCacheのためのNet Core I DistributedCacheプロバイダー