React 00 - 초보자: 처음부터 React + Typescript

11877 단어 webpackreacthtmltypescript
이 게시물은 create-react-app 또는 다른 스캐폴딩 도구를 사용하지 않고 React 및 Typescript에서 간단한 프로젝트를 시작하는 방법을 보여줍니다.

시작할 최소한의 종속성을 설치하는 방법을 살펴보고 각 명령 또는 종속성 추가를 설명하려고 합니다.

개발 환경에 node.js이 설치되어 있어야 합니다.

설정 환경



시작하려면 프로젝트의 디렉토리를 만드십시오.
이 게시물에서는 Vs 코드를 사용합니다.

Vs code에서 디렉터리를 연 다음 명령줄을 엽니다. 당신은 그런 것이 있어야합니다



이제 package.json을 초기화하여 종속성과 스크립트를 저장해야 합니다.

나는 보통 yarn을 사용하지만 npm도 사용할 수 있습니다.

# With Yarn
yarn init -y

# With npm
npm init -y


그러면 루트에 package.json 파일이 추가됩니다.
코드를 컴파일하려면 typescript를 dev 종속성으로 추가해야 합니다.

# With Yarn
yarn add -D typescript

# With npm
npm i -D typescript


또한 프로젝트를 압축하고 브라우저에 적합하도록 webpack을 설치해야 합니다.

# With Yarn
yarn add -D webpack webpack-cli

# With npm
npm i -D webpack webpack-cli


그리고 프로젝트를 로컬에서 실행하려면 약간의 독립형 http 서버가 필요합니다.

# With Yarn
yarn add -D http-server

# With npm
npm i -D http-server


약간의 구성



컴파일러가 제대로 작동하도록 하려면 TypeScript 구성 파일을 추가해야 합니다.

# With Yarn
yarn tsc --init

# With npm
npx tsc --init


이렇게 하면 루트에 기본tsconfig.json 파일이 추가됩니다.

파일을 편집하고 다음과 같이 구성합니다.

{
  "compilerOptions": {
    "target"                           : "es6"      ,
    "module"                           : "commonjs" ,
    "jsx"                              : "react"    ,
    "outDir"                           : "./out"    ,
    "rootDir"                          : "./src"    ,
    /* Default flags */
    "strict"                           : true       ,
    "esModuleInterop"                  : true       ,
    "skipLibCheck"                     : true       ,
    "forceConsistentCasingInFileNames" : true
  }
}


이 구성은 다음을 가정합니다.
  • 대상 출력이 ES6과 호환됨
  • JSX 템플릿은 typescript 컴파일러에 의해 컴파일되므로 babel을 사용할 필요가 없습니다
    • .
  • 출력은 out 폴더
    • 에 배치됩니다.
  • 소스 코드는 src 폴더
    • 에 배치됩니다.

    이 시점에서 파일을 작성하고 컴파일할 수 있지만 이제 출력을 압축하도록 Webpack을 구성해야 합니다.

    루트에 webpack.config.js라는 파일을 생성하고 다음을 입력합니다.

    const path = require('path');

module.exports = {
  entry  : './out/App.js',
  output : {
    path     : path.resolve(__dirname, 'www/js'),
    filename : 'app.js'
  },
  externals : {
    "react"     : 'React',
    "react-dom" : 'ReactDOM'
  },
};


    이 구성은 다음을 가정합니다.
  • 진입점은 다음 위치에 있습니다. ./out/App.js
  • 출력이 여기에 배치됩니다: ./www/js.app.js
  • react 및 react-dom 패키지는 압축 시간을 단축하기 위해 CDN에서 추가하므로 압축되지 않습니다.

    • 첫 번째 TSX 파일



    Typescript로 React를 코딩할 때 javascript와 함께 JSX 파일을 사용하지 않고 그에 상응하는 TSX 파일을 사용하게 됩니다. 정확히 동일한 구문이지만 내부에 javascript 대신 typescript가 있습니다.

    이제 src 폴더에 App.tsx라는 이름의 첫 번째 파일을 만들어 보겠습니다.

    import * as React from "react"     ;
import { render } from "react-dom" ;

render(<> Hello kitty </>, document.querySelector("#app"));


    매우 간단한 코드 샘플이지만 작업을 수행합니다 :-)

    이제 마지막 추가 항목인 index.html 파일이 필요합니다.

    다음 위치에 index.html 파일을 만듭니다. www/index.html
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="js/app.js"></script>
</body>
</html>


    파일 끝에 id app 가 포함된 div와 압축된 애플리케이션에 대한 스크립트 참조를 추가했습니다.

    건설 시간입니다



    빌드하고 압축하려면 2개의 명령만 있으면 됩니다.

    # With Yarn
yarn tsc

# With npm
npx tsc


    이렇게 하면 프로젝트가 컴파일되고 결과가 out 폴더에 출력됩니다.

    그럼 포장해야지

    # With Yarn
yarn webpack

# With npm
npx webpack


    감시자를 사용하여 매번 명령을 다시 실행하지 않으려면 -w 플래그를 추가하여 감시 모드에서 각 명령을 실행할 수 있습니다.

    # With Yarn
yarn tsc -w

# With npm
yarn webpack -w


    모든 것이 잘되면 다음과 같습니다.



    결과 찾아보기



    완료하려면 로컬에서 프로젝트를 제공해야 하므로 웹 서버를 시작하여 제공할 수 있습니다.

    # With Yarn
yarn hs ./www

# With npm
npx hs ./www


    이제 브라우저를 열고 http://localhost:8080으로 이동하여 이것을 확인하십시오(희망합니다).



    즐기다 !
    leetcode-44. Wildcard Matching
    세립도 액세스 제어를 사용하여 검색

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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