React에서 가격 인하 편집기를 만듭니다.Github 작업을 통해 배포된 js-TypeScript(&T)

나는 내가 프리코드 캠프를 할 때, 그 중의 한 항목에서 가격 인하 편집기를 만들려고 했던 것을 기억한다.그래서 저는 이번에 Markdown 편집기를 사용해서 React와 결합하기로 했습니다.js 및 TypeScript

뭐 공부 해요?

React를 설정합니다.TypeScript 포함 js 프로젝트

html로 컴파일하여 태그 편집기 만들기

React 연결을 사용하여 응용 프로그램에 테마 만들기

Github 작업을 통한 연속 배포

나는 게으른 사람이다. 나는 너희들 대다수도 그렇다고 생각한다.이것은 코드와 프레젠테이션 링크입니다. 직접 보고 싶으면.

프로젝트 소스 코드:

아스바메그 / react typescript 태그 편집기

React 태그 편집기를 사용합니다.js 및 TypeScript는 Github 작업 흐름을 사용한 연속 배포와 결합됩니다.

프로젝트 프레젠테이션: ashwamegh/react typescript 태그 편집기

프로젝트 설정부터 시작하겠습니다.

1. React를 사용하여 프로젝트를 설정합니다.유형 스크립트(&T)

우리는 모두 TypeScript의 기능이 어떻게 당신의 어리석은 실수를 위해 시간을 절약하는지 알고 있습니다.만약react와 결합한다면 그것들은 모든 응용에 동력을 제공하는 강력한 조합이 될 것이다.
기존 TypeScript 지원이 제공되므로 create-react-app 를 사용하겠습니다.항목을 만들 루트 디렉토리로 이동하여 다음 명령을 실행합니다.

npx create-react-app markdown-editor --template typescript

이 --template typescript 로고는 모든 힘든 작업을 완성할 수 있도록 React를 설정합니다.TypeScript가 있는 js 프로젝트입니다.
나중에 응용 프로그램을 만들기 위해 부트 코드를 삭제해야 합니다.
참고로 이 초기 커밋을 확인하여 삭제된 컨텐트를 볼 수 있습니다.https://github.com/ashwamegh/react-typescript-markdown-editor/commit/7cc379ec0d01f3f1a07396ff2ac6c170785df57b초기 단계를 마친 후에 우리는 계속해서 태그 편집기를 만들 것이다.

2. 가격 인하 편집기 만들기

코드를 깊이 연구하기 전에 우리가 개발할 프로젝트의 폴더 구조를 봅시다.

├── README.md
├── package.json
├── public
|  ├── favicon.ico
|  ├── index.html
|  ├── logo192.png
|  ├── logo512.png
|  ├── manifest.json
|  └── robots.txt
├── src
|  ├── App.test.tsx
|  ├── App.tsx
|  ├── components
|  |  ├── Editor.tsx
|  |  ├── Footer.tsx
|  |  ├── Header.tsx
|  |  ├── Main.tsx
|  |  ├── Preview.tsx
|  |  └── shared
|  |     └── index.tsx
|  ├── index.css
|  ├── index.tsx
|  ├── react-app-env.d.ts
|  ├── serviceWorker.ts
|  ├── setupTests.ts
|  └── userDarkMode.js
├── tsconfig.json
└── yarn.lock

나는 emotion 을 사용하여 내 구성 요소에 스타일을 만들고, react-icons 을 사용하여 프로젝트에서 사용하는 아이콘에 스타일을 만들 것이다.따라서 다음 명령을 실행하여 emotion 및 react-icons 을 설치해야 합니다.

npm i -S @emotion/core @emotion/styled react-icons

아니면 나처럼 yarn 를 사용하면 달리기를 할 수 있다

yarn add @emotion/core @emotion/styled react-icons

다음에 우리는 먼저 shared 구성 요소 폴더를 만들어서 우리가 다시 사용할 구성 요소를 만들 것입니다.

/* src/components/shared/index.tsx */

