react 응용 프로그램에 Dev.to 블로그 연결

15265 단어 tutorialreactjavascriptbeginners
그래서 저는 Dev.to 커뮤니티를 좋아하고 블로그를 만드는 간단성을 더 좋아합니다.그래서 저는 여기서 발표한 블로그를 제 개인 사이트에 직접 접속할 수 있는 방법을 찾고 있습니다.고맙게도 dev의 api와 갈고리 한 쌍 때문에 쉽다.다음은 내가 어떻게 나의 personal site에서 나를 실현했는가이다.

컨텐트

  • 특정 블로그 기사를 직접 참조
  • 페이지에 당신의 블로그 글을 열거하세요
  • 목록에서 블로그 기사로 동적으로 이동
    • 서두르다이것은Github Repo
    시간을 위해서 나는 여기서 몇 가지 가설을 할 것이다.

    You are familiar with React and React Hooks
    You have a basic understanding of an API
    You have at least one published article on Dev.to


    1. 특정 블로그 글을 직접 가리킨다



    기본react 프로그램을 만드는 것부터 시작합시다: npx create-react-app dev-blog응용 프로그램을 설치한 후 App.js 파일을 일반적인 샘플로 정리합니다.이것은 나의 것이다.
    function App() {

    return (
        <div>
            Dev Blog
        </div>
    );
}

export  default App;
    이제api 문서here를 봅시다.그들의api는 아직 테스트 단계에 있지만, 보시다시피 이 사이트에서 데이터를 검색할 수 있는 몇 가지 방법이 있습니다.다른 경로와 응답을 탐색할 때, 부정확하거나 되돌아오지 않는 문제에 부딪힐 수도 있지만, 전체적으로 말하자면, 나는 그들의 일에 대해 매우 만족한다.
    추천하는 경로는 articles 아래에 있고 이름은 A published article by path GET call입니다.코드에 blogPath라는 상수를 추가합니다. 이 상수를 https://dev.to/api/articles/{Your UserName}/{Your Article ID}로 설정하고 싶은 블로그 글을 탐색하기만 하면 이 글의 ID를 얻을 수 있습니다. 이것은 제 것입니다.
    function App() {
const blogPath = 'https://dev.to/api/articles/simplymincy/test-post-2-2j8a`';
    return (
        <div>
            Dev Blog
        </div>
    );
}

export  default App;
    다음 단계에서 우리가 해야 할 일은 응답체를 얻기 위해 그 상수에 전화하는 것이다.이를 위해 useState와useEffect 그리고 일반적으로react와 함께 사용하는 가방axios을 사용할 수 있습니다. 이 가방은 http 요청을 보내는 데 사용됩니다.이 패키지npm i axios를 계속 설치합니다.
    설치 후 useState 갈고리를 사용하고 글의 주체 응답으로 설정합니다.
    import React, { useEffect, useState } from  "react";
import axios from  "axios";

function App() {
const blogPath = 'https://dev.to/api/articles/simplymincy/test-post-2-2j8a`';
const [articleBody, setArticleBody] = useState();

    return (
        <div>
            Dev Blog
        </div>
    );
}

export  default App;
    실제 응답을 얻기 위해서, 우리는useEffect와axios를 사용하고, 우리가 만든 블로그 Path를 사용하여 호출해야 합니다.그것은 아래에서 나와 우리가 함께 검사한 것처럼 보일 것이다.데이터를 setArticleBody로 설정합니다.useEffect에서 의존항을 설정하십시오. 그렇지 않으면 이 호출은 백엔드에서 계속 실행됩니다.페이지를 불러올 때만 업데이트하려고 합니다. 그러면 블로그 Path에 의존하도록 설정할 수 있습니다.

    Axios makes it really easy to make requests. Feel free to check out their docs


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

function App() {
const blogPath = 'https://dev.to/api/articles/simplymincy/test-post-2-2j8a`';

const [articleBody, setArticleBody] = useState();

    useEffect(() => {
        axios.get(blogPath).then((response) => {
            setArticleBody(response.data);
        });
    }, [blogPath]);

    return (
        <div>
            Dev Blog
        </div>
    );
}

