• Я использовал API dev.to для отображения своих технических блогов в своем портфолио.
  • Недавно, когда я участвовал в хакатоне, я использовал это для отображения блогов пользователей вместе с панелью поиска.

let btnDev=document.querySelector('#devbtn')

     fetch('https://dev.to/api/articles?username=powercoder')
    .then((response)=>

            response.json()
        )
    .then(data=>{
        let output='';
        data.forEach((element)=>
        {
            console.log(element)
           output+=
            `       <div id="grid-item">
                    <div>
                    <h4 class="titleblog">${element.title}    <i class="fas fa-heart text-danger"></i>${element.positive_reactions_count}</h4>
                    </div>
                    <div>
                    <a href=${element.canonical_url}><button class="btnc">Read more</button></a>
                    </div>
                    </div> 
            `


        }
    )
    document.querySelector('#grid-container').innerHTML=output;
    })
            .catch(err => console.log(err));
  • Приведенный выше фрагмент кода используется для получения ваших блогов всякий раз, когда вы нажимаете ссылку кнопки.

Пояснение

  • Итак, сначала используйте манипуляции с DOM, чтобы каждый раз, когда вы нажимаете на кнопку, получать свои блоги. Затем я использовал fetch api для получения блогов, и он возвращает обещание, которое разрешается в ответ, который либо успешен, либо нет.
  • Поэтому после преобразования ответа в формат json он возвращает массив блогов, написанных пользователем.
  • Я использовал сетку и немного HTML для отображения своих блогов вместе с лайками и заголовками.
  • Изображение ниже — это ссылка из моего портфолио, где я использовал dev.to для получения блогов.

Вы можете сделать это и в реакции, чтобы укрепить свои основы в реакции. Это очень хороший проект для понимания основ реагирования, где вы можете создать окно поиска и искать блоги разных пользователей.

Вы можете проверить приведенный ниже проект для справки. https://github.com/tejaswini22199/DevFolio