실제 환경을 위한 React 기본 애플리케이션 설정, 당면 과제 및 팁

이 블로그는 typescript를react native에서 어떻게 사용하는지에 관한 것이다.
만약 당신이 어느 한 걸음에 끊겼다면 참고하세요

프로젝트 만들기
React Native CLI 를 사용하면 TypeScript 가 미리 설치된 프로젝트를 생성할 수 있습니다.

react-native init myapp --template typescript && node myapp/setup.js && cd myapp

NPX는 NPM의 패키지 실행 프로그램으로 NPM 5.2부터 제공됩니다.NPX가 있으면 프로젝트를 초기화하기 위해 전역적으로 "react native cli"패키지를 설치할 필요가 없습니다.
"-template react native template typescript"매개 변수는 typescript 템플릿으로 프로젝트를 만듭니다.나는 항상 Typescript를 사용하여 정적 유형 검사를 하는데, 이것은 개발자를 더욱 우호적이고 실수하기 쉽게 할 것이다.
'-npm'매개 변수는 프로젝트를 초기 의존항을 설치하기 위해 방사선이 아닌 npm를 사용합니다.

TSLint 설정
다음에 우리는 털실을 설치해야 한다.나는 세 가지 규칙의 결합을 좋아한다.

tslint-eslint-rules
tslint-react
tslint-config-prettier

너는 상응하는 설정을 클릭하여 그것의 기능을 볼 수 있다.이제 이러한 규칙을 TSLint와 함께 설치합니다.

npm install --save-dev tslint tslint-eslint-rules tslint-react tslint-config-prettier

그래서, 우리는 tslint을 세우고 싶다.json 파일.그 안에서 너는 너의 털실 배치를 약간 조절할 수 있다. (아래에서 너는 나의 개인적인 선호를 볼 수 있을 것이다.)
tsconfig에서lib 키를 변경하려고 할 수도 있습니다.json은 ["es6"]부터 ["es2017"] 방문 대상까지 비교적 새로운 문법입니다.가치관.
만약 편집기가 TSLint 통합을 지원한다면, 프로그램의 빈 도구 인터페이스를 불평하고 있을 것입니다.tsxü.편집기가 없으면 패키지의 스크립트 키에 다음 값을 추가하십시오.json:

"lint": "tslint --project tsconfig.json"

이제 너는 너의 단말기로 기모할 수 있다.

npm run lint

만약 네가 모든 것을 설정했다면, 이것은 너로 하여금 응용 프로그램의 빈 인터페이스에 대해 큰소리를 치게 할 것이다.js.

초기 디렉토리 및 파일 변경 내용
프로젝트 루트 디렉터리를 깨끗하게 유지하기 위해 모든 프로젝트 자바스크립트 원본 파일을 'src' 디렉터리로 이동하는 것을 좋아합니다.그리고 프로그램을 이동합니다.프로젝트 루트 디렉터리에서 src 디렉터리까지의 tsx 파일입니다.마지막으로, 프로젝트에서 Typescript를 사용했기 때문에, "인덱스"의 이름을 바꾸었습니다.js "파일"인덱스.ts'.

TypeScript를 사용하여 이벤트 처리기 반응
React 이벤트 시스템은 브라우저 네이티브 이벤트 시스템의 패키지입니다.@ types/react npm 패키지에서 이 이벤트 시스템의 형식 스크립트 형식을 제공합니다.이런 유형은 강한 유형 이벤트 매개 변수에 사용할 수 있습니다.흔히 볼 수 있는 것은 다음과 같다.

변경 이벤트

키보드 이벤트

마우스 이벤트

FormEvent

이러한 유형은 모두 작성 이벤트에서 파생됩니다.

예제

update = (e: React.SyntheticEvent): void => {
    let target = e.target as HTMLInputElement;
    this.props.login[target.name] = target.value;
}

// Also for events instead of React.SyntheticEvent, you can also type
// them as following: Event, MouseEvent, KeyboardEvent...etc,
// depends on the use case of the handler.
update = (e: React.FormEvent<EventTarget>): void => {
    let target = e.target as HTMLInputElement;
    this.props.login[target.name] = target.value;
}

function update(e: React.ChangeEvent<HTMLInputElement>) {
    this.props.login[target.name] = e.target.value;
  }