export  default App;
    현재, 우리는 우리가 회답에서 얻은 속성 중 하나로 되돌아오는 내용을 바꿀 수 있다고 생각할 것이다.내 말은 "body html"속성이 정상적으로 작동해야 한다는 것을 확신하는 것입니까?이걸로 하고 제자리에 갖다 놓으세요.나는 네가 이렇게 하는 문제를 알고 있다고 믿지만, 만약 네가 모른다면, 그것은 보답이 진실하지 않기 때문이다. HTML네jsx.따라서 서식이 적용되지 않습니다.따라서 "body markdown"속성을 사용하도록 변경하고, 표지 형식이 페이지에 정확하게 표시되도록 다른 패키지react-markdown를 사용합니다.이 패키지는 가격 인하 코드를 정확하게 이해하고 표시할 수 있는 코드jsx로 변환합니다.그럼 이 패키지를 설치하고 업데이트를 진행해 볼까요?
    function App() {
const blogPath = 'https://dev.to/api/articles/simplymincy/test-post-2-2j8a`';

const [articleBody, setArticleBody] = useState();

    useEffect(() => {
        axios.get(blogPath).then((response) => {
            setArticleBody(response.data);
        });
    }, [blogPath]);

    if (!articleBody) return  null;

    const markdown = articleBody.body_markdown;

    return (
        <div>
            <ReactMarkdown>{markdown}</ReactMarkdown>
        </div>
    );
}

export  default App;
    바디 응답에 간단한 검사를 추가했습니다. 존재하지 않으면,null로 돌아갑니다. 이 경로가 존재하지 않으면 프로그램이 붕괴되지 않습니다.
    이 때, 글이 불러온 페이지를 볼 수 있을 것입니다.이것은 매우 기본적인 것이지만, 우리는 이api로 더욱 동적 인 일을 할 수 있다.

    2. 한 페이지에 문장집을 열거한다



    그래서 우리가 해야 할 첫 번째 일은 새로운 조립품을 만드는 것이다.우리는 그것을 Article.js라고 부른다. 왜냐하면 이것은 우리가 돌아올 곳이기 때문이다...우리 글.
     const Article = () => {
        return ();
 };

 export  default Article;
    우리는 이미 App.js 문서에서 이 모든 일을 완성했기 때문이다.이것을 이 Article.js 파일로 옮깁시다.
    import React, { useEffect, useState } from  "react";
import axios from  "axios";
import ReactMarkdown from  "react-markdown";

const Article = () => {

const blogPath = `https://dev.to/api/articles/simplymincy/test-post-2-2j8a`;
const [articleBody, setArticleBody] = useState();

    useEffect(() => {
        axios.get(blogPath).then((response) => {
            setArticleBody(response.data);
        });  
    }, [blogPath]);

    if (!articleBody) return  null;

const markdown = articleBody.body_markdown;

    return (  
        <div> Dev Blog
            <ReactMarkdown>{markdown}</ReactMarkdown>
        </div>
    );
};

export  default Article;
    우리App.js는 지금 비어 있어야 한다. 아래와 같다.
    import React from  "react";

function App() {

return (
<div>
Empty App
</div>

);

}

export  default App;
    이 파일에 대해 다른 작업을 수행하기 전에 이전과 동일한 가져오기를 사용하여 컬렉션 구성 요소를 생성합니다Collection.js.
    import React, { useEffect, useState } from  "react";
import axios from  "axios";

const Collection = () => {

return ();    
};
export  default Collection;
    우리는 문장 구성 요소에 대한 것처럼 데이터를 검색하려고 하지만, 이 URL https://dev.to/api/articles?username={Your UserName} 을 사용하여 문장 집합을 얻으려고 합니다.
    import React, { useEffect, useState } from  "react";
import axios from  "axios";

const Collection = () => {
    const collectionPath = `https://dev.to/api/articles?username=simplymincy`;
    const [articleCollection, setArticleCollection] = useState();

    useEffect(() => {
        axios.get(collectionPath).then((response) => {
            setArticleCollection(response.data);
        });
    }, [collectionPath]);

    if (!articleCollection) return  null;

    return  <div>Dev Collection</div>;
};