import React from 'react'
import styled from '@emotion/styled'

export const ColumnFlex = styled.div`
  display: flex;
  flex-direction: column;
`
export const RowFlex = styled.div`
  display: flex;
  flex-direction: row;
`

In this file, we have declared two styled components for flex-column and flex-row styled divs which we'll be using later.
To know more about styled-components with emotion library, head on to this link.

3 React 연결을 사용하여 사용자 정의 테마 연결 만들기

우리는 기본적인 테마 기능을 실현하기 위해react 연결을 사용하여 사용자 정의 연결을 만들 것입니다. 이 기능을 사용하면 테마를 연한 색에서 짙은 색으로 전환할 수 있습니다.

/* useDarMode.js */

import { useEffect, useState } from 'react'

export default () => {
  const [theme, setTheme] = useState('light')

  const toggleTheme = () => {
    if (theme === 'dark') {
      setTheme('light')
    } else {
      setTheme('dark')
    }
  }

  useEffect(() => {
    const localTheme = localStorage.getItem('theme')
    if (localTheme) {
      setTheme(localTheme)
    }
  }, [])

  return {
    theme,
    toggleTheme,
  }
}

In our hooks file, we are setting the initial state of the theme to be light using useState hook. And using useEffect to check whether any theme item exists in our browser's local storage, and if there is one, pick the theme from there and set it for our application.

공유 구성 요소와 사용자 정의react 갈고리를 테마로 정의했으니 응용 프로그램 구성 요소를 깊이 있게 연구합시다.
따라서, 나는 우리의 응용 프로그램 구조를 다섯 개의 구성 요소로 나눈다. 각각 머리글, 주 (편집기와 미리 보기 구성 요소가 있는 응용 프로그램의 주요 부분을 포함) 와 머리글 구성 요소이다.

제목//일반 제목 코드 및 주제 전환 스위치 포함

편집기 및 미리보기 구성 요소의 마스터//컨테이너
i, 편집기//편집기 코드 포함
2.가격 인하 코드를 HTML로 미리 보는 코드 미리 보기//포함

바닥글//일반 바닥글 코드 포함

/* src/components/Header.tsx */

import React from 'react'
import { FiSun } from 'react-icons/fi'
import { FaMoon } from 'react-icons/fa'

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'

// Prop check in typescript
interface Props {
  toggleTheme: () => void,
  theme: string
}

const Header: React.FC<Props> = ({ theme, toggleTheme }) => {

  return (
    <header
      css={theme === 'dark' ?
      css`
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: #f89541;
        padding: 24px 32px;
        font-size: 16px;
      `:css`
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: #f8f541;
        padding: 24px 32px;
        box-shadow: 0px -2px 8px #000;
        font-size: 16px;
    `}>
      <div className="header-title">
        Markdown Editor
      </div>
      <div css={
        css`
          cursor: pointer;
        `}
        onClick={toggleTheme}
      >
       {
         theme === 'dark'?
         <FaMoon />:
         <FiSun />
       }
      </div>
    </header>
  )
}

export default Header;

In this component, we are using TypeScript for prop checks and you may wonder, why we're mentioning React.FC here. Its just that, by typing our component as an FC (FunctionComponent), the React TypeScripts types allow us to handle children and defaultProps correctly.

css 라이브러리에 문자열 스타일이 있는 emotionprop을 사용하여 구성 요소의 스타일을 설계할 수 있습니다. 문서here에 따라 더 많은 정보를 알 수 있습니다.
머리글 구성 요소를 만든 후에 꼬리 구성 요소를 만들고 메인 구성 요소로 이동합니다.
페이지 구성 요소의 코드를 보여 줍니다

import React from 'react'

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'