나는 다음과 같은 몇 가지 유형이 있다.html 입력, 선택 및 텍스트 영역에 사용되는 ts 파일:

export type InputChangeEventHandler = React.ChangeEventHandler<HTMLInputElement>
export type TextareaChangeEventHandler = React.ChangeEventHandler<HTMLTextAreaElement>
export type SelectChangeEventHandler = React.ChangeEventHandler<HTMLSelectElement>

그런 다음 가져오기

import { InputChangeEventHandler } from '../types'

그런 다음 다음,

const updateName: InputChangeEventHandler = (event) => {
  // Do something with `event.currentTarget.value`
}
const updateBio: TextareaChangeEventHandler = (event) => {
  // Do something with `event.currentTarget.value`
}
const updateSize: SelectChangeEventHandler = (event) => {
  // Do something with `event.currentTarget.value`
}

태그에 함수를 적용할 때(필요한 다른 도구로 대체):

<input onChange={updateName} ... />
<textarea onChange={updateName} ... />
<select onChange={updateSize} ... >
  // ...
</select>

업데이트:이벤트:반응.변경 이벤트 for submit: 이벤트: ReactFormEvent for click:event:React.MouseEvent.

이벤트 호출

onClick - 사용자가 어떤 요소를 눌렀을 때 onClick 이벤트가 발생합니다.

onChange - 요소 내부의 값이 변경되면 onChange 이벤트가 발생합니다.

onBlur - 원소가 초점을 잃을 때 onBlur 사건이 발생합니다.

반응 본기 청결 계단 캐시

#Win
cd android && gradlew clean && cd .. && react-native run-android

#osX
cd android && bash gradlew clean && cd .. && react-native run-android --variant=release

""작업의 실행 실패: 네이티브 제스처 프로세서에 반응:CompiledBugJavaWithJavac:

방법1

Click in react-native-gesture-handler project on android studio
Click in Refactor on top
Click Migrate to AndroidX.

방법2

// 1.- Add jetifier as dev dependency
yarn install jetifier --dev

// 2.- Add a task in package.json inside of "scripts" tag,

"scripts": {
....
"jetify": "npx jetify"
}
// 3.- Run as yarn
yarn jetify

사용되지 않은 포장 표지
NPM에서 소프트웨어 패키지의 광범위한 가용성에 따라 우리는 대량의 소프트웨어 패키지를 추가하는 경향이 있다.시간의 추이에 따라 코드 관리가 좋지 않기 때문에 의존 관계 트리는 끊임없이 증가하고 가방에 추가적인 권한을 증가시킬 것이다.
사용하지 않은 의존항을 수동으로 식별하고 삭제하는 것은 무서운 과정이 될 것이다.다행히도, 우리는 NPM에서 가방에 사용되지 않은 의존항을 식별할 수 있는 또 다른 가방을 가지고 있다.json 파일.

Depcheck:
Depcheck 분석 패키지.json 출력: 모든 의존항의 사용 방식, 모든 불필요한 의존항, 부족한 의존항.
이 과정은 매우 간단하다.네가 해야 할 일은 평상시대로 하는 것이다.

npm install -g depcheck

사용 방법

depcheck [directory] [arguments]

directory 매개 변수는 프로젝트의 루트 디렉터리(package.json 파일이 있는 위치)입니다.지정하지 않으면 현재 디렉토리가 기본값입니다.

예.
다음 예제에서는/path/to/my/project 폴더에서 종속성을 확인합니다.

$> depcheck /path/to/my/project
Unused dependencies
* underscore
Unused devDependencies
* jasmine
Missing dependencies
* lodash

그레델은 공구를 찾지 못했다.깡통

echo export "JAVA_HOME=\$(/usr/libexec/java_home)" >> ~/.bash_profile

셸을 다시 시작합니다...

실패한 응용 프로그램:processDebugResources Android Studio
프로젝트 정리 단계:* 메뉴 표시줄 -> 구축 -> 프로젝트 정리*를 완료하고 다시 구축합니다.성공했어.
통독해 주셔서 감사합니다. 이 화제에 대한 어떠한 피드백도 환영합니다.
다음 주에 나는 내가 react native에서 개발한 내용을 한 걸음 한 걸음 발표할 것이다.