분류 Reactjs

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

컨텐츠 정보

  • 조회 374 (작성일 )

본문

React는 놀라운 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 

그러나 모든 사람이 동일한 도구를 사용하거나 React 개발 경험을 더 재미 있고 능동적으로 만드는 데 도움이 되는 훌륭한 도구를 모두 알고 있는 것은 아닙니다.


아직 react를 사용하지 않았거나 사용에 관심이 있는 친구가 있다면, 왜 라이브러리를 사용해야 하는지 물어볼 때 어떻게 말합니까? 그들에게 라이브러리가 얼마나 큰 지를 말해주는 것 외에도 (첫 번째로 해야 함), 오픈 소스 커뮤니티가 만든 도구가 이 경험을 완전히 새로운 수준으로 끌어 올릴 수 있다고 언급하고 싶습니다.


2019 년 반응 앱을 빌드하는 데 사용할 수있는 22 가지 도구는 다음과 같습니다 (이 목록은 중요하지 않음).


https://dev.to/jsmanifest/22-miraculous-tools-for-react-developers-in-2019-4i46 


1. 웹팩 번들 분석기 


앱의 어떤 패키지 또는 부분이 모든 공간을 차지하는지 궁금한 적이 있습니까?  웹팩 번들 분석기를 사용하고 있는지 확인할 수 있습니다. 이 패키지는 가장 많은 공간을 차지하는 출력 파일을 식별하는 데 도움이됩니다.


라이브 서버를 작성하고 번들 컨텐츠의 대화식 트리 맵 시각화를 제공합니다. 이를 툴킷에서 사용하면 제시된 파일의 위치, gzip 크기, 구문 분석 된 크기 및 해당 부모 / 자녀를 확인할 수 있습니다.


혜택? 글쎄, 당신은 당신이 보는 것에 따라 react 앱을 최적화 할 수 있습니다!


다음은 이러한 모습의 스크린 샷입니다.


webpack_bundle_analyzer1 


pdf 패키지가 앱에서 가장 많은 공간을 차지함을 분명히 알 수 있습니다. 그러나 화면에서 가장 많은 공간을 차지합니다. 매우 유용합니다.


그러나 스크린 샷은 매우 작습니다. 또한 유용한 옵션을 전달하여 generateStatsFile : true와 같은 세부 사항을 자세히 볼 수 있으며 나중에 사용할 수 있도록 개발 환경 외부에 저장할 수 있는 정적 HTML 파일을 생성하도록 선택할 수도 있습니다.


2. react 프로토 


react-proto는 개발자와 디자이너를 위한 프로토 타입 도구입니다. 데스크톱 소프트웨어이므로 사용하기 전에 소프트웨어를 다운로드하여 설치 해야 합니다.


사용 중인 이 소프트웨어의 예는 다음과 같습니다.


react_proto_1 


이 응용 프로그램을 사용하면 props과 해당 유형을 선언하고, 구성 요소를 트리에서 보고, 배경 이미지를 가져오고, 상태 저장 또는 상태 비 저장으로 정의하고, 부모 구성 요소가 누구인지, 확대 / 축소하고, 프로토 타입을 새로운 또는 기존으로 내보낼 수 있습니다.


그러나 이 앱은 Mac 사용자에게 더 적합하게 보이지만 Windows 사용자에게는 여전히 잘 작동합니다.


사용자 인터페이스 매핑을 완료 한 후 기존 프로젝트 또는 새 프로젝트로 내보내도록 선택할 수 있습니다. 기존 프로젝트로 내보내기를 선택하고 루트 디렉토리를 선택하면 다음과 같이 ./src/components로 내보내집니다.


react_proto_2 


그리고 여기 예제에서 우리가 가진 컴포넌트 중 하나의 예가 있습니다 :


react_proto_3 


react 프로토는 GitHub에서 2,000 개 이상의 별을 획득했습니다. 개인적으로 이 응용 프로그램에는 업데이트가 필요하고 특히 react 고리가 릴리스 될 때 더 많은 작업이 필요하다고 생각합니다. 배경 이미지가 보이지 않으면 축소되지 않습니다. 즉, 배경 이미지를 가져 와서 축소 한 다음 배경 이미지를 삭제하면 단추가 회색으로 표시되어 다시 확대 할 수 없습니다. 다시 확대하는 유일한 방법은 배경 이미지를 다시 가져온 다음 다시 확대 한 후 제거하는 것입니다.이 결함으로 인해 이 앱에 대한 내 견해가 바뀌었지만 오픈 소스가 보이지 않기 때문에 이 목록으로 표시됩니다. 다른 곳. 그리고 오픈 소스가 되는 것이 이 앱의 좋은 점으로 향후 트렌드 오픈 소스 리포지토리 목록을 만들 수 있습니다 (그들의 기능은 중요하지만 인력이 부족한 것 같습니다).


3. why-did-you-update 


원숭이 패치를 why-did-you-update 다시 렌더링 할 수 없는지 알려주십시오. 이는 프로젝트의 성능 수정을 안내 할 뿐만 아니라 작업 반응 방식을 이해하는 데 매우 유용합니다. react의 작동 방식에 대해 더 잘 이해하면 개발자의 react이 향상됩니다.


값이 true 인 추가 정적 속성 whyDidYouRender를 선언하여 사용자 정의 컴포넌트에 리스너를 첨부 할 수 있습니다.


import React from 'react'
import Button from '@material-ui/core/Button'

const Child = (props) => <div {...props} />

const Child2 = ({ children, ...props }) => (
  <div {...props}>
    {children} <Child />
  </div>
)

Child2.whyDidYouRender = true

const App = () => {
  const [state, setState] = React.useState({})

  return (
    <div>
      <Child>{JSON.stringify(state, null, 2)}</Child>
      <div>
        <Button type="button" onClick={() => setState({ hello: 'hi' })}>
          Submit
        </Button>
      </div>
      <Child2>Child #2</Child2>
    </div>
  )
}

export default App

그렇게 한 후에만 ​​콘솔이 매우 성가신 경고로 폭발 할 것입니다.


why_did_you_render1 


그러나 잘못 받아들이지 마십시오. 좋은 것으로 받아들이십시오. 이러한 성가신 메시지를 활용하여 낭비적인 렌더링을 고칠 수 있으며, 성가신 메시지는 결국 당신을 내버려 둘 것입니다!


4. create-react-app 


create-react-app가 반react 프로젝트 개발을 시작하는 가장 빠른 방법이라는 것을 모두 알고 있습니다 (현대 기능이 기본 제공). npx create-react-app <name>보다 더 쉬운 방법은 무엇입니까?


dev.to와 함께 매체에 대한 모든 자습서는 단순히 빠르고 간단하기 때문에 create-react-app로 반응 인터페이스를 작성합니다.


우리 중 일부는 CRA를 사용하여 타이프 스크립트 프로젝트를 만드는 방법을 모르고 있습니다. 마지막에 --typescript를 추가하기 만하면 됩니다.


npx create-react-app <name> --typescript


이렇게 하면 CRA 프로젝트에 수동으로 타이프 스크립트를 추가하지 않아도 됩니다.