const Footer: React.FC = () => {

  return (
    <footer>
      <div 
        className="footer-description"
        css={
            css`
                padding: 16px 0px;
                overflow: hidden;
                position: absolute;
                width: 100%;
                text-align: center;
                bottom: 0px;
                color: #f89541;
                background: #000;
            `
        }>
       <span>{`</>`}</span><span> with <a href="https://reactjs.org" target="_blank">React.js</a> &amp; <a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a></span>
      </div>
    </footer>
  )
}

export default Footer;

바닥글 구성 요소는 흔히 볼 수 있는 신용 정보를 보여주는 간단한 코드를 포함한다.

/* src/components/Main.tsx */

import React, { useState } from 'react'

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'
import { RowFlex } from './shared'
import Editor from './Editor';
import Preview from './Preview';

interface Props {
  theme: string
}

const Main: React.FC<Props> =  ({ theme }) => {
  const [markdownContent, setMarkdownContent] = useState<string>(`
# H1
## H2
### H3
#### H4
##### H5

__bold__
**bold**
_italic_
`);
  return (
    <RowFlex
      css={css`
        padding: 32px;
        padding-top: 0px;
        height: calc(100vh - 170px);
        `}>
      <Editor theme={theme} markdownContent={markdownContent} setMarkdownContent={setMarkdownContent}/>
      <Preview theme={theme} markdownContent={markdownContent}/>
    </RowFlex>
  )
}

export default Main;

앞의 구성 요소에서 알 수 있듯이 일부 코드는 당신에게 매우 익숙하기 때문에, 당신은 이제 스스로 이해할 수 있습니다.이외에도 우리는 useState 갈고리를 사용하여 우리의 가격 인하 내용을 저장하는 상태를 만들었고, 코드에서 setMarkdownContent 라고 불리는 처리 프로그램을 사용했다.

We need to pass these down to our Editor and Preview components, so that, they can provide the user the way to edit and preview their markdown content. We have also set an initial state for content with some basic markdown text.

편집기 구성 요소의 코드를 보여 줍니다.

/* src/components/Editor.tsx */

import React, { ChangeEvent } from 'react'
import PropTypes from 'prop-types';

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'
import { ColumnFlex } from './shared'

interface Props {
  markdownContent: string;
  setMarkdownContent: (value: string) => void,
  theme: string
}

const Editor: React.FC<Props> = ({ markdownContent, setMarkdownContent, theme }) => {
    return (
        <ColumnFlex
        id="editor"
        css={css`
            flex: 1;
            padding: 16px;
          `}>
        <h2>
        Editor
        </h2>
        <textarea
          onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setMarkdownContent(e.target.value)}
          css={theme === 'dark'?
          css`
            height: 100%;
            border-radius: 4px;
            border: none;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 1);
            background: #000;
            color: #fff;
            font-size: 100%;
            line-height: inherit;
            padding: 8px 16px;
            resize: none;
            overflow: auto;
            &:focus {
              outline: none;
            }
          `
          : css`
            height: 100%;
            border-radius: 4px;
            border: none;
            box-shadow: 2px 2px 10px #999;
            font-size: 100%;
            line-height: inherit;
            padding: 8px 16px;
            resize: none;
            overflow: auto;
            &:focus {
              outline: none;
            }
          `}
          rows={9}
          value={markdownContent}
          />
      </ColumnFlex>
    )
}

Editor.propTypes = {
  markdownContent: PropTypes.string.isRequired,
  setMarkdownContent: PropTypes.func.isRequired,
}

export default Editor;

This is a straight forward component which uses <textarea/> to provide the user a way to enter their inputs, which have to be further compiled down to render it as HTML content in the Preview component.

현재, 우리는 코드를 저장하기 위해 거의 모든 구성 요소를 만들었습니다. 미리 보기 구성 요소를 제외하고는.
사용자의 가격 인하 내용을 간단한 HTML로 컴파일하는 데 필요한 것이 있습니다. 모든 컴파일러 코드를 컴파일하고 싶지 않습니다. 선택의 여지가 많기 때문입니다.
이 응용 프로그램에서, 우리는 marked 라이브러리를 사용하여 가격 인하 내용을 HTML로 컴파일할 것이다.따라서 다음 명령을 실행하여 설치해야 합니다.

