学生が技術的な技術を育てるのを援助することに集中して、それはすでに完全なスタックキャンプの私の週5です.私は週4で学んだことです.

今まで何をしていたの☹️☹️

以前は皆と同じようにコードを習い始めていたとき、Cプログラミング言語で始めましたが、途中で左に曲がってC +に移りました.おかしい部分は途中で左から別の言語に移りました.
それで、基本的に、私はすべてのジャックになりました.😅😅
それは最初の何かを開始する前に、最初に何かを開始する前に、それはあなたが今やっているか、将来的に何をしているかに関係していることを確認してください、あなたはそれをやって興味を持っている場合は、すべての上に、あなたはあなたがしていない場合は、物事を途中で残して移動するつもりです.
メインフォーカスはゆっくりと着実に行ってレースを終了する必要があります高速実行しないと途中で停止します.

今週は何をしましたか🤨🤨

今週はAPIをアプリケーションプログラミングインタフェースについて学びました.基本的には、2つのアプリケーションが互いに話をするのを許すインターフェースです.
私は外部APIからデータを取得し、私のアプリでそれを表示することを学びました.
はい、私はまた、ネットワークコール(フォーム提出を使用して、クリックまたは単にページを再読み込み)を使用しているたびにランダム画像を生成するLorem picsum APIを使用してミニプロジェクトを構築しました

アプリの作成

まず、APIによって返されるイメージを格納する状態変数と、読み込み状態とエラー状態を保つために2つの状態変数を格納する必要があります.

  const [image, setImage] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

ここで、Picsum APIからイメージを取得し、結果を状態変数に格納する関数を記述する必要があります.

 const fetchImage = () => {
    setLoading(true);
    setError(null);
    fetch("https://picsum.photos/500").then(
      (result) => {
        setLoading(false);
        setImage(result.url);
      },
      (err) => {
        setLoading(false);
        setError(err);
      }
    );
  };

これは、ネイティブのフェッチメソッドを使用して、Picsum APIエンドポイントをヒットします.
リクエストを開始する前に、読み込み状態をtrueに設定して、アプリケーションを何かしていることを伝えます.結果を取得した後、読み込み状態をfalseに設定し、setImage(result.url)を使用して作成したイメージ状態変数にイメージURLを設定します.
これに加えてasync await構文を使用して同じことをすることもできます.

const fetchImage = async () = >{
  setLoading (true);

  try {
    const result = await fetch ("https://picsum.photos/500");
    setImage (result.url);
  } catch (err) {
    setError (err);
  }
  setLoading(false);
};

最初にコンポーネントが最初にロードされたときのみ、この関数を呼び出す必要があります.

 useEffect(() => {
    fetchImage();
  }, []);

ここで、空の依存配列は、最初にコンポーネントがロードされるときにだけ関数を呼び出すことを意味します.
次の変数を使用していくつかのコンテンツを表示するコンポーネントを作成します

  <div className="App">
      {error ? (
        <h3>Failed to fetch</h3>
      ) : loading ? (
        <Loader />
      ) : (
        <ImageDisplay image={image} />
      )}
      <br />
      <Button variant="outline-primary" className="mt-2" onClick={fetchImage}>
        Get Image
      </Button>
    </div>

HereはGitthubレポです、そして、あなたがGo Hereを試してみたいならば.
それは私と接続している、Github ..
学習を続ける🔥🔥..