In today's fast-paced tech world, showcasing your expertise is paramount. You've penned insightful articles on #dev.to, and now it's time to amplify your reach.
Imagine seamlessly merging your dev.to articles into your personal portfolio website, creating a comprehensive showcase of your accomplishments.
In this tutorial, we'll embark on an exciting journey to integrate the dev.to API with your portfolio section built in React. Get ready to empower your web presence and captivate your audience with a harmonious blend of technology and content.
Installing React
These are the initial steps to create your application in react.
Step 1: Environment Setup
Before you start, make sure you have Node.js installed on your computer, as React requires Node.js to run. You can download it from https://nodejs.org/.
Step 2: Create a new React application
To create a new application in React, you can use the official command line tool called "Create React App". Open your terminal and run the following command:
npx create-react-app my-personal-site
Step 3: Navigate to the Application Directory
After creating the application, navigate to the directory where it was generated using the command:
cd my-personal-site
Step 4: Run the Application
Once you are in the application directory, you can start a development server to see how your application looks in the browser. Run the following command:
npm start
Step 5: Declaring Variables
To save the list posts, the username that you have on dev.to and last the URL path for the API.
const [posts, setPosts] = useState([]);
const USERNAME = 'jcvb';
const DEV_TO_API = `https://dev.to/api/articles?username=${USERNAME}`;
Step 6: Get the posts
Used the useEffect hook to fetch the data after the component mounts. The empty dependency array ([]) ensures that the effect runs only once, similar to the behavior of componentDidMount in class components.
useEffect(() => {
async function fetchPosts() {
try {
const response = await fetch(DEV_TO_API);
const postsData = await response.json();
setPosts(postsData);
} catch (error) {
console.error('Error fetching posts:', error);
}
}
fetchPosts();
}, []); // Empty dependency array means this effect runs once after mount
Step 7: Render the results
Added a key prop to each
return (
<div>
<h1>Post Lists</h1>
{posts.length > 0 ? (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
) : (
<p>No posts available.</p>
)}
</div>
);
Final result
Top comments (8)
Hi. Nice example of using DEV api to fetch posts. I have a suggestion related to the tags you used for this post. Instead of tagging with #devto, consider using the tag #meta which DEV uses for posts about DEV.
For sure man
Nice post! I actually have this on my personal site, I think it is realy good to be able to showcase your dev articles, i would've probably appreciated to read this in the moment i was implementing it 😃
For sure, man, I think this article helps other people to show their posts.
Short and to the point article!
Thanks man!
Thank you for sharing this informative article on unlocking your Dev.to portfolio. Your article was well-written and easy to understand.
Thanks, buddy!