evangelist

bit.dev의 마케팅 구성 요소

bit.dev 마케팅 웹사이트를 구축하는 데 사용되는 재사용 가능한 React 구성요소 세트입니다. 이 저장소는 구성 요소를 노출하는 구성 요소 기반 마이크로 프런트엔드 입니다.

구성요소 수집 - 선택 및 사용

이 프런트엔드 코드베이스의 모든 구성 요소는 Bit를 독립적으로 사용할 수 있는 구성 요소 집합으로 사용하여 작성 및 노출되었습니다. 프로젝트에 구성 요소를 탐색하고 통합하려면 bit.dev의 evangelist 범위를 참조하세요.

• bbit install 로 독립 구성 요소 설치
• bbit import 사용하여 로컬 작업공간의 구성요소를 탐색하고 필요에 맞게 수정하세요.
• 문서의 라이브 플레이그라운드와 '컴포지션' 페이지에서 구성요소를 직접 사용해 보세요.

이는 구성 요소 기반 마이크로 프런트엔드입니다.

잠깐만.. 뭐?

전체 bit.dev 플랫폼과 웹사이트는 하나의 단일 애플리케이션으로 구축되지 않습니다 . 대신, 별도로 개발된 다음 Bit를 사용하여 함께 노출되고 통합되는 다양한 코드베이스에서 유지 관리되는 구성 요소 로 구축되었습니다.

예를 보여주세요!

bit.dev 홈페이지를 살펴보세요.

다양한 프런트 엔드 코드베이스에 있는 구성 요소로 구축되었음을 알 수 있습니다.

• evangelist 구성요소(여기).
• base-ui 구성 요소.
• 컨테이너 애플리케이션(비공개).
• 등

우리는 Bit를 사용하여 모든 코드베이스의 구성 요소를 다른 페이지와 애플리케이션에 통합할 수 있는 bit.dev의 API 세트로 ​​포함하고 노출합니다. 예를 들어:

• bit.dev에 evangelist 구성 요소가 노출되었습니다.
• bit.dev에 기본 UI 구성 요소가 노출되었습니다.

주요 구성 요소

페이지

여백, 배경이 있는 전체 페이지. 크기 때문에 페이지 구성 요소는 세부적인 콘텐츠를 포함해서는 안 되며 개별 섹션에 대한 레이아웃만 설정해야 합니다.

섹션

대부분의 콘텐츠를 포함하는 개별 영역이며 페이지 간에 재사용할 수 있습니다. 섹션은 페이지마다 다른 공간을 차지할 수 있으므로 크기와 배경을 피해야 합니다.

콘텐츠

시각적 구성 요소(예: MVC 모델)에 대한 원시 데이터 개체입니다. 단일 UI 구성 요소는 다양한 위치에서 많은 콘텐츠 구성 요소를 사용할 수 있으며 콘텐츠는 다양한 UI 구성 요소에서 다르게 표시될 수 있습니다.

원자 / '콘크리트'

이 홈페이지와 관련된 구성 요소입니다. 원자적 UI 구성 요소로서 여전히 추상적이므로 텍스트와 콘텐츠를 포함해서는 안 됩니다.

설정

1. 설치 비트: npm install @teambit/bit --global
2. 이 비트 작업 공간 복제: git clone https://github.com/teambit/evangelist.git evangelist
3. 작업 공간 디렉토리로 이동하십시오: cd evangelist
4. 모든 패키지를 설치하고 모든 구성 요소 가져오기: bbit install
5. Workspace UI를 실행하여 Evangalist 구성 요소를 탐색합니다. bbit start 하고 https://localhost:3000으로 이동합니다.
6. 즐기다!