npm i -S marked

아니면 실로

yarn add marked

If you want to know more about this library, you can see it here

미리 보기 구성 요소의 코드를 봅시다.

/* src/components/Preview.tsx */

import React from 'react'
import PropTypes from 'prop-types'
import marked from 'marked'

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'
import { ColumnFlex } from './shared'

interface Props {
    markdownContent: string,
    theme: string
}

const Preview: React.FC<Props> = ({ markdownContent, theme }) => {
    const mardownFormattedContent = ( marked(markdownContent));

    return (
        <ColumnFlex
            id="preview"
            css={css`
            flex: 1;
            padding: 16px;
            `}
        >
            <h2>Preview</h2>
            <div
                css={theme === 'dark'
                ? css`
                height: 100%;
                border-radius: 4px;
                border: none;
                box-shadow: 0 -2px 10px rgba(0, 0, 0, 1);
                font-size: 100%;
                line-height: inherit;
                overflow: auto;
                background: #000;
                padding: 8px 16px;
                color: #fff;
                `
                : css`
                height: 100%;
                border-radius: 4px;
                border: none;
                box-shadow: 2px 2px 10px #999;
                font-size: 100%;
                line-height: inherit;
                overflow: auto;
                background: #fff;
                padding: 8px 16px;
                color: #000;
            `}
            dangerouslySetInnerHTML={{__html: mardownFormattedContent}}
            >
            </div>
        </ColumnFlex>
    )
}

Preview.propTypes = {
    markdownContent: PropTypes.string.isRequired
  }

export default Preview;

In this component, we are compiling the markdown content and storing it in mardownFormattedContent variable. And to show a preview of the content in HTML, we will have to use dangerouslySetInnerHTML prop to display the HTML content directly into our DOM, which we are doing by adding this dangerouslySetInnerHTML={{__html: mardownFormattedContent}} prop for the div element.

마지막으로, 우리는 가격 인하 편집기 프로그램을 만드는 데 필요한 모든 구성 요소를 준비했다.이 모든 것을 App.tsx 파일에 넣읍시다.

/* src/App.tsx */

import React from 'react'
import { css, jsx } from '@emotion/core'

// Components
import Header from './components/Header'
import Main from './components/Main'
import Footer from './components/Footer';
import useDarkMode from './userDarkMode';

function App() {
  const { theme, toggleTheme } = useDarkMode();
  const themeStyles = theme === 'light'? {
    backgroundColor: '#eee',
    color: '#000'
  }: {
    backgroundColor: '#171616',
    color: '#fff'
  }
  return (
    <div 
      className="App"
      style={themeStyles}
      >
      <Header theme={theme} toggleTheme={toggleTheme}/>
      <Main theme={theme}/>
      <Footer />
    </div>
  );
}

export default App;

응용 프로그램 구성 요소에서 하위 구성 요소를 가져오고 테마 도구를 전달합니다.
현재 상술한 모든 절차를 마쳤다면, 실행 중인 가격 인하 편집기 프로그램이 있을 것입니다. 제가 사용하는 스타일에 대해서는 제가 언급한 링크를 사용하여 원본 코드를 볼 수 있습니다.

Now, its time to create Github actions for our project to create continuous deployment workflow on every push to master.

4 Github 작업을 통한 연속 배포 설정

Github 작업 흐름을 사용하여 마스터를 전송할 때마다 웹 응용 프로그램을 구축하고 배치합니다.

Since this is not a enterprise application that holds the branches for production and development, I will setup my workflow for master branch, but if in any time in future, you require to setup the Github action workflow for your enterprise application, Just be careful with the branches.

이를 위해 다음 단계를 따르겠습니다.

모든 워크플로우 구성을 저장하는 프로젝트 루트 디렉터리.github/workflows/에 폴더를 만듭니다.

