단순 반응 샘플

소포 반응 샘플
새 React 프로그램을 신속하게 만들기 위한 간단한 React 템플릿을 만들 것입니다.
항상 Parcel 또는 Create React App를 사용할 수 있지만 이 안내서의 범위는 더 작고 간단한 템플릿을 만드는 것입니다.
나는 특히 이런 방법을 React에서 시작된 ppl에 추천한다. 왜냐하면 CRA가 우리를 위해 많은 일을 했기 때문이다CRA version with Parcel. 이를 일종의 과도한 사용으로 사용하기 전에 CRA가 어떤 문제를 해결했는지 이해하는 것이 중요하다고 생각한다.
만약 당신이 지침을 건너뛰고 최종 결과를 검사하고 싶다면, 당신은 이렇게 할 수 있습니다 magic
here
왜 소포야?

소포는 프로필이 필요 없어요!

매우 빠름

상자를 열면 바로 사용할 수 있는 다핵 처리.

캐시는 첫 번째 구축 후에 캐시를 만들어 예열 후에 구축/재건 시간이 매우 빠르다.(두 번째 논점으로 돌아온 것을 환영합니다: D)

특히

코드는 패키지와 웹 패키지의 CRA에서 분리되어 있습니다.

기본적으로 패키지와 웹 패키지의 CRA에서 실시간으로 다시 불러옵니다.

Tree shaking
0에서 1
새 폴더를 만들고 항목을 초기화하려면 다음과 같이 하십시오.

mkdir parcel-react-boilerplate
cd parcel-react-boilerplate

yarn init -y

나는 를 사용할 수 있지만, 원하는 가방 관리자를 마음대로 사용할 수 있다.yarn init -y를 통해 다음을 포함하여 package.json을 만들었습니다.

{
  "name": "parcel-react-boilerplate",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

이 설명서에서 동일한 폴더 구조를 따르는 경우 "main": index.js를 "main": "src/index.js"로 변경합니다.
yarn
패키지 추가
먼저 bundler를 설치하고 구성합니다.

yarn add react react-dom
yarn add -D parcel-bundler @babel/core @babel/preset-env @babel/preset-react

프로젝트 루트 폴더.babelrc 파일을 만들고 다음을 추가합니다.

{
  "presets": ["@babel/preset-react"]
}

프로젝트를 시작하고 구축하는 데 사용할 start script 및 build script 하나를 추가합니다.

"scripts": {
  "start": "parcel src/index.html"
  "build": "parcel build src/index.html"
}

package.json 메인 html 파일의 경로를 변경합니다.
내 폴더 구조는 다음과 같습니다.

- my-project
|- src
|-- index.html
|-- index.js
|- package.json

반응 추가src/index.html 에서 가져왔는지 확인index.html

<script src="./index.js"></script>

우리는 aindex.js와 divid를 함께 놓고 거기에 우리의 반응 내용을 추가할 것이다.

<div id="root"></div>

가져오기root 전에 이 div를 배치해야 합니다.색인 내용을 불러오려고 합니다.요소는 색인 앞에 나타나야 하기 때문에 js.제이스 들어왔어.index.js의 경우 다음과 같은 기본 코드를 배치합니다.

import React from 'react';
import { render } from 'react-dom';

const App = () => <div>Hello Wolrd!</div>;

render(<App />, document.getElementById('root'));

추가 내용 추가
템플릿이 준비되었으므로 이전에 작성한 스크립트 시작 서버를 사용하여 템플릿을 확인할 수 있습니다.

yarn start

만일 모든 것이 정상이라면, 우리 서버의 기본 운행 속도는 index.js 이다.프로젝트의 변경 사항이 감지되면 서버는 자동으로 다시 불러옵니다. 다른 설정은 필요 없습니다.
그러나, 우리는 우리의 생활을 간단하게 하기 위해 별도의 것을 첨가한다.아래의 추가 내용은 개발에만 사용되며 최종 제품에는 사용되지 않습니다. 왜냐하면 우리는 사선에서 사용할 것이기 때문입니다http://localhost:1234.

도구
아이템 검증은 강제적이지 않지만 패키지를 설치하기만 하면 됩니다.

yarn add prop-types

자동 리셋
CRA가 하는 일은 CSS를 자동으로 다시 채우는 것입니다. 이것은 우리가 실행 중인 프로그램의 브라우저에 따라 속성의 모든 '대체 버전' (공급업체 접두사) 을 작성할 필요가 없다는 것을 의미합니다.
사용 :

yarn add -D autoprefixer

Parcel의 경우 루트 사용자의 프로젝트 폴더에 다음과 같은 파일-D을 추가해야 합니다.

{
  "plugins": {
    "autoprefixer": {
      "grid": "autoplace"
    }
  }
}

.postcssrc 패키지를 만들고 가져오십시오index.scss 패키지는 자체적으로 index.js 모듈을 설치합니다.
autoprefixer
더욱 아름답다
를 사용하면 우리는 파일을 저장할 때 자동으로 코드를 포맷하고 전체 프로젝트 포맷 프로그램에 규칙을 정의할 것이다.

yarn add -D prettier

프로젝트의 루트 폴더에 파일sass과 파일.prettierrc을 만듭니다..prettierignore

{
  "semi": true,
  "singleQuote": true,
  "useTabs": false,
  "endOfLine": "lf"
}

더 많은 설정 옵션을 찾을 수 있습니다 Prettier

각 문장의 끝에 분호를 붙이다.

작은따옴표는 작은따옴표 JSX 대신 작은따옴표를 사용하여 이 옵션을 무시합니다.

공백이 있는 표식선을 사용합니다.

end Of Line End-of-line 스타일의 Linux/MAC와git 저장소입니다. Windows 사용자와 리포를 공유하면 매우 편리합니다.

.prettierrc

.cache
node_modules
build
dist

here
에스린트
우리는 와 ESLint/Airbnb JavaScript Style Guide 규칙을 추가할 것이다.
내가 이런 방법을 사용하는 것은 내가 이러한 규칙들이 매우 좋은 참고라는 것을 발견했기 때문이다. 초보자는 일반적으로 매우 계발적이라고 느낄 것이다.

yarn add -D eslint babel-eslint babel-preset-env babel-preset-react eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react

주의: eslint을 기존 Pretter와 조합해서 사용할 수 있도록 .prettierignore와 eslint-config-prettier를 설치하고 있습니다.
프로젝트 루트 폴더에 파일eslint-plugin-prettier 및 .eslinitrc을 만듭니다..eslintignore

{
  "extends": ["airbnb", "plugin:prettier/recommended", "prettier/react"],
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jest": true,
    "node": true
  },
  "rules": {
    "jsx-a11y/href-no-hash": ["off"],
    "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }]
  }
}