export  default Collection;
    우리는 하나의 데이터 그룹을 얻을 수 있기 때문에, 우리는 map() 방법을 사용하여 모든 요소를 표시할 것이다.그것은 내가 아래에서 본 것처럼 보일 것이다. 우리는 그것articleCollection을 꺼내서 그것article에 따라 하나하나id를 토해낸다.
    const list = articleCollection.map((article) => (

    <div  key={article.id}>
        Data we want to display here
    </div>
));
    return (
        <div>Dev Collection
            {list}
        </div>
    );
    그림과 글의 제목을 표시하고 싶어서 몇 개 더 추가하지만api에 따라 원하는 내용을 마음대로 추가할 수 있습니다.
    import React, { useEffect, useState } from  "react";
import axios from  "axios";

const Collection = () => {
    const collectionPath = `https://dev.to/api/articles?username=simplymincy`;
    const [articleCollection, setArticleCollection] = useState();

        useEffect(() => {
            axios.get(collectionPath).then((response) => {
                setArticleCollection(response.data);
            });
        }, [collectionPath]);

    if (!articleCollection) return  null;
    const list = articleCollection.map((article) => (

        <div  key={article.id}>
            <div>
                <div>
                    <img  src={article.social_image}  alt="Article Images"  />
                </div>
                    <div>
                        <h4>{article.title}</h4>
                    </div>
                </div>
            </div>
        ));

    return (

        <div>
            Dev Collection
            {list}
        </div>
    );
};

export  default Collection;
    이제 App.js 파일에서 집합 구성 요소를 가져옵니다.
    import React from  "react";
import Collection from  "./Collection";

function App() {

    return (
        <React.Fragment>
            <Collection/>
        </React.Fragment>
    );
}

export  default App;
    우리는 지금 페이지에서 우리가 발표한 문장집을 볼 수 있을 것이다.현재 우리가 가장 하고 싶지 않은 일 (css를 추가하는 것 외에 우리의 눈을 더욱 위로할 수 있도록 하는 것) 은 모든 문장을 클릭하고 특정한 문장인 onClick을 내비게이션할 수 있도록 하는 것이다.우리 지금부터 시작합시다.

    3. 목록에서 블로그 글 탐색



    이를 위해, 우리는 React와 함께 사용하는 또 다른 유니버설 패키지인 react-router-dom 를 사용할 것이다.그래서 우리는 그것을 설치하고 Collection 구성 요소를 준비하여 클릭할 수 있는 요소를 얻기 전에 App.js 파일로 이동하여 변경을 해야 한다.현재 우리의 응용은 한 페이지의 응용이다.우리는 현재 적어도 두 개의 페이지를 내비게이션할 수 있기 때문에, 우리는 약간의 노선을 설정해야 한다.이것은 상당히 괜찮은 변경이기 때문에, 이것에 대해 나는 완전히 업데이트된 App.js 파일을 표시하고 설명할 것이다.
    import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Article from "./Article";
import Collection from "./Collection";

function App() {
  return (
    <React.Fragment>
      <BrowserRouter basename={"/"}>
        <Switch>
          <Route
            exact
            path={`${process.env.PUBLIC_URL}/`}
            component={Collection}
          />
          <Route
            exact
            path={`${process.env.PUBLIC_URL}/Article/simplymincy/:path`}
            component={Article}
          />
        </Switch>
      </BrowserRouter>
    </React.Fragment>
  );
}

