DEV Community

loading...
Cover image for How to use Dev.to article API's in react js your project.

How to use Dev.to article API's in react js your project.

oreste profile image Oreste Abizera ・2 min read

In recent days, I started writing articles on Dev.to. I found it more interesting (thanks to Dev.to developers team). After that, I wanted to add my articles on my personal site as long as I post them on Dev. I found an interesting API which we are going to explore and see how to use in react. Welcome:

Let's get started:
First of all, we are going to use this endpoint: https://dev.to/api/articles?username=oreste. Feel free to change username to fetch articles from another user. mine is oreste.

Initialize your project
Create a react project by using create-react-app or any other approach you prefer.
Alt Text

Edit App.css
Edit App.css and add the following code:
Alt Text
At this point, we are fetching articles and keep them in our state. No output on the screen yet, but since we have consoled articles, when we look at the console we should see something like this:
Alt Text
You can expand the arrays to see the content of them.

Display articles in the browser
Now after accessing our data in the console, we need to display them within the browser. Replace {/* content goes here */} comments with this code:

<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>
Enter fullscreen mode Exit fullscreen mode

Add Some css in 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%;
  }
}

Enter fullscreen mode Exit fullscreen mode

Our App is now finished:
Alt Text

Thanks For reading this article. I hope you enjoyed it. If you want the code of the app, find it here. You can also test it here. To read more about FileReader visit this site.

You can find me anytime on Twitter and Instagram. Have a nice day😍😍

Discussion (0)

pic
Editor guide