우리가 React를 좋아하는 이유 중 하나는 구성 요소의 진정한 중용성이다. 다른 프레임워크와 비교해도 마찬가지다.구성 요소를 다시 사용하면 같은 코드를 작성하는 시간을 절약하고 버그와 오류를 방지하며, 서로 다른 프로그램의 사용자를 위해 UI의 일치성을 유지할 수 있습니다.
그러나 응용 프로그램 구성 요소 사이에서 React를 다시 사용하는 것은 듣기보다 더 어려울 수 있습니다.과거에 이 과정은 메모리 라이브러리 분리, 포장, 구성 구축, 우리의 응용 프로그램 재구성 등과 관련된다.
이 글은 use Bit(GitHub)을 어떻게 사용해서 이 과정을 더욱 쉽게 하고 약 90%의 업무를 절약하는지 보여 드리겠습니다.또한 응용 프로그램의 기존 구성 요소를 다시 사용할 수 있는 집합에 점차적으로 수집하여 팀 공유 - like these ones을 제공합니다.

이 짧은 자습서에서는 다음을 학습합니다.

신속 설치 비트 작업공간

애플리케이션

의 구성 요소 추적 및 격리

정의 제로 구성 컴파일러

버전 및 어플리케이션

에서 구성 요소 내보내기

새 애플리케이션

의 구성 요소 사용

보상: Bit를 이용하여 소비 응용 프로그램의 구성 요소(예)를 수정하고 두 응용 프로그램 간에 동시 변경합니다.

빠른 설치

그래서 본 강좌에서 우리는 an example React App on GitHub을 준비했으니 당신은 복제할 수 있습니다.

$ git clone https://github.com/teambit/bit-react-tutorial
$ cd bit-react-tutorial
$ yarn 

이제 Bit 설치를 계속합니다.

$ npm install bit-bin -g

다음에 공유 구성 요소를 불러올 원격 집합이 필요합니다.your own server에서 설정할 수 있지만 Bit의 무료 구성 요소 집선기를 사용합니다.이런 방식을 통해 우리의 소장품을 시각화하고 우리 팀과 공유할 수 있다는 것은 매우 유용하다.
bit.dev and create a free collection으로 빠르게 가세요.1분도 안 걸릴 거야.
이제 터미널로 돌아가서 bit login을 실행하고 로컬 작업 영역과 원격 집합을 연결하면 구성 요소를 내보냅니다.

$ bit login

쿨하다이제 복제된 프로젝트로 돌아가서 작은 작업 영역을 초기화합니다.

$ bit init --package-manager yarn
successfully initialized a bit workspace.

이렇게다음에 프로그램의 재사용 가능한 구성 요소를 추적하고 격리합니다.

재사용 가능한 구성 요소 추적 및 격리

