스토리 북과 반 크로스로 React 앱을 확장하십시오

이 기사는 스토리 북과 색채 간소화가 구성 요소 라이브러리 개발에 어떻게 반응하는지 보여줍니다. 향상된 문서, 시각적 회귀 테스트 및 팀 협업 향상을 제공합니다.

주요 혜택 :

스토리 북 : 더 큰 프로젝트 아키텍처에서 효율적인 구성 요소 라이브러리 생성, 팀워크를 육성하며 컴포넌트 개발을 분리 할 수 ​​있습니다. 접근성 감사, 단위/상호 작용/스냅 샷 테스트, 문서 생성, 쉬운 출판/호스팅 및 시각적 회귀 테스트 (VRT)를위한 색수 통합과 같은 기능이 포함되어 있습니다. 색채 : 스토리 북 동반자 인 반음계는 시각적 회귀와 상호 작용 버그를 사전에 식별하여 생산에 도달하지 못하게합니다. 또한 팀 협업을 단순화합니다

웹 게시 :

Github 페이지, NetLify, AWS S3 또는 색채와 같은 플랫폼을 통해 비 기술적 이해 관계자와 스토리 북을 쉽게 공유하십시오.
• 왜 스토리 북을 선택 하는가?
스토리 북은 엔지니어, 제품 관리자 및 이해 관계자에게 귀중한 자산입니다. 구성 요소 라이브러리 개발을 용이하게하여 협업을 촉진하고 건축 병목 현상을 방지합니다. 독립형 특성을 사용하면 포괄적 인 구성 요소 문서 및 변형 관리가 가능합니다. 주요 기능은 다음과 같습니다
• 웹 접근성 감사 단위, 상호 작용 및 스냅 샷 테스트 사용자 친화적 인 구성 요소 문서 단순화 된 출판 및 호스팅
vrt
• 의 색수성 통합 이 안내서는 React App Project 만들기, 애드온 설치, 스토리 제작, 자동화 된 문서 생성 및 웹 배포 내에서 스토리 북 설정 및 구성을 다룹니다. 스토리 북 설정 및 구성 :
설치 : 가장 효율적인 방법은 프로젝트의 루트 디렉토리 내에서 단일 명령을 사용하는 것입니다.

스토리 북은 프로젝트 종속성을 지능적으로 감지하고 설치 프로세스를 최적화합니다. 호환성 정보는 StoryBook Frameworks 페이지를 참조하십시오. 잠재적 의존성 충돌로 인해 수동 설치가 권장되지 않습니다 구성 :

스토리 북 구성은 주로 를 통해 처리되며 문서 프레젠테이션, 애드온을 통한 UI 확장 및 웹 팩 구성을 사용자 정의 할 수 있습니다. TypeScript는 기본적으로 지원되지만 CSS 아키텍처에는 별도의 설정이 필요합니다. 자세한 내용은 스타일링 및 CSS 문서를 참조하십시오. 샘플을 만들어 봅시다 앱을 확인한 후 ( 사용) 스토리북을 설치하십시오

npx storybook@latest init

설치 프롬프트를 확인하십시오. 스토리 북이 브라우저에서 시작됩니다. <🎜 폴더 (구성 파일 포함)와 <🎜 폴더 (<🎜 🎜> 내)가 프로젝트에 추가됩니다. 에는 새로운 스크립트가 포함됩니다

.storybook 개발에는 stories를 사용하고 출판에는 src를 사용하십시오. package.json 폴더에는 게시 된 스토리 북이 포함되어 있습니다. 이 폴더를 <🎜

npx create-react-app my-scalable-component-library

<🎜 🎜> 파일 (아래 표시된 예)은 다양한 측면을 제어합니다 : <🎜 🎜>

npm run storybook 키는 스토리 위치를 지정합니다. npm run build-storybook 키는 프로젝트 유형마다 다릅니다. storybook-static 키는 자동 문서를 활성화합니다. 고급 옵션은 스토리 북 구성 페이지를 참조하십시오 .gitignore <<> 스토리 북 애드온 :

<🎜 🎜> 추가 기능 확장 스토리 북 기능. 이들은 UI 기반 (외관 수정) 및 사전 설정 기반 (통합 기술)으로 분류됩니다. 통합 페이지에는 사용 가능한 애드온이 나열되어 있습니다. Storybook의 기본 추가 기능은 다음을 포함합니다

main.js <<> : 프로토 타이핑을위한 스토리 링크. <🎜 🎜> <🎜 🎜> <<> : 필수 애드온의 컬렉션.

<🎜 🎜> <<> : CRA 통합을 향상시킵니다

npx storybook@latest init

<<> : 가이드 투어를 제공합니다

<<> : 상호 작용 테스트를 용이하게합니다 stories 접근성 애드온을 추가하려면 : <🎜 🎜> framework 그런 다음 docs 's

배열에 포함하십시오

<<> 구성 요소 스토리 작성 및 문서화 : <🎜 🎜> 스토리는 일반적으로 구성 요소와 그 변형을 나타냅니다. 그들은 동적 파일 (React, Markdown 또는 둘 다)이며 변형을 생성하기 위해 매개 변수 (소품)를 수신합니다. 샘플을 살펴 보겠습니다 기본 내보내기는 기본 구성 요소와 설정을 정의합니다. 매개 변수는 메타 데이터를 제공합니다. 태그는 자동 생성 된 문서를 활성화합니다. 인수 행동을 정의합니다. 기본값 후에 이름이 내보내기는 변형을 나타내며, 각각

가 구성 요소 소품과 정렬됩니다.

데코레이터는 추가 상황으로 이야기를 랩핑합니다.

매개 변수로 정의됩니다. 하위 경쟁자를 통합 할 수 있지만 렌더링 복잡성을 고려하십시오

<<>
• @storybook/addon-links <<> 스토리 북 게시 :
• <((> 생산 빌드 (<🎜 🎜>)는 빌드 폴더에서 정적 파일을 생성합니다. 호스팅 옵션에는 GitHub 페이지, NetLify 및 AWS S3가 포함됩니다. GitHub 작업은 GitHub 페이지로 배포를 자동화 할 수 있습니다

  <<> vrt의 색채 통합 : <🎜 🎜> 색채는 시각적 회귀 테스트로 스토리 북을 향상시킵니다. 색채 계정을 만들고 프로젝트 토큰을 얻은 다음 색채 패키지를 설치하십시오.

  <🎜 🎜>에 <🎜 🎜> : <🎜 🎜>를 추가하십시오

  npx storybook@latest init

  파일로 환경 변수를 설정하십시오. 실행 는 스토리 북을 rarcomice에 게시합니다. CI/CD 통합 (권장)의 경우 GitHub 작업을 사용합니다 (색채 문서 참조).

  결론 : chromatic 스토리 북 및 크로마 틱은 코드 품질을 크게 향상시켜 효율적인 구성 요소 라이브러리 개발, 테스트 및 협업을 가능하게합니다. 그들은 잘 문서화되고 확장 가능하며 유지 관리 가능한 응용 프로그램을 보장합니다

  위 내용은 스토리 북과 반 크로스로 React 앱을 확장하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!