프로젝트 반응 js에서 Dev.to 기사 API를 사용하는 방법.

최근에 나는 에 대한 기사를 쓰기 시작했습니다. 나는 그것이 더 흥미로웠다 (개발자 팀 덕분에). 그 후 Dev에 게시하는 한 내 개인 사이트에 내 기사를 추가하고 싶었습니다. 우리가 탐색하고 반응에서 사용하는 방법을 볼 흥미로운 API를 찾았습니다. 어서 오십시오:

시작하자:
우선 이 엔드포인트를 사용할 것입니다: . 다른 사용자로부터 기사를 가져오려면 사용자 이름을 자유롭게 변경하십시오. 내 것은 oreste입니다.

프로젝트 초기화
create-react-app 또는 원하는 다른 접근 방식을 사용하여 반응 프로젝트를 만듭니다.


편집App.cssApp.css를 수정하고 다음 코드를 추가합니다.

이 시점에서 기사를 가져와 상태로 유지합니다. 화면에는 아직 출력이 없지만 콘솔을 만들었으므로articles 콘솔을 보면 다음과 같이 표시되어야 합니다.

배열을 확장하여 내용을 볼 수 있습니다.

브라우저에 기사 표시
이제 콘솔에서 데이터에 액세스한 후 브라우저에 데이터를 표시해야 합니다. {/* content goes here */} 주석을 다음 코드로 바꿉니다.

<div className="articles">
        {articles.map((article) => {
          return (
            <div key={article.id} className="article">
              <a href={article.url} className="title">
                {article.title}
              </a>
              <img src={article.social_image} alt={article.title}></img>
              <p>
                {article.description} <a href={article.url}>Read More.</a>
              </p>
              <p>
                {article.readable_publish_date} | {article.tags}{" "}
              </p>
              <p> {article.public_reactions_count} reactions</p>
            </div>
          );
        })}
      </div>

css에 일부App.css 추가

.articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.article {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #000000;
  color: white;
  border: 2px solid #000000;
  margin-top: 2rem;
  padding: 0 0.7rem;
}
.article a.title {
  text-decoration: none;
  color: white;
  font-size: 20px;
  margin: 1rem;
}

@media screen and (min-width: 768px) {
  .articles {
    flex-direction: row;
    justify-content: space-around;
  }
  .article {
    max-width: 45%;
  }
}

이제 앱이 완성되었습니다.


이 기사를 읽어 주셔서 감사합니다. 당신이 그것을 즐겼기를 바랍니다. 앱의 코드를 원하시면 찾아보세요here . 테스트할 수도 있습니다here. FileReader에 대한 자세한 내용을 보려면 여기site를 방문하십시오.

에서 언제든지 저를 찾을 수 있습니다. 좋은 하루 되세요😍😍