Bit를 사용하면 애플리케이션의 구성 요소를 추적하고 모든 종속 항목을 자동으로 정의하는 등 분리하여 재사용할 수 있습니다.전역 모드(src/components/*)를 사용하여 여러 구성 요소를 추적하거나 특정 구성 요소의 경로를 지정할 수 있습니다.이 예에서 우리는 뒤의 것을 사용할 것이다.bit add 명령을 사용하여 애플리케이션의 제품 목록 구성 요소를 추적합니다.제품 목록 ID를 사용하여 제품 목록을 추적합니다.다음은 an example of how it will look likebit의 공유 구성 요소입니다.덕부

$ bit add src/components/product-list
tracking component product-list:
added src/components/product-list/index.js
added src/components/product-list/product-list.css
added src/components/product-list/products.js

bit status을 빠르게 실행하여 Bit가 구성 요소의 모든 파일을 성공적으로 추적했다는 사실을 알아봅니다.당신은 어느 단계에서든 이 명령을 사용하여 더 많은 정보를 얻을 수 있습니다. 이것은 매우 유용합니다.

$ bit status
new components
(use "bit tag --all [version]" to lock a version with all your changes)

     > product-list ... ok

제로 구성 컴파일러 정의

프로젝트 외부에서 구성 요소가 실행될 수 있도록 Bit에 재사용 가능한 React 컴파일러를 정의하라고 알려 줍니다.이것은 Bit가 재사용을 위해 구성 요소를 분리하는 방법과 각 구성 요소에 대한 구축 절차를 정의하는 작업을 생략하는 것입니다.
프로젝트의 작업 영역을 React compiler으로 가져옵니다.너는 here in this collection을 포함하여 더 많은 컴파일러 react-typescript을 찾을 수 있다.

$ bit import bit.envs/compilers/react --compiler
the following component environments were installed
- bit.envs/[email protected]

현재, 구성 요소는 프로젝트의 의존 항목을 사용할 수 있습니다.Bit 구축은 클라우드 또는 다른 프로젝트에서도 프로세스가 성공할 수 있도록 고립된 환경에서 이루어집니다.구성 요소를 구성하려면 react 프로젝트에서 다음 명령을 실행합니다.

$ bit build

버전 및 내보내기 재사용 가능한 구성 요소

이제 구성 요소를 집합으로 내보냅니다.보시다시피, 환매 프로토콜을 분리하거나 프로그램을 재구성할 필요가 없습니다.
우선, 구성 요소에 버전을 표시합시다.Bit는 각 구성 요소의 종속성을 이해하기 때문에 개별 구성 요소와 모든 종속성에 대한 버전을 나중에 추가할 수 있는 버전 설정 및 내보내기를 허용합니다.

$ bit tag --all 0.0.1
1 component(s) tagged
(use "bit export [collection]" to push these components to a remote")
(use "bit untag" to unstage versions)

new components
(first version for components)
     > [email protected]

원하는 경우 빠른 비트 상태를 실행하여 확인한 다음 모음으로 내보낼 수 있습니다.

$ bit export <username>.<collection-name>
exported 1 components to <username>.<collection-name>

지금 니 자리로 올라가.dev 시리즈, 어떤 모양인지 보세요!
save a visual example for your component을 사용하면 팀과 이 구성 요소를 쉽게 발견하고 시도하며 사용할 수 있습니다.

새 응용 프로그램에 구성 요소 설치

Create Create app 또는 사용자 고유의 를 사용하여 새 React 응용 프로그램을 만듭니다.

$ npx create-react-app my-new-app

만든 새 응용 프로그램으로 이동합니다.
드릴에서 어셈블리를 설치합니다.데프:

$ yarn add @bit/<username>.<collection-name>.product-list --save

이렇게!너 이제 use the component in your new app 할 수 있어!

npm를 사용하려면 프로젝트를 만든 후 npm install을 한 번 실행하여 패키지를 잠그십시오.json을 만들고 npm에서 의존항을 정확하게 구성합니다.

소비 프로그램의 구성 요소 수정

이제 비트를 import the component's source-code까지 사용하겠습니다.dev, 새 프로그램에서 변경을 진행합니다.
먼저 새 프로젝트의 Bit 작업공간을 초기화합니다.

$ bit init

그런 다음 구성 요소 가져오기

$ bit import <username>.<collection-name>/product-list
successfully imported one component

발생한 일은 다음과 같습니다.
구성 요소의 코드, 컴파일된 코드, 노드 모듈을 포함하는 새 톱 레벨 구성 요소 폴더가 생성됩니다(이 예에서는 모든 노드 모듈이 대등한 의존항이고 루트 항목에서 추출되었기 때문에 노드 모듈이 비어 있습니다).
구성 요소에 대한 참조를 포함하도록 .bitmap 파일 수정
소포.json 파일은 원격 패키지가 아닌 지향 파일로 수정되었습니다.너의 소포.현재 json 표시:

"@bit/<username>.<collection-name>.product-list": "file:./components/product-list"

프로그램이 여전히 유효한지 확인하기 위해 프로그램을 시작합니다.보시다시피 변경 사항은 필요 없습니다. 비트는 모든 일을 처리합니다.
그리고 너는 마음대로 코드를 수정할 수 있다.
Here's an example .
현재 bit status을 빠르게 실행하여 코드가 변경되었는지 확인하십시오.Bit 추적 소스 코드 자체(Git를 통해 확장됨) 때문에 구성 요소가 수정되었음을 알 수 있습니다.

$ bit status
modified components
(use "bit tag --all [version]" to lock a version with all your changes)
(use "bit diff" to compare changes)

     > product-list ... ok

현재 버전을 표시하고 구성 요소를 리셋합니다.데프:

$ bit tag product-list
1 component(s) tagged
(use "bit export [collection]" to push these components to a remote")
(use "bit untag" to unstage versions)

changed components
(components that got a version bump)
     > <username>.<collection-name>/[email protected]

그리고

$ bit export <username>.<collection-name>
exported 1 components to <username>.<collection-name>

현재 업데이트 버전의 위치 변경을 볼 수 있습니다.덕부!

첫 번째 응용 프로그램에서 변경 내용 업데이트(체크 아웃)

클론으로 전환하고 구성 요소를 내보낸 react-tutorial 애플리케이션을 업데이트를 확인합니다.

$ bit import
successfully imported one component
- updated <username>.<collection-name>/product-list new versions: 0.0.2

bit status을 실행하여 product-list의 업데이트를 사용할 수 있는지 확인합니다.

$ bit status
pending updates
(use "bit checkout [version] [component_id]" to merge changes)
(use "bit diff [component_id] [new_version]" to compare changes)
(use "bit log [component_id]" to list all available versions)

    > <username>.react-tutorial/product-list current: 0.0.1 latest: 0.0.2

어셈블리에 대한 변경 사항을 프로젝트에 결합합니다.이 명령의 구조는 bit checkout <version> <component>이다.그래서 너는 뛰었다.

$ bit checkout 0.0.2 product-list
successfully switched <username>.react-tutorial/product-list to version 0.0.2
updated src/app/product-list/product-list.component.css
updated src/app/product-list/product-list.component.html
updated src/app/product-list/product-list.component.ts
updated src/app/product-list/product-list.module.ts
updated src/app/product-list/products.ts

Bit는 git 결합을 수행합니다.업데이트 구성 요소에서 온 코드가 코드에 통합되었습니다.
애플리케이션을 다시 실행하여 업데이트된 구성 요소와 함께 작동하는지 확인합니다.

$ yarn start

이렇게이 두 항목 사이에 변화가 생겼다.프로그램이 업데이트된 구성 요소를 사용하여 실행 중입니다.
즐거운 코딩!

결론

응용 프로그램 사이에서 React 구성 요소를 쉽게 다시 사용할 수 있도록, React를 사용하여 개발 속도를 높이고, 일치하는 UI를 유지하며, 오류와 오류를 방지하고, 공유 구성 요소 집합에서 팀워크를 더욱 잘 할 수 있습니다.또한 팀을 위해 다시 사용할 수 있는 UI 구성 요소 라이브러리를 단계적으로 만들 수 있으므로 모든 것을 중단하거나 관심을 잃을 필요가 없습니다.
네가 직접 해 볼 수 있어, explore the project in GitHub.즐거운 코딩!