평신도의 언어 타이프 라이터 (5) - 반응하는 프로젝트 타이프 라이터에 사용

머리말

에서 두 번째 섹션 , 우리는이 다음 섹션에서 웹 프로젝트의 타이프 라이터 창조의 사용을 논의, 우리는 타이프 라이터 프로젝트와 응용 프로그램의 유형을 생성 반응 결합하는 방법에 대해 설명합니다.

준비된

프로젝트의 두 번째 섹션의 기초 웹팩 구성은 일부 내용을 변경하는

반응 유형 @ / 반응-DOM / 유형 @, 반응, 반응-DOM 다음 따라 반작용 추가

웹팩 구성 파일을 수정

다음과 같이 webpack.base.config.js, 파일의 나머지 부분과 두 번째 부분 일치 개정을 수정합니다 :

CONST HtmlWebpackPlugin 필요 = ( 'HTML-웹팩 - 플러그인') 

module.exports = { 
    항목 { 
        '애플리케이션' './src/index.tsx' 
    } 
    출력 { 
        파일명 :. "[이름] chunkhash 8 ]의 .js ' 
    } 
    해결 : { 
        확장 : ['은 .js ','.TS을 ','.tsx '] 
    }, 
    모듈 { 
        규칙 : [ 
            { 
                시험 : /\.tsx?$/i, 
                사용 : { 
                    로더 '의 TS-로더' 
                }], 
                제외 : / node_modules / 
            } 
        ] 
    }, 
    플러그인 :[ 
        새로운 HtmlWebpackPlugin ({[ 
            템플릿 : './src/index.html'
        }) 
    ], 
    최적화 : {//拆包
        splitChunks : { 
            덩어리 '모든' 
        } 
    } 
}

　　

우리는 입구 이것은 우리가 입구 조립 반응이다 index.tsx합니다.

인덱스 구성 요소를 변경

우리는 다음과 같이 개정 index.ts의 두 번째 섹션 될 것입니다 :

// const를 안녕하세요 : 문자열 = '안녕하세요 TypeScripy' 
// document.querySelectorAll ( '응용 프로그램.') [0] .innerHTML = 안녕하세요 

가져 오기 '반응'에서 반작용 
'반응-DOM을'에서 수입 ReactDom 

./Hello '에서 헬로 수입 ' 

ReactDom.render ( 
    <NAME = 안녕하세요'타입 '/> 
    document.querySelectorAll ('. 앱 ') [0] 
)

　　

안녕하세요 구성 요소

가져 오기에서 '반응'반응 

{인사말 인터페이스 
    : 문자열 이름을 
// 소품 인터페이스 유형을 정의하는 데 사용} 

const를여보세요 = (소품 : 인사말을) => <DIV> props.name 헬로 {} </ DIV> 

내보내기 기본 헬로

　　

tsconfig.js 파일을 수정

지원 컴파일러 옵션은 jsx과 같이 개정 "반응"

프로젝트를 실행

NPM은 자신의 프로젝트가 실행되었습니다 볼 수 있습니다 시작합니다.

GitHub의 프로젝트 주소 :  https://github.com/qixingduanyan/ts-react

당신은 자신의 돌아 오는 등 REDUX-사가 같은 라우터 및 비동기 요청 미들웨어, REDUX-썽크를 구성 할 수 있습니다

나는 또한 간단한 비동기 요청 비계를 구성 : https://github.com/qixingduanyan/typescript-react-app

개요

이 문서에서는 첫째, 프로젝트 반응 타이프 라이터를 사용하여 내부의 원리를 탐구하기 위해 자신의 지식을 적용하는 방법을 모색하는 것입니다.

당신이 타이프 라이터 프로젝트를 수행 할 경우이 제 5 무엇 타이프 라이터 사용 예 이해해야합니다, 당신이 더 많은 표준 TSX 코드를 작성할 수 있습니다.

내 블로그 주소 : http://www.gaoyunjiao.fun/?p=140