Github-repo: https://github.com/04anilr/my-app
Demo:https://my-app-zeta-weld.vercel.app/
To fetch data from the given API:https://dev.to/api/articles?username=04anilr in a React.js application, you can use the fetch API or libraries like Axios to make HTTP requests. Then, you can use state to store the retrieved data and render it in your component. Here's a basic example of how you can achieve this:
fetch('https://dev.to/api/articles?username=04anilr')
how to use of this API in react.js with use Axios
import React, { useState, useEffect } from 'react';
import './App.css';
const App = () => {
const [articles, setArticles] = useState([]);
useEffect(() => {
const fetchArticles = async () => {
try {
const response = await fetch('https://dev.to/api/articles?username=04anilr');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
setArticles(data);
} catch (error) {
console.error('Error fetching articles:', error);
}
};
fetchArticles();
}, []);
return (
<div className="container">
<h1>Articles by Anil Rajput</h1>
<ul>
{articles.map(article => (
<li className="article" key={article.id}>
<img src={article.cover_image} alt={article.title} /> {/* Added image tag */}
<div>
<h2>{article.title}</h2>
<p>{article.description}</p>
<a href={article.url}>Read more</a>
</div>
</li>
))}
</ul>
</div>
);
};
export default App;
This code will fetch the articles from the provided API when the component mounts (useEffect with an empty dependency array ensures it's only fetched once). It stores the articles in the component state using useState, and then maps over the articles array to render each article's title, description, and a link to read more.
Make sure to handle loading and error states in a real-world application for better user experience. You can add loading spinners or error messages accordingly.
Array methods in react.js
Fragment in react.js
Conditional rendering in react.js
Children component in react.js
use of Async/Await in react.js
Array methods in react.js
JSX in react.js
Event Handling in react.js
Arrow function in react.js
Virtual DOM in react.js
React map() in react.js
How to create dark mode in react.js
How to use of Props in react.js
Class component and Functional component
How to use of Router in react.js
All React hooks explain
CSS box model
How to make portfolio nav-bar in react.js
Top comments (0)