Displaying dev.to Articles in a React Project with TypeScript

Let's go through a step-by-step tutorial on how to display dev.to articles in your own React project using TypeScript.

The following instructions will help you understand the process clearly.

Step 1: Create a React application

To begin, create a new React application by running the following command in your terminal:

npx create-react-app my-app

Step 2: Set up the Article Interface

In your App.js file, you'll need to define an interface that represents the structure of dev.to articles. Paste the following interface code:

interface IArticle {
  type_of: string;
  id: number;
  title: string;
  description: string;
  readable_publish_date: string;
  slug: string;
  path: string;
  url: string;
  comments_count: number;
  public_reactions_count: number;
  collection_id: null | number;
  published_timestamp: string;
  positive_reactions_count: number;
  cover_image: null | string;
  social_image: string;
  canonical_url: string;
  created_at: string;
  edited_at: null | string;
  crossposted_at: null | string;
  published_at: string;
  last_comment_at: string;
  reading_time_minutes: number;
  tag_list: string[];
  tags: string;
  user: {
    name: string;
    username: string;
    twitter_username: null | string;
    github_username: string;
    user_id: number;
    website_url: null | string;
    profile_image: string;
    profile_image_90: string;
  };
}

This interface represents the structure of dev.to articles that we'll be fetching and displaying.

Step 3: Fetch dev.to Articles

Next, we'll create a function to fetch dev.to articles based on a given username. In this tutorial, we'll use the username "azadshukor" as an example. Paste the following code:

const fetchDevToArticles = (username: string): Promise<IArticle[]> =>
  fetch(`https://dev.to/api/articles?username=${username}`).then((response) =>
    response.json()
  );

The fetchDevToArticles function takes a username parameter and returns a Promise that resolves to an array of IArticle objects. It fetches the articles using the dev.to API.

Step 4: Fetch Articles from the Client Side

Inside the App component, we'll use the useEffect hook to fetch the dev.to articles from the client side. Add the following code:

useEffect(() => {
  fetchDevToArticles("azadshukor")
    .then((articles) => {
      setBlogs(articles);
    })
    .catch((error) => {
      console.error("Error fetching articles:", error);
    });
}, []);

This code will fetch the articles from the dev.to API using the fetchDevToArticles function we defined earlier. The fetched articles will be stored in the blogs state using the setBlogs function. The useEffect hook ensures that the articles are fetched only once when the component mounts.

Step 5: Finalize the App Component

Now, let's update the App.tsx file with the final code:

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

interface IArticle {
  type_of: string;
  id: number;
  title: string;
  description: string;
  readable_publish_date: string;
  slug: string;
  path: string;
  url: string;
  comments_count: number;
  public_reactions_count: number;
  collection_id: null | number;
  published_timestamp: string;
  positive_reactions_count: number;
  cover_image: null | string;
  social_image: string;
  canonical_url: string;
  created_at: string;
  edited_at: null | string;
  crossposted_at: null | string;
  published_at: string;
  last_comment_at: string;
  reading_time_minutes: number;
  tag_list: string[];
  tags: string;
  user: {
    name: string;
    username: string;
    twitter_username: null | string;
    github_username: string;
    user_id: number;
    website_url: null | string;
    profile_image: string;
    profile_image_90: string;
  };
}

const fetchDevToArticles = (username: string): Promise<IArticle[]> =>
  fetch(`https://dev.to/api/articles?username=${username}`).then((response) =>
    response.json()
  );

export default function App() {
  const [blogs, setBlogs] = useState<IArticle[]>([]);

  useEffect(() => {
    fetchDevToArticles("azadshukor")
      .then((articles) => {
        setBlogs(articles);
      })
      .catch((error) => {
        console.error("Error fetching articles:", error);
      });
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {blogs.map((blog) => (
        <div key={blog.id}>
          <h3>{blog.title}</h3>
          <p>{blog.description}</p>
        </div>
      ))}
    </div>
  );
}

This code imports the necessary dependencies, including the useEffect and useState hooks. The App component sets up the state for storing the fetched articles in the blogs variable. The fetched articles are then mapped over and displayed in the component's JSX.

Step 6: Test and Customize

You can now test your application and see the dev.to articles being displayed in your React project. Feel free to customize the code to suit your specific needs.

Conclusion

Congratulations! You have successfully implemented the functionality to display dev.to articles in your React project. I hope this tutorial has been helpful to you. If you have any further questions, feel free to leave a comment. Happy coding!