どのように使用して記事のAPI APIの反応JSプロジェクト.

最近、私は記事を書き始めました.私は、それがよりおもしろいとわかりました.その後、私は私が個人的なサイトに私が記事を投稿する限り、私の記事を追加したいと思いました.歓迎
始めましょう
まず、このエンドポイントを使います.気軽に別のユーザーから記事を取得するユーザー名を変更してください.鉱山はoreste.
プロジェクトの初期化
create-react-appまたは他の任意のアプローチを使用して反応プロジェクトを作成します.

エディットApp.cssApp.cssを編集し、次のコードを追加します

この時点で、我々は記事をフェッチしていると私たちの状態に保つ.まだ出力されていませんが、articlesをコンパイルしているので、コンソールを見たときには次のようになります.

配列を展開して内容を確認できます.
ブラウザで記事を表示する
コンソール内のデータにアクセスした後、ブラウザで表示する必要があります.{/* content goes here */}コメントをこのコードに置き換えます.

<div className="articles">
        {articles.map((article) => {
          return (
            <div key={article.id} className="article">
              <a href={article.url} className="title">
                {article.title}
              </a>
              <img src={article.social_image} alt={article.title}></img>
              <p>
                {article.description} <a href={article.url}>Read More.</a>
              </p>
              <p>
                {article.readable_publish_date} | {article.tags}{" "}
              </p>
              <p> {article.public_reactions_count} reactions</p>
            </div>
          );
        })}
      </div>

cssに若干のApp.cssを加えてください

.articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.article {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #000000;
  color: white;
  border: 2px solid #000000;
  margin-top: 2rem;
  padding: 0 0.7rem;
}
.article a.title {
  text-decoration: none;
  color: white;
  font-size: 20px;
  margin: 1rem;
}

@media screen and (min-width: 768px) {
  .articles {
    flex-direction: row;
    justify-content: space-around;
  }
  .article {
    max-width: 45%;
  }
}

我々のアプリケーションが終了しました:

この記事を読んでくれてありがとう.楽しんでください.アプリのコードをしたい場合は、hereを見つける.hereもテストできます.FileReaderの詳細については、siteを参照してください.
いつでも私を見つけることができます.良い一日を😍😍