how to use dev.to article API
Tags: react, api, javascript, webdev
Published: 2024-03-21 18:53:52

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`

```js
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.

[github](https://github.com/04anilr)
[website](https://my-portfolio-two-lemon-36.vercel.app/)


[Array methods in react.js ](https://dev.to/04anilr/how-to-use-array-methods-in-real-project-example-add-new-record-3o82)
[Fragment in react.js](https://dev.to/04anilr/fragment-in-reactjs-example-of-fragment-299a) 
[Conditional rendering in react.js](https://dev.to/04anilr/conditional-rendering-in-react-conditional-rendering-example-in-react-3j46)
[Children component in react.js](https://dev.to/04anilr/methods-of-react-children-component-in-react-4ol7)
[use of Async/Await in react.js](https://dev.to/04anilr/how-to-use-asyncawait-3a3o)
[Array methods in react.js](https://dev.to/04anilr/array-methods-in-reactjs-36jb)
[JSX in react.js](https://dev.to/04anilr/jsx-in-reactjs-3f7o)
[Event Handling in react.js](https://dev.to/04anilr/event-handling-in-react-5hc7)
[Arrow function in react.js](https://dev.to/04anilr/arrow-functions-in-react-4gb2)
[Virtual DOM in react.js](https://dev.to/04anilr/how-to-work-virtual-dom-in-react-dom-1b39)
[React map() in react.js](https://dev.to/04anilr/how-to-create-react-map-24pp)
[How to create dark mode in react.js](https://dev.to/04anilr/how-to-create-dark-mode-in-react-js-2kn2)
[How to use of Props in react.js](https://dev.to/04anilr/props-and-state-with-example-1bl1)
[Class component and Functional component](https://dev.to/04anilr/class-component-functional-component-in-react-k43)
[How to use of Router in react.js](https://dev.to/04anilr/how-to-use-of-router-in-reactreact-router-1163)
[All React hooks explain ](https://dev.to/04anilr/react-hooks-cheat-sheet-2hic)
[CSS box model ](https://dev.to/04anilr/css-box-model-work-2k0a)
[How to make portfolio nav-bar in react.js](https://dev.to/04anilr/how-to-make-nav-bar-for-portfolio-website-365m)