export default App;
    나는 지금 우리가 언급한 다른 노선을 설정하고 싶기 때문에, 최고급 구성 요소에서 react-router-dom 패키지를 사용하고 있다.그래서 우리는 BrowserRouter, Switch와 Route 방법을 사용한다.BrowserRouter 탭은 우리가 현재 응용 프로그램에 가지고 있는 여러 가지 되돌아오는 상태를 푸시, 교체, 팝업에 사용됩니다.이 안에 우리는 Switch 표시를 설정했는데 그 작업 원리는 switch 문장과 매우 비슷하다. 이것은 특정한 위치와 일치하는 첫 번째 하위 항목으로 돌아가는 것을 의미한다. 보시다시피 우리는 두 개Route 표시가 있다.많은 속성을 설정할 수 있습니다. 문서 here 를 보는 것을 강력히 권장하지만, 예시에서 경로 속성이 완전히 일치하는지 확인하고, 구성 요소를 우리가 만든 두 개의 구성 요소로 설정하고 있습니다.자세히 보면 Collection 구성 요소를 기본 URL로 설정하고 Article 구성 요소가 있는 경로가 더욱 독특한 경로를 가진다는 것을 알 수 있습니다./Article/simplymincy/ 내가 여기서 선택한 것이지만, 유일무이한 길이라면 어떤 길이든 선택할 수 있다.
    마지막으로 내가 지적하고 싶은 것은 네가 이 URL에서 본 :path 부분이다.마지막으로 Collection 구성 요소의 링크를 눌렀을 때 매개 변수를 전달할 수 있도록 이 곳에서 사용합니다.우리는 react-router-dom 구성 요소를 가져오고 Link 방법을 사용하여 이 점을 실현한다.<a> 레이블로 볼 수 있습니다.업데이트된 파일은 다음과 같습니다.
        import React, { useEffect, useState } from  "react";
    import axios from  "axios";
    import { Link } from  "react-router-dom";

    const Collection = () => {
        const collectionPath = `https://dev.to/api/articles?username=simplymincy`;

        const [articleCollection, setArticleCollection] = useState();

        useEffect(() => {

            axios.get(collectionPath).then((response) => {
                setArticleCollection(response.data);
            });
        }, [collectionPath]);

        if (!articleCollection) return  null;

        const list = articleCollection.map((article) => (

            <div  key={article.id}>
                <div>
                    <div>
                        <img  src={article.social_image}  alt="Article Images"  />
                    </div>
                    <div>
                        <h4>{article.title}</h4>
                    </div>
                </div>
                <div>
                    <Link  to={`/Article/simplymincy/${article.slug}`}>Read</Link>
                </div>
            </div>
        ));

    return (

        <div>

            Dev Collection
                {list}
        </div>
        );
    };

    export  default Collection;
    Link 표시에서 보듯이 우리가 사용하는 URL은 App.js 파일의 글 경로에 설정된 URL과 같습니다.이것은 관건이다. 왜냐하면 우리가 이곳에서 사용하는 것이 정확하게 일치한다는 것을 기억하기 때문이다.만약 그것들이 일치하지 않는다면, 그것은 우리의 Article 구성 요소로 되돌아오지 않을 것입니다.이것은 우리를 마지막 단계까지 가게 했다.우리가 :path 경로에 Article를 설치했을 때 우리는 잘했다는 것을 기억하십시오. 그러면 우리는 값을 설정하여 구성 요소에 자유롭게 전달할 수 있습니다.이 예에서api 호출에서 얻은 값 slug 을 사용합니다.dev.toapi의 정의에 따라 사용자가 만든 글을 유일하게 표시하는 데 사용됩니다.이것은 완벽할 뿐만 아니라, Google URL은 유일할 뿐만 아니라, Google Article 구성 요소가 이 경로를 직접 호출하여 블로그 내용을 얻을 수 있도록 할 수 있습니다.이 업데이트는 상당히 작다.우리는 단지 import { useParams } from "react-router-dom"; 다음 내용으로 우리의 블로그 Path 상수를 바꾸고 싶을 뿐이다.
        const params = useParams();
    const blogPath = `https://dev.to/api/articles/simplymincy/${params.path}`;
    우리가 여기에서 하는 일은 집합 구성 요소에서 클릭한 링크에서 파라미터를 전달하고 이 slug를blogPath의 끝으로 설정하는 것입니다.이렇게 하면 우리가 어떤 글을 클릭하든지 간에 어떤 글의 내용을 검색하고 표시해야 하는지 알 수 있다.
    이렇게!
    이 때, 한 집합에 모든 글을 표시할 수 있고, 모든 글을 눌러서 동적으로 표시할 수 있어야 합니다.이 API가 있으면, 평론, 칭찬, 그리고 당신의 블로그와 관련된 유용한 데이터를 얻고 발표하는 등 더 많은 일을 할 수 있습니다.나도 여기에 어떤 스타일도 추가하지 않았다.그건 니가 결정해.다음은 내가 어떻게 나의 예시를 실현하는가이다.

    From my personal site

    슈퍼set 무서운 코드
    Seeeduino XIAO로 키보드 입력

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage