기본 제공 Medium

소개

2020년에도 이동 발전은 여전히 상승 단계에 있다.소규모 기업에 있어 현지 이동 개발은 대부분의 상황에서 선택이 아니다. 왜냐하면 대량의 시간과 개발자 자원이 필요하기 때문에 원가 효율이 부족하기 때문이다.다행히도 React Native, 페이스북의 모바일 크로스플랫폼 개발 도구는 지난 몇 년 동안 크게 개선되었고 순수한 로컬 모바일 개발이 아니라 실행 가능한 선택이 될 수 있었다.
본문에서 나는 다음과 같은 주제를 토론할 것이다.

동기

프로젝트 안내

초기 디렉토리 및 파일 변경

현식 구축 도구 및 의존 버전

코드 포맷 및linting

절대 수입 및 모듈화

조별 수출

마지막 생각

동기

개인적으로 나는 계획을 앞당기는 것을 좋아한다. 만약 프로젝트가 튼튼한 기초 위에 세워진다면, 그것은 시간의 시련을 견뎌낼 것이라고 믿는다.내가 프로젝트를 시작할 때마다 나는 항상 그것이 장기적으로 운행하는 프로젝트라고 생각한다. 이것은 내가 발생할 수 있는 어떤 일을 위해 준비를 하려고 하지만 예견성이 없다는 것을 의미한다.
Supercharge 때 저는 여러 개의 React Native 프로젝트를 성공적으로 발표했고 생산 과정에서 다년간의 지원을 제공했습니다. 저는 여러분과 기교를 공유하여 제가 현재 어떻게 새로운 React Native 프로젝트를 시작하는지 알려드리고 싶습니다.

선결 조건

React Native requirements 외에 Node Version Manager(MacOS, Linux, NodeJS 8.17.0 이상, Node Package Manager 5.2 이상, Windows 및 Visual Studio Code 확장이 있는 ESLint 설치를 권장합니다.

더 예쁘다 프로젝트 안내

나는 항상 을 사용하여 새로운React 원생 프로젝트를 만듭니다. 장기적으로 볼 때, 나는 원생 (안드로이드, IOS) 코드를 작성해야 할 가능성이 높기 때문입니다.
MyApp이라는 새 React 네이티브 프로젝트를 만듭니다.

npx react-native init MyApp --template react-native-template-typescript --npm

React Native CLI NPM 패키지 실행 프로그램으로 NPM 5.2부터 제공됩니다.NPX를 사용하면 프로젝트를 초기화하기 위해 "react native cli"패키지를 전역적으로 설치할 필요가 없습니다.

"--template react native template typescript"매개 변수는 typescript 템플릿을 사용하여 프로젝트를 만듭니다.저는 항상 Typescript를 사용하여 정적 형식 검사를 합니다. 이것은 개발자에게 더욱 우호적이고 실수하기 쉽습니다.

"--npm"매개 변수는 프로젝트가 Yarn이 아닌 npm을 사용하여 초기 의존 항목을 설치합니다.

NPX 회사 초기 디렉토리 및 파일 변경 사항

나는 프로젝트 루트 디렉터리를 깔끔하게 유지하기 위해 모든 프로젝트javascript 원본 파일을'src'디렉터리로 이동하는 것을 좋아한다.그리고 나는 응용 프로그램을 이동한다.프로젝트 루트에서'src'디렉터리로 가는 tsx 파일입니다.마지막으로 프로젝트에서 Typescript를 사용하기 때문에 색인 이름을 바꿉니다.js "file to"인덱스.ts’.

현식 생성 도구 및 의존 항목 버전

중요한 것은 프로젝트 구축을 중복할 수 있도록 하는 것이다. 프로젝트 구축이 어디에 있든지 (CI, 기타 개발자의 기계).이것이 바로 내가 가능한 한 현식 구축 도구, 패키지 관리자, 의존 버전을 사용하는 것을 좋아하는 이유이다.
명시적 노드 및 NPM 버전을 사용하려면 다음과 같이 변경해야 합니다.
패키지를 업데이트합니다."엔진"블록이 있는 json 파일:

"engines": {
  "node:": "x.y.z",
  "npm": "a.b.c",
}

, 여기서 "x.y.z"는 사용할 현식 노드 버전입니다(예: "12.16.1")

, 여기서 "a.b.c"는 사용자가 사용하고자 하는 현식 NPM 버전입니다(예: "6.13.4")

만들다.프로젝트 루트 디렉터리의 npmrc 파일은 다음과 같습니다.

engine-strict=true
save-exact=true

"engine strict=true"줄은 NPM이 의존항을 설치하려고 할 때 "engines"블록에 정의된 허용 버전을 찾을 수 있도록 합니다

"save exact=true"줄은 NPM을 현식 의존 버전으로 설치합니다.너는 이것이 바로 우리가 왜 자물쇠를 가지고 있는지 옳다고 생각한다.json 파일, 하지만 가방에서 현저한 의존 버전을 보는 것을 좋아합니다.json 파일.

코드 형식과 linting

여러 개발자가 프로젝트에 참여할 때 일치하는 코드 스타일이 매우 중요하다.코드 형식을 걱정할 필요가 없게 하기 위해서, 나는 Prettier를 사용했는데, 이것은 나의 부담을 경감시켰다.
하나 있다.prettierrc.js의 파일은 이미 프로젝트 루트 디렉터리에 있지만, 우리는 그것을 더욱 사용자 정의할 수 있습니다.예를 들어 다음과 같은 더 멋진 구성을 사용했습니다.

module.exports = {
  tabWidth: 2,
  useTabs: false,
  printWidth: 140,
  semi: true,
  trailingComma: 'es5',
  bracketSpacing: true,
  arrowParens: 'always',
  singleQuote: true,
  jsxSingleQuote: true,
  jsxBracketSameLine: true,
};

코드를 저장할 때 자동 작업으로 포맷하기 위해 다음 내용으로 Visual Studio 코드의 작업공간 구성 파일(.vscode/settings.json)을 채웁니다.

{
  "editor.tabSize": 2,
  "editor.formatOnSave": false,
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  },
  "typescript.tsdk": "node_modules/typescript/lib"
}

원본 파일의 인용부호를 더 좋아하기 때문에, 규칙 덮어쓰기를 에 추가합니다.eslintrc.js의 파일은 나에게 따옴표를 경고하지 않습니다.

module.exports = {
  root: true,
  extends: '@react-native-community',
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  overrides: [
    {
      files: ['*.js', '*.ts', '*.jsx', '*.tsx'],
      rules: {
        'jsx-quotes': 0,
      },
    },
  ],
};

마지막 단계에서, 나는 linting 스크립트를 패키지에 추가합니다.json 파일:

"scripts": {
  "lint:style": "prettier --check 'src/**/**.{js,ts,jsx,tsx}'",
  "lint:code": "eslint src/ --ext .js,.jsx,.ts,.tsx",
  "lint": "npm run lint:style && npm run lint:code",
  "test": "jest",
  "sanity": "npm run lint && npm run test"
}

절대 수입 및 모듈화

내가 디렉터리 트리에 깊이 들어갔을 때, 나는 상대적으로 가져오는 것을 좋아하지 않았다.이것은 재구성을 하나의 환경으로 만들었다.이런 상황을 피하기 위해서 나는 항상 일부 논리를 바탕으로 코드 라이브러리를 모듈화하고 원본 파일에서 절대 가져오기를 사용한다.
먼저 다음 디렉토리와 파일 구조를 만듭니다.

src/
  app/
    App.tsx
    package.json
  core/
    package.json
  ui/
    package.json

하위 디렉터리에 패키지 json 파일을 만들어서 하위 모듈을 정의했습니다.가방의 내용을 채우겠습니다.json 파일:
src/app/package.json

{
  "name": "app"
}

src/core/package.json

{
  "name": "core"
}

src/ui/package.json

{
  "name": "ui"
}

절대 가져오기를 사용할 수 있도록 tsconfig를 업데이트해야 합니다.프로젝트 루트의 json 파일:

{
  "compilerOptions": {
    "baseUrl": "./src",
  }
}

이러한 변경 사항을 적용하면 다음과 같이 가져오기 문구를 사용할 수 있습니다.
src/app/app.회사 명

import { Row } from 'ui/component/layout/Row.component.tsx'
import { someExportedUtilMethod } from 'core/util/utils.ts'

순환 수입을 피하고 관심사의 분리를 완전하게 유지하기 위해서는 다음과 같은 중요한 규칙이 있다.

동일한 하위 모듈 디렉터리

에서 파일을 가져올 때 모든 하위 모듈 디렉터리에서 파일을 상대적으로 가져와야 한다

"app"디렉터리의 파일은 "app", "core"및 "ui"디렉터리의 파일에서 가져와야 한다

코어 디렉토리의 파일은 코어 디렉토리의 파일에서만 가져올 수 있습니다

"ui"디렉터리의 파일은 "ui"와 "core"디렉터리의 파일에서 가져와야 한다

그룹 내보내기

기본 내보내기가 아닌 이름 내보내기를 사용할 때 색인 파일에 그룹화한 다음 색인 파일을 사용하여 에서 이름 내보내기를 가져올 수 있습니다.이렇게 하면 주어진 루트 디렉터리에서 파일을 자유롭게 이동할 수 있고, 이 파일을 가져오는 데 사용되는 모든 원본 파일을 업데이트할 필요가 없다는 장점이 있다.
우선, 나는 다음과 같은 디렉터리와 파일 구조를 가지고 있다.

src/
  app/
    App.tsx
    package.json
  core/
    package.json
  ui/
    component/
      button/
        index.ts
        FlatButton.component.tsx
        RaisedButton.component.tsx
      layout/
        index.ts
        Column.component.tsx
        Row.component.tsx
      index.ts
    package.json

src/ui/component/button/index.송전 시스템

export * from './FlatButton.component';
export * from './RaisedButton.component';

src/ui/component/layout/index.송전 시스템

export * from './Column.component';
export * from './Row.component';

src/ui/component/index.송전 시스템

export * from './button';
export * from './layout';

색인 파일을 채우면 다음과 같이 가져오기를 사용할 수 있습니다.
src/app/app.회사 명

import { Column, FlatButton, RaisedButton, Row } from 'ui/component';

이렇게 하면 가져오기 경로를 현저하게 정의할 필요가 없습니다. 구성 요소 디렉터리에서 구성 요소를 자유롭게 이동할 수 있습니다. 관련 인덱스 파일을 업데이트하기만 하면 됩니다.

마지막 생각

이 가이드가 새 React Native 프로젝트를 시작할 때 도움이 되기를 바랍니다.
기억해라. 변함없는 것은 없다. 이것은 단지 나와 React Native가 직접 겪은 경험에 근거하여 제기한 건의일 뿐이다.
통독해 주셔서 감사합니다. 저는 당신이 이 주제에 대한 어떠한 피드백도 환영합니다.
에서 우리는 차세대 혁신 기구로 우리의 고객과 협력하여 변혁적인 디지털 해결 방안을 창조한다.만약 당신이 이 글을 좋아한다면, 우리 Supercharge 에서 증압기의 다른 글을 보거나, 우리 blog 를 계속 팔로우하세요.만약 당신이 빈 직위에 흥미가 있다면 아래의 절차를 따르십시오Facebook.