분류 Reactjs

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

컨텐츠 정보

  • 조회 314 (작성일 )

본문

12. react-cosmos 


react-cosmos는 재사용 가능한 반응 구성 요소를 작성하기 위한 개발 도구입니다.


프로젝트에서 구성 요소를 검색하고 다음을 수행 할 수 있습니다.

  1. props, 문맥 및 state의 조합으로 구성 요소 렌더링
  2. 모든 외부 의존성을 조롱하십시오 (예 : API 응답, localStorage 등)
  3. 실행 중인 인스턴스와 상호 작용하면서 앱 상태가 실시간으로 진화하는 것을 확인하십시오

13. CodeSandbox 


이것은 눈 깜박임 속도보다 빠른 반응으로 손을 더럽히는 데 사용할 수 있는 최고의 도구 중 하나입니다 (Ok, 그렇게 빠르지 않을 수도 있습니다).


CodeSandbox라는 이 도구는 웹 사이트에서 프로토 타입에서 배포에 이르기까지 웹 응용 프로그램을 만들 수 있는 온라인 편집기입니다!


코드 및 박스는 원래 초기 단계에서만 React 만 지원했지만 이제 Vue 및 Angular와 같은 라이브러리를 위한 추가 시작 템플릿으로 확장되었습니다. 또한 gatsby 또는 nextjs와 같은 일반적인 정적 사이트 생성기를 사용하여 프로젝트를 생성하여 다음 반응 웹 프로젝트 킥 스타트를 지원합니다.


codesandbox와 관련하여 이야기해야 할 많은 것들이 있습니다. 하나, 그것은 매우 활동적입니다.


사람들이 편리하게 구축하고 있는 일부 프로젝트를 탐색해야 하는 경우 탐색을 클릭하여 다음 프로젝트를 개선하는 데 도움이 되는 많은 코드 예제에 쉽게 액세스 할 수 있습니다.


codesandbox1 


프로젝트 내부에서 편집을 시작하면 사용하려는 것이 실제로 VSCode 편집기라는 사실을 깨닫게 됩니다.


오늘 codesandbox에서 할 수 있는 모든 기능에 대한 전체 기사를 작성하고 싶지만 이미 작업이 완료된 것 같습니다.


14. React 비트 


React 비트는 다양한 디자인 패턴 및 기술, 안티 패턴, 스타일링, UX 변형 및 기타 유용한 반응 관련 자료에 빠르게 액세스 할 수 있는 온라인 문서와 같은 형식으로 작성된 반응 패턴, 기법, 팁 및 요령 모음입니다.


그들은 현재 9,923 개의 별에 GitHub 저장소를 가지고 있습니다.


일부 예제에는 props 프록싱, 다양한 시나리오에서 다양한 UX를 처리하기 위한 구성, 모든 반응 개발자가 알아야 할 문제가 있습니다.


왼쪽의 사이드 메뉴에서 볼 수 있듯이 정보가 많이 있습니다. :)


react-bits1 


15. 폴더화 


Folderize는 7일 전에 릴리스 된 VSCode 확장입니다. 구성 요소 파일을 구성 요소 폴더 구조로 전환 할 수 있습니다. 반응 구성 요소는 여전히 구성 요소가되며 이제 디렉토리로 변환됩니다.


예를 들어 메타 파일과 같은 유용한 정보를 표시하기 위해 파일을 소품으로 사용하는 반응 구성 요소를 생성한다고 가정 해 보겠습니다. 메타 데이터 구성 요소의 논리는 많은 행을 차지하므로 이를 별도의 파일로 분할하기로 결정했습니다. 그러나 그렇게 하기로 결정하면 이제 서로 관련된 두 개의 파일이 있습니다.


따라서 다음과 같은 디렉토리가 있다면 :


folderize1 


FileView.js 및 FileMetadata.js를 Apple과 마찬가지로 디렉토리 구조로 추상화 할 수 있습니다. 특히 FileScanner.js와 같은 파일과 관련된 구성 요소를 추가하려는 경우에는 더욱 그렇습니다. 이것이 폴더 화가 당신을 위해 다음과 비슷한 구조로 나올 수 있도록 하는 것입니다.


folderize2 


import React from 'react'
import FileView from './src/components/FileView'

const App = (props) => <FileView {...props} />

export default App