TL;DR

React 초보자는 태그 뷰어를 만들어 GitHub Pages(github.io)에서 공개하기 전의 이야기를 공개했다.
많이 잊어버릴 것 같아서 메모예요.

만든 물건

간단한 태그 뷰어를 만들었습니다.
https://y0kuda.github.io/react-markdown-viewer
(저장소: https://github.com/Y0KUDA/react-markdown-viewer

1. 모형 만들기

create-react-app 모형을 만들 수 있다.
TypeScript를 사용하여 매개변수를 개발하고 싶습니다--typescript.

create-react-app my-app --typescript

한 마디로 하면 yarn start 을 실행하면 모형 응용 프로그램이 시작됩니다.

2.node 패키지 설치

필요에 따라 노드 패키지를 설치합니다.
이번에는 표시를 표시하기 위해 설치했습니다remarkable.
TypeScript로 개발했지만 유형 정보가 포함되지 않아서@types/remarkable도 함께 설치됩니다.

yarn add remarkable
yarn add @types/remarkable

3. 인코딩

App.tsx을(를) (으)로 변경합니다.
App.tsx

import React, { useState } from "react";
import "./App.css";
import Remarkable from "remarkable";

const App: React.FC = () => {
  const [input, updateInput] = useState("# howdy.\nInput your markdown.");

  return (
    <div className="App">
      <h3>Input Markdown</h3>
      <textarea
        id="markdown-content"
        onChange={(e: any) => {
          updateInput(e.target.value);
        }}
        defaultValue={input}
      />

      <h3>Output</h3>
      <div
        className="md"
        dangerouslySetInnerHTML={{__html:new Remarkable().render(input)}}
      />
    </div>
  );
};

export default App;

4. URL 설정

환경 변수PUBLIC_URL를 설정하여 GitHub Pages에 게시합니다.
사용cross-env환경오염을 피한다.
구축할 때 설정하면 되기 때문에 package.json의build에서 보충한다.

"build": "react-scripts build",

↓

"build": "cross-env PUBLIC_URL=/react-markdown-viewer react-scripts build",

5. 구축

yarn build 구축 가능
구축 결과물은 ./build로 출력됩니다.
서버에 업로드하여 게시할 수 있습니다.

6. GitHub 페이지 게시

GitHub Pages에서는 모든 디렉토리를 루트 디렉토리로 설정할 수 없으므로 ./build 를 다른 브랜치의 루트 디렉토리로 설정합니다.

git subtree push --prefix build/ . gh-pages
git push origin gh-pages:gh-pages

이제 master 분기의 ./build 내용이 gh-pages 분기의 루트 디렉터리로 복제됩니다.
github 저장소 설정을 사용하면 GitHub Pages에서 게시할 수 있습니다.이 경우 gh-pages 브랜치를 공개로 설정합니다.
이렇게 하면 방문할 수 있다.
https://y0kuda.github.io/react-markdown-viewer
이번에는 URL을 줄이고 싶어서 ./build 노선을 설정했지만 이 작업을 하지 않아도 방문./build URL을 지정하면 이동할 수 있다.이때 URL은 https://y0kuda.github.io/react-markdown-viewer/build 입니다.

마지막

끝까지 읽어줘서 고마워요.
미안하지만, 나는 이미 엉망이 된 보도를 한 편 썼다
하지만 누구에게 좋은 점이 있다면 다행이다.
지적, 건의, 평론 등이 있으면 사양하지 마세요.

참고 자료

https://ja.reactjs.org/docs/hooks-state.html
https://qiita.com/mikakane/items/87c8f676815da4e5ac04#%E3%81%B2%E3%81%A8%E3%81%A4%E4%B8%8B%E3%81%AE%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%82%92github-pages%E3%81%AB%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B