Create-React-App 없이 React 프로젝트 만들기

5175 단어 reactbeginners
내 React 프로젝트의 대부분은 지금까지 Create React App으로 스핀업되었습니다. 나는 최근에 트레이너가 React 프로젝트를 처음부터 만드는 방법을 잘 설명하는 Frontend Masters 과정을 마쳤습니다. 나는 관련된 단계를 기억하여 내가 기억하고 다른 사람들도 배울 수 있도록 그것에 대해 쓸 것이라고 생각했습니다.
  • 컴퓨터에 폴더를 만듭니다. 코드 편집기로 엽니다.
  • 프로젝트에 src 폴더를 만들고 index.html 라는 파일을 만듭니다.
  • 뼈대 HTML 파일 추가(Emmet 사용 가능) - VSCode에 html:5 입력
  • 내부 <body></body> 에서 다음을 생성합니다.

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


  • 내부에 스크립트 태그를 생성합니다. body:

    • <script src="./App.js"></script>


  • style.css 폴더 안에 src 파일을 만들고 HTML 파일의 헤드에 CSS를 추가합니다.

    • <link rel="stylesheet" href="style.css">


    압형



    NPM


  • npm 초기화: npm init -y (node와 npm이 설치되어 있는지 확인: node -v & npm -v ). package.json 파일을 생성합니다.

    • 더 예쁘다


  • npm i -D prettier
  • format에서 package.json 스크립트 생성: "format": "prettier \"src/**/*.{js,html}\" --write"
  • 기본적으로 파일이 저장될 때 더 예쁘게 실행: 코드 편집기에 설치Prettier. Editor: Format On Save (VSCode에서) 및 Prettier: Require Config 를 선택하십시오.
  • 프로젝트의 루트 폴더에 .prettierrc 파일을 만듭니다.

    • {}


    이제 Prettier는 파일이 저장될 때마다 실행됩니다.

    에스린트


  • 물건 설치:
    • npm i -D eslint eslint-config-prettiernpm install -D babel-eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react // config eslint for reactnpm i -D eslint-plugin-react-hooks // config eslint for hooks
  • .eslintrc.json 구성 파일 생성:

    • {
"extends": [
     "eslint:recommended", 
     "plugin:import/errors",
     "plugin:react/recommended",
     "plugin:jsx-a11y/recommended",
     "prettier", 
     "prettier/react" // << you don't need it anymore since it has been merged into "prettier" https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21
],
"rules": {
     "react/prop/types": 0, // unless you do prop types
     "no-console": 1, // it will be a warning
     "react-hooks/rules-of-hooks": 2,
     "react-hooks/exhaustive-deps": 1, // has to do with effects
},
"plugins": ["react", "import", "jsx-a11y", "react-hooks"],
"parserOptions": {
     "ecmaVersion": 2018,
     "sourceType": "module", // means we will be using import export
     "ecmaFeatures": {
          "jsx": true
     }     
},
"env": {
     "es6": true,
     "browser": true,
     "node": true
},
"settings": {
     "react": {
          "version": "detect"
     }
}
}


  • 그런 다음 package.json 파일 내부에 새 스크립트를 만듭니다.
    • "lint": "eslint \"src/**/*.{js,jsx}\" --quiet"//자동은 오류만 보고합니다https://eslint.org/docs/user-guide/command-line-interface.

    이제 npm run lint 를 실행할 수 있습니다.

    지티노어


  • 루트 디렉토리 안에 .gitignore 파일을 생성합니다. 원격 저장소의 파일/디렉토리를 커밋하지 않습니다. 과정에서 사용된 예:

    • node_modules/
.DS_Store << if you are in a Mac
.cache/
coverage/
.vscode/
.env


    소포


  • Parcel은 매우 수동적이며 구성이 필요하지 않습니다. 그것은 번들러이며 프로덕션 준비가 된 개발 코드를 번들로 제공합니다. 설치npm install -D parcel-bundler . 그런 다음 package.json 에서 새 스크립트를 만듭니다.

    • "dev": "parcel src/index.html"


  • 그런 다음 npm run dev를 실행하면 코드를 묶습니다(무시할 수 있는 .cache 디렉터리가 생성됩니다. Bable은 Parcel에 내장되어 있습니다.

    • Netlify: build 와 같이 앱을 배포하려면 "build": "parcel build src/index.html" 명령도 필요합니다. 그런 다음 Netlify에서 빌드 명령을 npm run build 로 설정하고 게시 디렉터리를 dist 로 설정합니다.

    반응과 반응


  • npm i react react-dom
  • App.js 폴더 안에 src 파일을 만들고 다음을 입력합니다.

    • import React from 'react';
import { render } from 'react-dom'; // or >> import REACTDOM from 'react-dom'

const App = () => {
     return (
          <div>Whatever</div>
     )
};

render(
     <App />, 
     document.getElementById('root')
);
    Codeforces Round #448 (Div. 2)B
    [정렬 알고리즘] - 통 정렬 자바 구현

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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