Airbnb React/JSX Style Guide 에서 더 많은 규칙을 추가할 수 있으며, 조건에 따라 경고나 오류로 설정할 수 있습니다.
나는 보통 알파벳 가져오기 순서와 도구 유형의 알파벳 순서를 사용하지만, 나는 이 안내서에 포함하지 않는다. 왜냐하면 이것은 매우 개인적인 선호이기 때문이다..eslintrc

*
!*/
!*.js
!*.ts
!*.json
.cache
node_modules
dist

here
Git 무시
크고 불필요한 서류 발표를 피할 수 있는 신기하고 일반적인 것은 없다.

# Parcel #
.cache
dist

# Yarn / NPM #
.DS_*
*.log
logs
node_modules

# VisualStudioCode #
.history
!.vscode/tasks.json
!.vscode/launch.json

Visual Studio 코드는 구성을 공유합니다.
일부 VScode 구성은 팀 멤버를 통해 공유할 수 있습니다.프로젝트 루트 폴더.eslintignore 및 파일.gitignore 및 .vscode을 만듭니다.extensions.json

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

이 파일을 사용하면 항목을 불러오는 사용자에게 확장 제안을 받을 수 있습니다.settings.json

{
  "editor.formatOnSave": true
}

이 파일을 사용하면 파일을 저장할 때 포맷합니다.

결론
현재 템플릿 파일이 있습니다. 대량의 제3자 라이브러리나 백엔드 설정 없이 React 프로젝트를 시작할 수 있습니다. 또한 사용자 정의 설정을 추가하거나 삭제할 수 있습니다.
React 프로젝트의 구성은 무엇입니까?우리는 , TypeScript와 다른 것들을 추가할 수 있습니다. 당신은 어떤 건의가 있습니까?
즐겨라!
업데이트: ES2020 지원
업데이트: 이 프로젝트에도 전자 반응 템플릿이 있는 브랜치가 있습니다.