Mustafa AnasI started to put myself a portfolio around a month ago. Today I wanted to push myself towards putting more efforts into writing on DEV so I decided to fetch my articles here to my React website (well, that way if I want to look cooler, I have to write more). So here is how I did it.
I knew DEV has it right
I ran my protfolio locally and scraped the html page of my account here. However, I immediately realized that this community MUST have a very clean and well documented API! (you guessed it right, they do!).
It did not take me long until I got to https://docs.dev.to/api/. If you navigate there, you can find a clean explanation about the main routes you would want to use to get any data from this community.
The main routes are for authentication, articles, and users.
You can have a look at the documentation, it looks enough to even build your own CMS for DEV's api f you feel like!
Boh, anyways!
what does all this mean? How do I get my articles here to show on my React project?
Ok, lets get technical. 🚀
a React App, and an HTTP Client
So I am assuming you have a react project ready to test this with me. first thing you need to do is install an HTTP Client that will allow you to send HTTP requests to any webpage, and receive responses to your webpage. In our case we will use axios
go to your main react folder and run the command:
npm i axios
once the installation is done, first thing to remember is to import axios to your component.
Now we will make our component send a request to get certain articles. Intuitively, the url is going to be https://dev.to/api/articles. If you copy this link and paste it in your browser, it will show you a json object with 30 articles!
This is a default response from DEV on requests to this link. if you ask for articles, it will send you the hottest 🔥 30 articles on DEV. So, we need to be more specific and tell DEV who are the author of the article we want to get.
The author is going to be your username which you can copy from the link appearing in your browser when you head to your profile page. Great! now what do we do with it?
According to DEV's documentation, we need to pass the username as a parameter for the http request being sent to the server.
thus, our link will be:
https://dev.to/api/articles?username=your_user_name
if you copy and paste this in your browser, it will show your most recent 30 articles. Great!
Now we need to actually get all this information to our code and display it in our component.
lets create a stateless functional component and initiate and state called articles, and setArticles (for updating them).
import React, { useState } from 'react';
import axios from 'axios'
const Articles = () => {
const [articles, setArticles] = useState()
return (
<div>
ARTICLES
</div>
);
}
Great. Now when the component first renders to the page, we want to:
- Send a request to DEV's API
- Store the response in our state (
articles) - Map over the state and display the data.
lets first send a request using axios to https://dev.to/api/articles?username=your_user_name
import React, { useState, useEffect } from 'react';
import axios from 'axios'
const articles = () => {
const [articles, setArticles] = useState()
useEffect(() =>{
axios.get('https://dev.to/api/articles?username=mustafaanaskh99')
.then(e => setArticles(e.data))
}, [])
return (
<div>
ARTICLES
</div>
);
}
Notice that we imported useEffect to run our http request after the component is rendered.
the axios.get method is just like the rest get method (a way to get data from http links). At the end of the day, axios is just an HTTP client.
Now if you console.log(articles) in your component, you will see a json object with data about all your articles. What we will be displaying are the following:
- title
- cover_image (link to image)
- url (link to article)
- tags (an array)
- positive_reactions_count (how money likes, saves, and unicorns)
right below the useEffect, if our state (articles) are filled up already, we will map over its values and for each: return the title followed by the image, the description of the article, a link that takes you to the article when you click the description, and the list of tags:
if(articles){
return (
<div>
{
articles.map((article, index) => {
console.log(article)
return(
<div key={index}>
<article>
<h2><strong> {article.title} </strong></h2>
{
article.cover_image ? (
<figure>
<img src={article.cover_image} alt="article-cover" />
</figure>
) : (
<figure></figure>
)
}
<p>
<a href={article.url} target="_blank" rel="noopener noreferrer">
{article.description}
</a>
</p>
<p>
<span>
{article.tags.toString()}
</span>
<br />
<code>interactions: {article.positive_reactions_count}</code>
</p>
</article>
</div>
)
})
}
</div>
);
} else {
return(
<div>
<div>LOADING</div>
</div>
)
}
Yay!! 🎆
you should be able to see the articles rendered on your page.
There are more data you can grab about your account and activity. If it interests you, I would suggest you log the data object to your console and check the fields available there.
Hope this was any helpful!
I am on a lifetime mission to support and contribute to the general knowledge of the developers community as much as possible. Some of my writings might sound too silly, or too difficult, but no knowledge is ever useless. I urge you to do the same and try to pay back your community your own way 😄 ❤️
