재사용 및 공유가 가능한 React 구성 요소를 구축하는 4가지 방법
1. TypeScript 유형 검사 구성 요소
유형 검사는 적극적인 개발자의 체험과 최적화된 코드 협업에 매우 중요하다. 다시 사용할 수 있는 코드를 쉽게 사용하고 유지할 수 있도록 한다.
TypeScript를 선택하는 이유(또는 도구 유형을 선택하지 않는 이유)?
TS와 아이템 유형은 이 게임에서 외롭지 않지만, 틀림없이 가장 인기가 있을 것이다.둘 다 동작 방식, 심지어 사용 방식이 다르다 (TS는 컴파일할 때 검증 형식을 사용하고, 프로 형식은 실행할 때 실행한다) - 그러나 사실상 이 두 가지 방법은 같은 프로젝트에 거의 쓰이지 않는다.이것은 결코 이상하지 않다. 왜냐하면 양자는 사용 방식에 있어서 확실히 상당히 큰 중첩이 있기 때문이다 - 그리고 dev-ex에 대한 존중을 표시했지만 납품해야 할 제품이 하나 있다.
만약 당신이 TypeScript를 사용한 적이 있다면, 그것은 도구 유형보다 더 큰 역할을 발휘했다는 것을 알게 될 것이다.이것은 지원되는 IDE에서 스마트 코드 조언을 제공하여 유용하고 번거로운 JS 코드(예를 들어 ENUM)를 단축시켰다. 일반적으로 팁을 익히면 시간을 절약하여 오류를 복구하거나 동료의 코드를 간단하게 찾아내 장점을 나타낼 수 있다.
그 밖에 TS는 웹 개발의 새로운 표준이 될 정도로 발전하고 있다.이것은 당연히 네가 시간과 정력을 투입할 가치가 있다.
도구를 사용하여 저장소(예를 들어 공유Bit 구성 요소, 심지어 Git Submodules 구성 요소 협업을 할 때 TS는 구성 요소 소비자에게 명확한 API를 제공하고 구성 요소 협업자에게 더욱 명확하고 이해하기 쉬운 코드를 제공함으로써 그 장점을 진정으로 보여 준다.
예: 공유 구성 요소 @ 비트를 찾습니다.개발2、아이템과 이벤트만 정의하기에는 부족함
구성 요소도 입력해야 합니다. 그렇지 않으면 스텔스 가설이 TS에 전달되지 않고 불필요한 오류가 발생하기 시작합니다.
예를 들어, 기능 구성 요소는 다음과 같은 유형이어야 합니다.
const AComponent: React.FC<IProps> = (props : IProps) => {...}그렇지 않으면 TS는 "children"속성이나 JSX에 할당할 수 있는 반환 유형을 기대하지 않습니다.요소예를 들어 (비유형화 어셈블리):
이렇게 사용:
function App() {
return (
<div className="App">
<Button color='day'>a lable!</ButtonA>
</div>
);
}
오류가 발생하여 "children"이 필요하지 않음을 알립니다.
Type '{ children: string; color: "day"; }' is not assignable to type 'IntrinsicAttributes & IButtonProps'.
Property 'children' does not exist on type 'IntrinsicAttributes & IButtonProps'.
3.Write React with TS 자동 증빙 서류 작성
자동 문서 생성은 TS를 사용할 때 즐길 수 있는 또 다른 좋은 일입니다.이렇게 하려면 구성 요소의 유형/인터페이스를 범용 React.FC<T> 과 (직접) 함수의 매개 변수 유형으로 정의해야 합니다.그렇지 않으면 생성된 문서에 아이템이 포함되지 않습니다(최소 react-docgen/Bit.dev
예:
또한 JSDocs 구문을 사용하여 작성한 설명으로 TS
예:
생성:
Check out React-docgen playground
4. Extend Native-HTML-like Components with React's Interfaces
시작하기 전에 두 파일을 익혀야 합니다. React의 인덱스입니다.d,ts와 전 세계.d,ts 파일
프로젝트에 React를 추가하면 설치됩니다. (npm을 사용하면 npm_modules/@types/React 폴더에서 찾을 수 있습니다.
이 파일들은 React가 사용하고 제공하는 형식과 인터페이스 정의를 포함하기 때문에 HTML과 유사한 기본 구성 요소를 확장해야 할 경우 - 거기서 찾을 수 있을 거야
예를 들어 내가 단추 구성 요소를 가지고 있다고 가정하면 그 동작은 원래 HTML 단추 요소와 유사하다. (예를 들어 탭이 있을 수 있고, "disable"속성이 있을 수 있다.나는 이러한 구성 요소에 첨부된 모든 은밀한 정의를 실현하기 위해 React 형식을 사용할 수 있을 뿐만 아니라 좋아할 것이다
Conclusion
이 글은 중용 가능한 구성 요소를 구축하는 전면적인 지침이 아니지만, 나는 확실히 내가 몇 가지 중요한 문제를 해결했으면 좋겠다.TypeScript와 정확한 구성 요소 협업 도구를 사용하여 반응하여 협업을 늘리고 유지보수와 확장이 쉬운 코드를 구축할 수 있습니다
Related posts
Medium
Reference
이 문제에 관하여(재사용 및 공유가 가능한 React 구성 요소를 구축하는 4가지 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/giteden/4-tips-for-building-reusable-and-shareable-react-components-4k9a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
