Cara Menata Konten API Medium dengan Indah di Situs Web React Anda

Mengintegrasikan konten dinamis dari platform seperti Medium ke situs web Anda dapat memperkaya pengalaman pengguna Anda dengan menyediakan artikel segar dan menarik. Dalam tutorial ini, saya akan memandu Anda melalui proses pengambilan data Medium API dan merendernya menggunakan komponen React sambil memastikan presentasi yang menarik secara visual.

Begini tampilan website saya dengan artikel medium.

Menyiapkan Komponen Artikel

Pertama, mari buat komponen React yang mengambil dan menampilkan artikel Medium. Di proyek React Anda, siapkan komponen Articles:

import { useState, useEffect } from "react";
import ArticleItems from "./ArticleItems";

const mediumArticle =
  "https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@yourusername";

const Articles = () => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetch(mediumArticle)
      .then((res) => res.json())
      .then((data) => setArticles(data.items));
  }, []);

  return (
    <div className="article__container container grid">
      {articles.map((article, index) => {
        return <ArticleItems key={index} article={article} index={index} />;
      })}
    </div>
  );
};

export default Articles;

Inilah yang dikembalikan oleh API medium.

Meningkatkan Tampilan Artikel

Sekarang mari kita fokus pada peningkatan daya tarik visual dari setiap artikel yang diambil. Saya akan menyempurnakan format tanggal dari “2023–08–22 06:13:56” menjadi “22 Agustus 2023” yang lebih mudah dibaca. Selain itu, penting juga untuk mengetahui bahwa deskripsi terdiri dari tag HTML, yang perlu diuraikan oleh Regex.

// Function to format a given date string
function formatDate(inputText) {
  const inputDate = new Date(inputText);
  const options = {
    year: "numeric",
    month: "short",
    day: "numeric",
  };
  return inputDate.toLocaleDateString(undefined, options);
}

// Function to extract content from HTML string using regex patterns
function extractContent(htmlString) {
  // Define regex patterns to match <h4> and <p> tags
  const h4Pattern = /<h4>(.*?)<\/h4>/s;
  const pPattern = /<p>(.*?)<\/p>/s;

  // Attempt to match patterns in the HTML string
  const h4Match = htmlString.match(h4Pattern);
  const pMatch = htmlString.match(pPattern);

  // If both <h4> and <p> tags are found, combine their content
  if (h4Match && pMatch) {
    const h4Content = h4Match[1];
    const pContent = pMatch[1];
    return `${h4Content} - ${pContent}`;
  } else if (pMatch) {
    // If only a <p> tag is found, use its content
    const pContent = pMatch[1];
    return pContent;
  }
  // Return null if no suitable content is found
  return null;
}

// Component to render article items
function ArticleItems({ article, index }) {
  // Extract content and format date for rendering
  const content = extractContent(article.description);
  const formattedDate = formatDate(article.pubDate);

  return (
    <div className="article__card" key={index}>
      <img
        className="article__img"
        src={article.thumbnail}
        alt={article.title}
      />
      <div className="article__body">
        <div className="article__header">
          <h3 className="article__title">{article.title}</h3>
          <p className="article__description">{content}</p>
        </div>
        <div className="article__details">
          <p className="article__date">{formattedDate}</p>
          <a href={article.link} target="_blank" className="article__button">
            Read more{" "}
            <i className="bx bx-right-arrow-alt article__button-icon"></i>
          </a>
        </div>
      </div>
    </div>
  );
}

export default ArticleItems;

Styling untuk Presentasi yang Rapi

Untuk membuat tata letak artikel Medium Anda yang menarik secara visual, terapkan gaya CSS untuk memotong deskripsi artikel setelah tiga baris:

/* Apply this CSS method to truncate article descriptions */
.article__description {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

Penyelesaian

Mengambil dan menampilkan artikel Medium di situs web React Anda dapat berfungsi dan menarik secara visual. Anda dapat menyesuaikannya lebih lanjut agar sesuai dengan desain dan persyaratan situs web Anda.

Terima kasih telah membaca sampai akhir. Harap pertimbangkan untuk mengikuti penulis dan publikasi ini. Kunjungi Stackademic untuk mengetahui lebih lanjut tentang bagaimana kami mendemokratisasi pendidikan pemrograman gratis di seluruh dunia.