React Storybook : 아름다운 사용자 인터페이스를 쉽게 개발하십시오

프론트 엔드 프로젝트의 시작 부분에서 아름다운 인터페이스가 일반적으로 먼저 설계되었습니다. 모든 UI 구성 요소와 다양한 상태 및 효과를 신중하게 계획하고 그립니다. 그러나 개발 중에는 상황이 변하는 경향이 있습니다. 새로운 요구와 예상치 못한 사용 사례는 차례로 떠오르고 있습니다. 처음에 아름다운 구성 요소 라이브러리는 이러한 모든 요구 사항을 다루지 않으며 새로운 디자인을 계속 추가해야합니다. 현재 주변에 디자인 전문가가 있다면 훌륭하지만 종종 다른 프로젝트로 전환하여 개발자만으로도 이러한 변경 사항을 처리하도록합니다. 결과적으로 설계 일관성이 감소하기 시작합니다. 구성 요소 라이브러리에서 기존 구성 요소를 추적하는 것은 어렵습니다.

이 설계 혼란을 피하기 위해 일반적으로 모든 구성 요소에 대해 별도의 문서를 만드는 것이 가장 좋습니다. 이 목적으로 사용할 수있는 다양한 도구가 있지만이 기사는 React 응용 프로그램을 위해 특별히 설계된 도구 인 React Storybook에 중점을 둘 것입니다. 이를 통해 구성 요소 및 해당 기능 모음을 쉽게 찾아 볼 수 있습니다. React Native 구성 요소 라이브러리는 이러한 응용 프로그램의 예입니다.

키 포인트

UI 개발 단순화 :

반응 스토리 북은 UI 구성 요소의 개발 및 관리 프로세스를 단순화하여 개발자가 구성 요소를 독립적으로 구축하고 실시간으로 동작을 시각화 할 수 있도록합니다.

강화 된 협업 :

는 모든 UI 구성 요소를보고 상호 작용할 수있는 단일 위치를 제공함으로써 디자이너, 개발자 및 기타 이해 관계자 간의 격차를 해소하는 협업 플랫폼 역할을합니다. 사용자 정의 가능하고 확장 가능 : 는 애드온 및 구성 설정이 포함 된 광범위한 사용자 정의 옵션을 제공하여 개발자가 특정 프로젝트 요구에 맞게 도구를 사용자 정의 할 수 있도록합니다.

