How to use Dev.to article API's in react js your project.
Tags: javascript, react, webdev, tutorial
Published: 2021-01-17 13:36:48

In recent days, I started writing articles on [Dev.to](https://dev.to). I found it more interesting (thanks to [Dev.to](https://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](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](https://create-react-app.dev/docs/getting-started/) or any other approach you prefer.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sg11a2vuev1zdqyxe9yp.JPG)

***Edit `App.css`***
Edit `App.css` and add the following code: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0ypo54qoyqmk82zji2d1.JPG)
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](https://dev-to-uploads.s3.amazonaws.com/i/dv9wgpxwguafdeznuk4y.JPG)
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:
```javascript
<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`
```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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/65y45hwoex4fyuu5w4va.JPG)

Thanks For reading this article. I hope you *enjoyed* it. If you want the code of the app, find it [here](https://github.com/oreste-abizera/dev-to-articles). You can also test it [here](https://dev-to-articles.netlify.app/). To read more about **FileReader** visit this [site]
(https://developer.mozilla.org/en-US/docs/Web/API/FileReader).

You can find me anytime on [Twitter](https://twitter.com/AbizeraOreste) and [Instagram](https://www.instagram.com/coder__tauras). Have a nice day😍😍