우리는 JamesIves/github-pages-deploy-action 조작을 사용하여 응용 프로그램을 배치할 것이다.

다음에 우리는 여기에서 .yml 파일을 만들 것이다. 이 파일은 응용 프로그램을 구축하고 GitHub 페이지에 배치하는 것을 책임진다.이름을 지어봅시다 build-and-deploy-to-gh-pages.yml

이 안에 뭐가 있는지 보여주세요build-and-deploy-to-gh-pages.yml.

# build-and-deploy-to-gh-pages.yml

name: Build & deploy to GitHub Pages
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v1
      - name: Set up Node
        uses: actions/setup-node@v1
        with:
          node-version: 10.x 
      - name: Set email
        run: git config --global user.email "${{ secrets.adminemail }}"
      - name: Set username
        run: git config --global user.name "${{ secrets.adminname }}"
      - name: npm install command
        run: npm install
      - name: Run build command
        run: npm run build
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BASE_BRANCH: master
          BRANCH: gh-pages # The branch the action should deploy to.
          FOLDER: build # The folder the action should deploy.

이 작업 흐름은 매번 실행됩니다. 우리는 일부 물건을 마스터에 전송하고 gh-pages 지점을 통해 응용 프로그램을 배치합니다.
워크플로우 파일 분해

name: Build & deploy to GitHub Pages
on:
  push:
    branches:
      - master

이것은 우리의 작업 흐름 이름과 그 중에서 작업을 실행하는 데 사용되는 트리거를 정의합니다.여기에서 우리는 트리거를 설치하여 Push 지점 중의 모든 master 사건을 정탐한다.

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v1
      - name: Set up Node
        uses: actions/setup-node@v1
        with:
          node-version: 10.x 
      - name: Set email
        run: git config --global user.email "${{ secrets.adminemail }}"
      - name: Set username
        run: git config --global user.name "${{ secrets.adminname }}"
      - name: npm install command
        run: npm install
      - name: Run build command
        run: npm run build
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BASE_BRANCH: master
          BRANCH: gh-pages # The branch the action should deploy to.
          FOLDER: build # The folder the action should deploy.

이것은 우리의 작업 절차에서 가장 중요한 부분으로 완성해야 한다고 성명했다jobs.설정 중의 일부 줄은 자체 해석된 것runs-on: ubuntu-latest으로 시스템을 정의하고 그 위에서 실행될 것이다.

- name: Checkout
        uses: actions/checkout@v1

이것은 Repo를 검사하는 작업입니다. 앞으로의 작업에서 우리는 노드를 설치하고git 프로필을 설정함으로써 개발 환경을 설정할 것입니다.그리고 모든 의존항을 추출하기 위해 npm install 명령을 실행합니다.

- name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BASE_BRANCH: master
          BRANCH: gh-pages # The branch the action should deploy to.
          FOLDER: build # The folder the action should deploy.

After the build command has been completed, we are using JamesIves/github-pages-deploy-action@releases/v3 action to deploy our build folder to gh-pages.

이 워크플로우는 주 지점에서 특정 컨텐트를 푸시할 때마다 실행되며 정적 구축 폴더를 build 지점에 배치합니다.

현재, 배치가 완료되면, 당신은github 링크 https://yourusername.github.io/markdown-editor/ 에서 응용 프로그램을 실행할 수 있습니다.

Don't forget to add "homepage" : "https://yourusername.github.io/markdown-editor/" in package.json file, otherwise serving of static contents may cause problem.

만약 당신이 나의 글을 좋아한다면 트위터에서 나의 일보gh-pages를 팔로우할 수도 있고, Github를 통해 나의 개인 프로젝트를 팔로우할 수도 있다.평론을 발표해 주십시오. 당신은 이 문장이 어떻다고 생각합니까?감사합니다.
액체 오류: 내부

아스바메그 / react typescript 태그 편집기

React 태그 편집기를 사용합니다.js 및 TypeScript는 Github 작업 흐름을 사용한 연속 배포와 결합됩니다.