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

#javascript #react #webdev #tutorial

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.

Edit App.css
Edit App.css and add the following code:

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:

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>

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%;
  }
}

Our App is now finished:

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😍😍

Top comments (4)

notPratyush • Oct 4

How do I add A particular article on that?



import React,{ useState, useEffect} from 'react'
import './App.css'

function App() {
  const [articles, setarticles] = useState([])
  useEffect(() => {
    fetch('https://dev.to/api/articles/{/* ? */}')
     .then(response => response.json())
     .then((response) => {
      setarticles(response)
     })
     .catch(error => console.error('Error:', error))
  }, [])

  console.log(articles);

  return (
    <>
    <article 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>
          );
        })}
      </article>
    </>
  )
}

export default App

dous • Feb 20

I can get anyone's articles but I cannot get mines. My code is right because when i change the username in the link into another username, i can see their articles. But my username doesn't work. I have only one article.