는 자동화 된 테스트를 지원합니다.
• 는 JEST 및 기타 테스트 프레임 워크와 통합하여 UI 구성 요소 개발 환경에서 직접 자동 테스트를 용이하게합니다. 광범위하게 다재다능하고 확장 가능 :
소규모 및 대형 프로젝트에 적합하며 React 이외의 다른 JavaScript 프레임 워크를 지원하므로 다양한 개발 팀에게 다양한 선택이됩니다.
• 왜 반응 스토리 북이 필요합니까? 그렇다면이 디스플레이가 어떻게 도움이 될 수 있습니까? 이 질문에 답하기 위해 UI 구성 요소 개발에 관련된 사람들을 나열하고 그들의 요구를 평가하십시오. 워크 플로에 따라이 목록은 다를 수 있지만 일반적으로 다음이 포함됩니다. 디자이너 또는 UX Expert 사용자 인터페이스의 모양과 느낌을 담당합니다. 프로젝트 프로토 타입 단계가 완료되면 디자이너는 일반적으로 팀을 떠납니다. 새로운 요구 사항이 발생하면 UI의 현재 상태를 빠르게 이해해야합니다.
• 개발자 개발자는 이러한 구성 요소를 만드는 사람들이며 스타일 가이드의 주요 수혜자 일 수 있습니다. 개발자에게는 두 가지 주요 사용 사례가 있습니다. 도서관에서 올바른 구성 요소를 찾고 개발 중에 테스트 할 수 있습니다.

  테스터 테스터는 구성 요소가 예상대로 구현되었는지주의 깊게 확인합니다. 테스터의 주요 작업 중 하나는 구성 요소가 모든 측면에서 올바르게 작동하는지 확인하는 것입니다. 이것은 통합 테스트의 필요성을 제거하지는 않지만 일반적으로 프로젝트 자체에서 혼자하는 것보다 더 편리합니다.

  제품 소유자 디자인 및 구현 요원을받습니다. 제품 소유자는 프로젝트의 모든 부분이 기대치와 일치하고 브랜드 스타일이 일관되도록해야합니다.

  당신은 모든 관련된 사람들이 공통적으로하는 것이 모든 구성 요소와 단일 위치를 가지고 있음을 알았을 것입니다. 프로젝트 자체에서 모든 구성 요소를 찾는 것은 매우 지루할 수 있습니다. 그것에 대해 생각하십시오. 프로젝트에서 가능한 모든 버튼 변형을 찾는 데 얼마나 걸립니까 (상태 (비활성화, 1 차, 보조 등)? 따라서 별도의 라이브러리를 갖는 것이 훨씬 편리합니다.

  내가 당신을 설득한다면, 프로젝트에서 스토리 북을 설정하는 방법을 살펴 보겠습니다.
  반응 스토리 북
  세트 React Storybook을 설정하려면 먼저 React 프로젝트가 필요합니다. 현재 적절한 프로젝트가 없다면 Create-React-App으로 쉽게 만들 수 있습니다.

  스토리 북을 생성하려면 전 세계적으로 GetTtoryBook을 설치하십시오 :

  그런 다음 프로젝트로 이동하여 실행하십시오 :

  이 명령은 다음 세 가지 작업을 수행합니다

  @kadira/storybook을 프로젝트에 설치하십시오.

  Package.json 파일에 스토리 북 및 빌드 스토리 북 스크립트를 추가하십시오. 기본 구성과 샘플 구성 요소와 스토리가있는 스토리 폴더가있는 .StoryBook 폴더를 만듭니다.

  스토리 북을 실행하려면 NPM 실행 스토리 북을 실행하고 표시된 주소 ( https://www.php.cn/link/93e4d7106625e1b0f2eb8af065c83452 새로운 내용을 추가하십시오

  이제 반응 스토리 북이 실행되었으므로 새 컨텐츠를 추가하는 방법을 살펴 보겠습니다. 스토리를 만들어 각 새 페이지가 추가됩니다. 이들은 구성 요소를 렌더링하는 코드 스 니펫입니다. gettstorybook에서 생성 된 샘플 스토리는 다음과 같습니다.

  함수의

  <code>npm i -g getstorybook</code>

  스토리는 내비게이션 메뉴에서 새로운 부분을 생성하고 추가 메소드는 새 하위 부품을 만듭니다. 스토리 북을 마음대로 구성 할 수 있지만 두 레벨을 초과하는 계층 구조를 만들 수는 없습니다. 스토리 북을 구성하는 간단한 방법 중 하나는 "Form Input", "Navigation"또는 "Widgets"및 개별 구성 요소의 하위 부위와 같은 관련 요소 그룹에 대한 공통 최상위 섹션을 작성하는 것입니다.

  스토리 파일을 배치 할 위치를 자유롭게 선택할 수 있습니다. 별도의 스토리 폴더 또는 구성 요소 옆에 있습니다. 나는 구성 요소로 스토리를두면 접근 가능하고 최신 상태를 유지하는 데 도움이되기 때문에 개인적으로 후자를 선호합니다.

  스토리는 다음 코드가 포함 된 .storybook/config.js 파일에로드됩니다.

  <code>npm i -g getstorybook</code>

  기본적으로 SRC/Stories/Index.js 파일을로드하고 스토리를 가져올 것으로 기대합니다. 이것은 우리가 만든 모든 새로운 이야기를 가져와야하기 때문에 약간 불편합니다. 이 스크립트를 수정하여 WebPack의 요구 사항을 사용하여 모든 스토리를 자동으로로드 할 수 있습니다. 스토리 파일을 나머지 코드와 구별하기 위해 컨벤션을 통해 .stories.js 확장자를 추가 할 수 있습니다. 수정 된 스크립트는 다음과 같아야합니다

  다른 폴더를 소스 코드로 사용하는 경우 올바른 위치를 가리 키십시오. 변경 사항을 발효시키기 위해 스토리 북 재실행. 스토리 북은 더 이상 index.js 파일을 가져 오지 않기 때문에 비어있을 것이지만 곧이 문제를 해결할 것입니다.

  <code>getstorybook</code>

  (다음 내용은 기본적으로 원본 텍스트와 일치하며 의미론을 변경하지 않도록 약간 조정하고 부분 설명이 단순화됩니다)
  새로운 이야기 쓰기

  이제 우리는 우리의 요구에 맞게 스토리 북을 약간 조정 했으므로 첫 번째 이야기를 봅시다. 그러나 먼저 보여줄 구성 요소를 만들어야합니다. 컬러 블록에 이름을 표시하는 간단한 이름 구성 요소를 작성하겠습니다. 이 구성 요소에는 다음 JavaScript 및 CSS가 있습니다.

  당신은이 간단한 구성 요소에 기본, 강조 및 비활성화의 세 가지 상태를 가질 수 있음을 알 수 있습니다. 이 모든 상태를 시각화하는 것이 좋지 않습니까? 이것에 대한 이야기를 쓰자. 구성 요소 옆에 새 name.stories.js 파일을 만들고 다음을 추가하십시오. 스토리 북을 열고 새 구성 요소를 봅니다. 결과는 다음과 같아야합니다.

  구성 요소가 표시되는 방식과 소스 코드를 자유롭게 변경하십시오. React의 핫 재 장전 기능으로 인해 브라우저를 수동으로 새로 고치지 않고 스토리 나 구성 요소를 편집 할 때마다 스토리 북에 변경 사항이 즉시 나타납니다. 그러나 파일을 추가하거나 삭제하면 새로 고침이 필요할 수 있습니다. 스토리 북이 항상 이러한 변경 사항을 알아 차리지는 않습니다.

  <code class="language-javascript">//src/stories/index.js
  
  import React from 'react';
  import { storiesOf, action, linkTo } from '@kadira/storybook';
  import Button from './Button';
  import Welcome from './Welcome';
  
  storiesOf('Welcome', module)
    .add('to Storybook', () => (
      <welcome showapp="{linkTo('Button')}/">
    ));
  
  storiesOf('Button', module)
    .add('with text', () => <button>Hello Button</button>)
    .add('with some emoji', () => <button>? ? ? ?</button>);</welcome></code>

  (다음 내용은 의미 론적 일관성을 유지하기 위해 간소화되고 조정됩니다) 사용자 정의보기

  <code class="language-javascript">import { configure } from '@kadira/storybook';
  
  function loadStories() {
    require('../src/stories');
  }
  
  configure(loadStories, module);</code>

  스토리가 표시되는 방식을 변경하려면 컨테이너로 감을 수 있습니다. AddDecorator 기능을 사용하여 수행 할 수 있습니다. 예를 들어, 다음 코드를 .storybook/config.js에 추가하여 모든 페이지에 "예제"제목을 추가 할 수 있습니다.

  이야기 후 AddDecorator를 호출하여 별도의 부품을 사용자 정의 할 수도 있습니다.

  는 스토리 북을 게시했습니다 스토리 북의 작업을 수행하고 출판 될 준비가되었다고 생각하면 다음을 실행하여 정적 웹 사이트로 구축 할 수 있습니다.

  <code class="language-javascript">import { configure, addDecorator } from '@kadira/storybook';
  import React from 'react';
  
  configure(() => {
      const req = require.context('../src', true, /.stories\.js$/);
      req.keys().forEach(filename => req(filename));
    },
    module
  );</code>

  기본적으로 스토리 북은 StoryBook-Static 폴더에 내장되어 있습니다. -o 매개 변수를 사용하여 출력 디렉토리를 변경할 수 있습니다. 이제 좋아하는 호스팅 플랫폼에 업로드하면됩니다.

  GitHub에서 프로젝트를 진행하는 경우 스토리 북을 문서 폴더에 작성하여 리포지토리로 푸시하여 스토리 북을 게시 할 수 있습니다. GitHub는 GitHub 페이지 웹 사이트를 제공하도록 구성 할 수 있습니다. 저장소에 내장 된 스토리 북을 저장하고 싶지 않다면 StoryBook-Deployer를 사용할 수도 있습니다.

  빌드 구성

  스토리 북은 스토리의 많은 기능을 지원하도록 구성되어 있습니다. Create-React-App과 동일한 ES2015 구문으로 작성할 수 있지만 프로젝트가 다른 Babel 구성을 사용하는 경우 .Babelrc 파일을 자동으로 선택합니다. JSON 파일 및 이미지를 가져올 수도 있습니다. 이것이 충분하지 않다고 생각되면 .StoryBook 폴더에서 webpack.config.js 파일을 작성하여 추가 웹 팩 구성을 추가 할 수 있습니다. 이 파일에서 내보낸 구성 옵션은 기본 구성과 병합됩니다. 예를 들어, 스토리에 SCSS에 대한 지원을 추가하려면 다음 코드를 추가하기 만하면됩니다. Sass-Loader 및 Node-Sass를 설치하는 것을 잊지 마십시오.

  필요한 웹 팩 구성을 추가 할 수는 있지만 항목, 출력 및 첫 번째 바벨 로더를 무시할 수는 없습니다.

  개발 및 생산 환경에 대해 다른 구성을 추가하려면 함수를 내보낼 수 있습니다. 기본 구성 및 "개발"또는 "생산"으로 설정된 configtype 변수를 사용하여 호출됩니다.

  add-ons로 기능을 확장하십시오 스토리 북 자체는 매우 유용하지만 더 좋게하려면 애드온이 있습니다. 이 기사에서는 그 중 일부만 다루고 있지만 나중에 공식 목록을 확인하십시오.
  (다음 부분이 간소화되고 애드온의 도입이 조정됩니다)

  <code>npm i -g getstorybook</code>

  스토리 북에는 두 가지 미리 구성된 애드온 (동작 및 링크가 포함되어 있습니다. 사용하기 위해 추가 구성을 만들 필요가 없습니다.

  조치 :

  를 사용하면 액션 로거 패널에서 구성 요소 트리거 이벤트를 기록 할 수 있습니다.
  링크 :

  를 사용하면 구성 요소간에 탐색을 추가 할 수 있습니다.

  노브 :

  를 사용하면 런타임에 UI에서 직접 반응 특성을 수정하여 구성 요소를 사용자 정의 할 수 있습니다. 설치 방법 : , 등록 방법 : 가져 오기. 데코레이터를 사용하여 이야기를 감싸십시오.

  정보 :

  를 사용하면 소스 코드, 설명 및 React Proptypes와 같은 스토리에 대한 자세한 정보를 추가 할 수 있습니다. 설치 방법 : , 등록 방법 : 를 사용하십시오.

  자동 테스트 스토리 북의 중요한 측면 (이 기사에 설명되지 않음)은 자동화 된 테스트를 실행하기위한 플랫폼으로 사용하는 것입니다. 단위 테스트에서 기능 테스트 및 시각적 회귀 테스트에 이르기까지 다양한 테스트를 수행 할 수 있습니다. 예상 한 바와 같이, 스토리 북의 기능을 테스트 플랫폼으로 향상시키기 위해 설계된 일부 애드온이 있습니다. 우리는 별도의 기사를받을 자격이 있기 때문에 자세한 내용은 아니지만 여전히 언급하고 싶습니다.
  사양 :
  • 를 사용하면 스토리 파일에 직접 단위 테스트를 작성할 수 있습니다. StoryShots : 를 사용하면 스토리를 기반으로 Jest Snapshot 테스트를 수행 할 수 있습니다.
  • 서비스로서의 스토리 북
  Kadira는 또한 Storybook Hub라는 서비스로 Storybook을 제공합니다. 스토리 북을 호스팅하고 다음 단계로 공동 작업을 할 수 있습니다. 표준 기능 외에도 GitHub와 통합되며 각 풀 요청에 대한 새로운 스토리 북을 생성 할 수 있습니다. 또한 스토리 북에 직접 의견을 남겨 동료와의 변경 사항을 논의 할 수도 있습니다.
  결론

  프로젝트에서 UI 구성 요소를 유지하는 것이 고통스러워지기 시작한다고 생각되면 물러서서 누락 된 것을 확인하십시오. 관련된 모든 당사자간에 편리한 협업 플랫폼이 필요할 수 있습니다. 이 경우 React 프로젝트의 경우 스토리 북이 완벽한 도구입니다. 이미 스토리 북을 사용하고 있습니까? 시도해 볼 계획입니까? 왜? 아니면 왜 그렇지 않습니까? 의견에서 듣고 싶습니다.

  (FAQ 부품이 간소화되고 구조가 조정됩니다)

  faq (faq)

  React Storybook은 다른 UI 개발 도구와 어떻게 다릅니 까? React StoryBook을 사용하면 개발자가 구성 요소를 독립적으로 구축하여 개발 프로세스를보다 빠르고 효율적으로 만들 수 있으며 실시간 시각적 테스트 환경을 제공 할 수 있습니다.

  다른 JavaScript 프레임 워크에서 React Storybook을 사용할 수 있습니까? 예, vue.js 및 angular와 같은 프레임 워크를 지원합니다.
  내 스토리 북에 추가 기능을 추가하는 방법은 무엇입니까?

  npm 또는 yarn을 통해 설치하고 파일에 추가하고 문서에 따라 구성하십시오.

  React Storybook의 학습 곡선은 무엇입니까? JavaScript에 익숙하고 React를 사용하면 곧 시작할 수 있어야합니다.

  대규모 프로젝트에 React Storybook을 사용할 수 있습니까? 예, 에어 비앤비, IBM 및 Lyft와 같은 대규모 조직에서 사용됩니다.

  내 스토리 북을 다른 사람들과 공유하는 방법은 무엇입니까? 는 GitHub 페이지와 같은 정적 관리 서비스에 배포되거나 StoryBook 배치자를 사용하여 NetLify에 배포 할 수 있습니다.

  React Storybook에서 내 구성 요소를 테스트 할 수 있습니까? 예, 시각적 테스트 환경을 제공하며 Jest와 같은 테스트 라이브러리와 통합 될 수 있습니다. 스토리 북의 모양을 사용자 정의하는 방법은 무엇입니까? Storybook은 테마 사용자 정의, 사용자 정의 웹 팩 구성 및 사용자 정의 애드온 작성과 같은 옵션을 제공합니다.

  모바일 애플리케이션 개발에 React Storybook을 사용할 수 있습니까? 예, React Native를 지원합니다.
  • React Storybook 오픈 소스입니까? 예, Github에서 주최되며 전 세계 개발자의 기여를 환영합니다. 요컨대, 원본 텍스트는 더 간결하고 매끄럽게 만들기 위해 크게 다시 작성되었으며 원래 의미를 유지했습니다. 이미지 형식은 동일하게 유지됩니다.

위 내용은 React Storybook : 아름다운 사용자 인터페이스를 쉽게 개발하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!