분류 Reactjs

2019년 리액트 개발자를 위한 22 가지 놀라운 도구 (2)

컨텐츠 정보

  • 조회 316 (작성일 )

본문

5. react-lifecycle-visualizer 


react-lifecycle-visualizer는 임의의 React 컴포넌트의 라이프 사이클 방법을 추적하고 시각화 하기 위한 npm 패키지입니다.


렌더링 한 이유와 마찬가지로 선택한 모든 구성 요소를 사용하여 수명 주기 시각화 도구를 가져올 수 있습니다.


import React from 'react'
import {
  Log,
  VisualizerProvider,
  traceLifecycle,
} from 'react-lifecycle-visualizer'

class TracedComponent extends React.Component {
  state = {
    loaded: false,
  }

  componentDidMount() {
    this.props.onMount()
  }

  render() {
    return <h2>Traced Component</h2>
  }
}

const EnhancedTracedComponent = traceLifecycle(TracedComponent)

const App = () => (
  <VisualizerProvider>
    <EnhancedTracedComponent />
    <Log />
  </VisualizerProvider>
)


아래와 같이 비주얼 라이저가 나타납니다.


react_lifecycle_visualizer 



그러나 이것의 단점은 현재 클래스 구성 요소에서만 작동하므로 후크는 아직 지원되지 않는다는 것입니다. (이것은 수명 주기에 관한 것이기 때문에 문제가 될 수 있습니까?)


6. 구피 


Guppy는 데스크톱에서 실행되는 React의 친숙한 무료 응용 프로그램 관리자이자 작업 관리자입니다. 그들은 새로운 반응을 보이는 사람들을 우선시하는 것 같습니다. 그러나 고급 개발자에게도 유용 할 수 있습니다.


새로운 프로젝트 생성, 작업 실행 및 종속성 관리와 같이 개발자가 정기적으로 반응하는 많은 일반적인 작업에 친숙한 그래픽 사용자 인터페이스를 제공합니다.


Windows 지원은 2018 년 8 월에 추가되었으므로 크로스 플랫폼임을 확신 할 수 있습니다.


붕어 모양은 다음과 같습니다.


guppy1 


7. react 테스트 라이브러리 


나는 단위 테스트를 작성할 때 느낌이 좋기 때문에 반응 테스트 라이브러리를 항상 좋아했습니다. 이 패키지는 우수한 테스트 관행을 장려하는 반응 DOM 테스트 유틸리티를 제공합니다.


이 솔루션은 구현 세부 사항을 테스트하는 문제를 해결하고 사용자가 보는 것처럼 반응 구성 요소의 입력 / 출력을 테스트합니다.


구현 세부 사항을 테스트하는 것은 앱이 예상대로 작동하도록 하는 효과적인 방법이 아닙니다. 물론, 구성 요소에 필요한 데이터를 얻는 방법, 사용할 정렬 방법 등에 대해 더 많은 확신을 가질 수 있지만 구현 방식을 변경하여 다른 데이터베이스를 가리키는 방식을 변경해야 하는 경우 단위 테스트는 결합 된 로직인 구현 세부 사항이므로 실패합니다.


react 테스트 라이브러리가 해결하는 문제는 이상적으로는 사용자 인터페이스가 작동하고 결국 올바르게 표시되기를 원하기 때문입니다. 해당 구성 요소에 데이터를 가져 오는 방법은 여전히 ​​예상되는 출력을 제공하는 한 중요하지 않습니다.


이 라이브러리를 사용하여 테스트를 수행하는 방법에 대한 예제 코드는 다음과 같습니다.


// Hoist helper functions (but not vars) to reuse between test cases
const renderComponent = ({ count }) =>
  render(
    <StateMock state={{ count }}>
      <StatefulCounter />
    </StateMock>,
  )

it('renders initial count', async () => {
  // Render new instance in every test to prevent leaking state
  const { getByText } = renderComponent({ count: 5 })

  await waitForElement(() => getByText(/clicked 5 times/i))
})

it('increments count', async () => {
  // Render new instance in every test to prevent leaking state
  const { getByText } = renderComponent({ count: 5 })

  fireEvent.click(getByText('+1'))
  await waitForElement(() => getByText(/clicked 6 times/i))
})


8. React 개발자 도구 


React 개발자 도구는 Chrome 및 Firefox 개발자 도구에서 React 구성 요소 계층 구조를 검사 할 수 있는 확장입니다.


이것은 이 목록에서 가장 일반적으로 알려진 것으로 개발자가 앱을 디버깅하는 데 사용할 수 있는 가장 유용한 도구 중 하나입니다.


9. 비트 


material-ui 또는 semantic-ui-react와 같은 컴포넌트 라이브러리를 사용하는 좋은 대안은 Bit입니다. 

이를 통해 수천 개의 공개 소스 구성 요소를 탐색하고 이를 사용하여 프로젝트를 빌드할 수 있습니다.


bit 


탭, 버튼, 차트, 테이블, navbar, 드롭 다운, 로딩 스피너, 날짜 선택기, 빵 부스러기, 아이콘, 레이아웃 등을 포함하여 누구나 사용할 수 있는 반응 구성 요소가 너무 많습니다. 이들은 다른 react 개발자가 업로드 한 것입니다. 


그러나 날짜 간 거리 서식과 같은 유용한 유틸리티도 있습니다.


10. 스토리 북 


스토리 북에 대해 아직 모른다면 UI 구성 요소를 보다 쉽게 ​​구축 할 수 있도록 하려면 스토리 북을 사용하는 것이 좋습니다. 이 도구는 반응 형 구성 요소를 실시간으로 독립적으로 개발할 수 있는 핫 리로딩을 지원하는 라이브 개발 서버를 시작합니다.


이것에 대한 또 다른 좋은 점은 오픈 소스 인 현재의 기존 애드온을 사용하여 개발 경험을 완전히 새로운 수준으로 끌어 올릴 수 있다는 것입니다. 예를 들어, storybook-readme 패키지를 사용하면 readme 문서를 작성하는 동시에 동일한 페이지에서 프로덕션용 반응 구성 요소를 개발할 수 있습니다. 이것은 일반적인 문서 페이지 역할을 하기에 충분합니다 :


storybook1 


11. React Sight 


순서도에서 앱이 어떻게 보이는지 궁금한 적이 있습니까? 글쎄, react-sight를 사용하면 전체 앱의 라이브 구성 요소 계층 트리를 제시하여 반응 앱을 시각화 할 수 있습니다. 또한 반응 라우터, redux 및 반응 섬유를 지원합니다.


이 도구를 사용하면 트리에서 해당 노드와 직접 관련된 구성 요소에 대한 링크 인 노드 위로 마우스를 가져갑니다.


결과를 보는 데 문제가 있는 경우 주소 표시 줄에 chrome : extensions를 입력하고 반응 표시 상자를 찾은 다음 아래와 같이 파일 URL에 대한 액세스 허용 스위치를 클릭하십시오.


react-sight1