feed 응용 프로그램은 간단한 응용 프로그램으로 인터넷과 서로 다른 출처의 최신 뉴스와 글을 기획하는 것을 책임진다.
따라서 본고에서 React, Tailwind CSS, 그리고 제 요약 API(https://medrum.herokuapp.com를 사용하여 간단하게 만드는 방법을 설명하겠습니다.본고의 마지막 부분에서 우리는 유사한 것을 구축할 수 있을 것이다-https://ey6n5.csb.app/
현장 체험을 원하신다면 다음 비디오를 보실 수 있습니다.
여기서 제 채널을 구독하세요: https://bit.ly/oyetoketoby
만약 네가 동영상을 볼 수 없다면, 너는 아래의 내용을 계속 읽을 수 있다.

선결 조건

CRA(반응)

Axios(http)

순풍 CSS(CDN)(필요 없음)

프로젝트 설정

여기서 첫 번째 단계는 Create react App을 사용하여 우리의react 프로젝트를 설정하는 것입니다.설치되지 않으면 설치 프로세스here를 읽을 수 있습니다.
응용 프로그램을 만들려면 다음 명령을 실행하십시오.

$ npx create-react-app feed-app

CRA 응용 프로그램을 성공적으로 만든 후 다른 설정으로 이동합니다.
홈 디렉토리의 src 폴더로 이동하여 생성합니다.

폴더 하나.그리고 components 폴더에 세 개의 파일(components, sidebar.js, main.js을 만듭니다.

파일 1개

$ mkdir components
$ touch config.js components/sidebar.js components/main.js components/articles.js

다음 단계는 프로젝트에 뒷바람 CSS를 추가하는 것입니다.이것을 할 수 있는 방법은 많지만 가장 간단하고 빠른 방법은 CDN을 사용하는 것이다.here를 통해 CDN을 가져오거나 다음 중 하나를 간단히 사용할 수 있습니다.

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

현재 articles.js 폴더에서 config.js 을 열고 Tailwind CSS로 업데이트합니다.

Feed API- Medrum API의 작동 원리 이해

인코딩과 프로젝트의 다음 단계를 시작하기 전에 개요 API가 어떻게 작동하는지 이해해 봅시다.Medrum은 Python, Beautiful Soup, Scrapy를 사용하여 인터넷에서 글, 뉴스, 기타 각종 내용을 긁어내어 만든 것이다.
Medrum에는 두 개의 종점public과 index.html이 있습니다.문장에서, 어느 원본에서 읽을 것인지를 진정으로 지정할 수는 없지만, 요약에서 읽을 수 있습니다.
기본적으로 최신 기사를 얻으려면 이 단점에 요청을 보낼 수 있습니다 - https://medrum.herokuapp.com/articles/. 이 단점은 다음과 같습니다.

[{"title": "Juno Makes Writing Julia Awesome", "url": "https://towardsdatascience.com/juno-makes-writing-julia-awesome-f3e1baf92ea9", "comment_url": null, "ago": "3h", "date": "2020-02-02 04:06:09AM UTC"}, {"title": "Introducing Leya: The Meta-Statistical Lisp-like language", "url": "https://towardsdatascience.com/introducing-leya-the-meta-statistical-lisp-like-language-ef9012affbdb", "comment_url": null, "ago": "8h", "date": "2020-02-01 11:26:32PM UTC"}, {"title": "Transform Reality with Pandas", "url": "https://towardsdatascience.com/transform-reality-with-pandas-96f061628030", "comment_url": null, "ago": "10h", "date": "2020-02-01 09:34:26PM UTC"}, {"title": "Using Stringr and Regex to Extract Features from Textual, Alphanumeric  and Punctuation Data in R", "url": "https://towardsdatascience.com/using-stringr-and-regex-to-extract-features-from-textual-alphanumeric-and-punctuation-data-in-r-2565256c0a77", "comment_url": null, "ago": "13h", "date": "2020-02-01 06:31:13PM UTC"}, {"title": "Getting Browser User Permission with the Permissions API", "url": "https://levelup.gitconnected.com/getting-browser-user-permission-with-the-permissions-api-eafbc9c7f4d7", "comment_url": null, "ago": "15h", "date": "2020-02-01 04:03:06PM UTC"}, {"title": "Get More Out of Google Colab", "url": "https://medium.com/analytics-vidhya/get-more-out-of-google-colab-5bf9d9519a56", "comment_url": null, "ago": "16h", "date": "2020-02-01 03:34:54PM UTC"}]

긁은 물건의 간격을 여과할 수 있습니다.그것은 articles, feeds, latest, day, week일 수 있다.예를 들어, - https://medrum.herokuapp.com/articles/?interval=week 를 사용하여 이번 주에 발표된 모든 기사를 얻을 수 있습니다.
요약을 얻기 위해서는 원본 id를 지정해야 합니다. 여기서 찾을 수 있습니다. - https://medrum.herokuapp.com/sources/month 개요를 가져오려면 dev.To-source id dev.to 의 조합을 사용해야 합니다. 아래와 같습니다.

https://medrum.herokuapp.com/feeds/?source=5bbb1af8af62ff6841b4b26e&page=1&sort=popular

5bbb1af8af62ff6841b4b26e 및 pagesort, popular를 사용하여 끝점을 필터링할 수 있습니다.
멋있어요. 무료로 사용할 수 있어요.
Patreonhttps://www.patreon.com/oyetoketoby에서 무료 API 구축 지원

Feed 애플리케이션 구축

이제 API의 작동 원리를 이해하고 이를 애플리케이션에 통합하는 방법을 살펴보겠습니다.
열기latest 파일:

export const SOURCES_URL = "https://medrum.herokuapp.com/sources/"
export const FEEDS_URL = "https://medrum.herokuapp.com/feeds"

이것은 우리가 응용 프로그램에서 사용할 두 개의 단점을 포함한다.
이제 config.js 파일을 열고 다음을 붙여넣습니다.

import React, { useState, useEffect } from "react";

import Sidebar from "./sidebar";
import Articles from "./articles";
import { SOURCES_URL, FEEDS_URL } from "../config";

import axios from "axios";

function Main() {
  const [sources, setSources] = useState([]);
  const [articles, setArticles] = useState([]);
  const [source, setSource] = useState([]);


  const fetchSource = id => {
    setSource(id);
    setArticles([]);
    axios.get(`${FEEDS_URL}?source=${id}`).then(res => {
      setArticles(res.data);
    });
  };
  useEffect(() => {
    axios.get(SOURCES_URL).then(res => {
      setSources(res.data);
    });
    fetchSource("5718e53d7a84fb1901e05914");
  }, []);
  return (
    <div className="flex">
      <div className="w-1/4 bg-gray-500 p-3">
        <Sidebar source={source} sources={sources} fetchSource={fetchSource} />
      </div>
      <div className="w-3/4 bg-gray-400 p-3">
        <Articles articles={articles} />
      </div>
    </div>
  );
}

export default Main;

다음은 우리가 위에서 한 일이다.

및 main.js 구성 요소

를 수입했습니다.

연결고리 3개Sidebar, Articles, useState, sources

함수 - articles: 원본 요약을 가져오는 데 사용됩니다.

갈고리를 추가했습니다. 사용할 수 있는 원본을 얻을 수 있습니다. 원본을 얻을 수 있고 기본적으로 원본을 불러올 수 있습니다.

, source, fetchSource, useEffect 및 source 구성 요소에 전달하고, sources 구성 요소에 도구로 전달

다음 단계는 fetchSource 구성 요소를 엽니다.

import React from "react";

function Sidebar({ sources, fetchSource, source }) {
  if (!sources.length) return <p>Loading...</p>

  return (
    <>
      {sources.map((s, k) => {
        if (s.contentType!=="news") return null;
        return (
          <p
          key={k}
            className="mb-3"
style={{background: s.id===source ? "#ccc": "transparent"}}
            onClick={() => {
              fetchSource(s.id);
            }}
          >
            {s.name}
          </p>
        );      
      })}
    </>
  );
}

export default Sidebar;

위의 내용은 사실 이해하기 쉽지만, 아래는 세목이다.

아이템이 비어 있는 경우

로딩 표시

속성 매핑을 통해 현재 원본의contentType이news인지 확인한 다음 이름을 표시하고 onClick 이벤트를 추가하여 호출Sidebar, 원본 id는param이며, 현재 원본 id가 활성 원본 id이면 배경을 추가합니다.

다음으로 articles 파일을 엽니다.

import React from "react";

function Articles({ articles }) {
  if (!articles.length) return <p>Loading...</p>

  return (
    <>
      {articles.map((a, k) => {
        return (
          <p className="mb-4" key={k}>
            <a href={a.url} target="_blank">{a.title}</a>
          </p>
        );
      })}
    </>
  );
}

export default Articles;

여기서 우리는 아무것도 하지 않았습니다. 우리는 Articles 아이템을 비추어 모든 요점을 표시합니다.
마지막으로 sidebar.js 파일에서 sources 구성 요소를 가져오는 것입니다.

import React from "react";
import "./styles.css";
import Main from "./components/main";

function App() {
  return (
    <div className="wrapper">
      <Main/>
    </div>
  );
}

그렇습니다!모든 것이 순조롭다면 다음과 같은 내용을 보셔야 합니다.

그게 다야.당신은 여기서 현장 시연을 볼 수 있습니다: https://ey6n5.csb.app/.여기 있는 코드 샌드박스에서 코드를 볼 수 있습니다: https://codesandbox.io/s/boring-moore-ey6n5
다른 사람과 나누는 것을 잊지 마라. 만약 네가 나를 지지하고 싶다면, 이것은 나의 파트론이다. https://www.patreon.com/oyetoketoby