react ui interactions

반응에 대한 UI 영감

UI 상호 작용에 반응합니다

소규모 반응 프로젝트 세트에 포장 된 UI 개념 모음. 뒤에 아이디어는 최신 커뮤니티 관행을 활용하여 실제 프로젝트에 유용한 패턴을 제공하는 것입니다. 특정 UI 요소를 제시하면 애니메이션 및 전환, 마이크로 개입, 응답 성, 탐색, 데이터 페치, 상태 조작과 같은 기본 및 고급 솔루션을 배웁니다.

동기 부여

웹 응용 프로그램을 구축하려면 많은 UI 문제를 해결해야합니다. 프론트 큘러 케이스를 해결하는 데 도움이되는 수많은 라이브러리가 있지만 종종 자신의 솔루션을 생각해 낼 수 있습니다. 이 경우이 저장소를 사용하면 사용자 인터페이스에서 작업하는 동안 일반적인 과제에 대한 유용한 패턴을 발견 할 수 있습니다. 알다시피 프로젝트는 React로 작성되었습니다. 나는 그것을 사용하는 것이 편안하다고 느낍니다. 그러나 여기에 제시된 솔루션은 다른 구성 요소 기반 프레임 워크에서 성공적으로 사용될 수 있다고 생각합니다.

원리

• Direct- 삭제하고 한 장소에서 다른 장소로 이동하기 쉬운 명시적이고 공동 위치 된 코드를 수용합니다. 이것은 변화가 결국 일어날 일이기 때문에 변화에 대한 최적화입니다. 이 코드는 직접적이고 구체적이며 귀하의 요구에 쉽게 복사하고 적응할 수 있습니다.
• ? 단순 - 유연성을 달성하는 유일한 방법은 가능한 한 간단하고 쉽게 바꾸는 것입니다. "더 나쁘다"는 상승에 이어

  구현 및 인터페이스에서 디자인은 간단해야합니다. 인터페이스가 구현보다 간단한 것이 더 중요합니다.

• ? 클래스 없음 - 기능 구성 요소 만.
• ❣️ 후크 - 후크를 완전히 사용합니다 (반응 16.7.0- 알파로 사용 가능).
• ? 코드 분할 - import() 와 함께 React.lazy 사용하고 웹 팩이 작업을 수행하도록합니다.
• ⏱️ 서스펜스 - 코드 분할을 위해 서스펜스를 반응합니다.
• ? CSS-in-JS- 모양과 느낌을위한 스타일 구성 요소를 기반으로합니다.
• ? 기본값 홍보 - 가능한 한 적은 구성. 가능한 한 기본값을 사용합니다.

사용 방법

• 필요한 것을 복사하여 붙여 넣으십시오.
• 영감을 받으십시오. 좋아하는 UI 솔루션을 찾고 환경에 적응하십시오.

의존성

일부 낮은 수준의 작업은 여전히 더 중요한 측면에 집중할 수 있도록 라이브러리가 필요하다는 점에 유의해야합니다. 이 프로젝트의 모든 의존성은 앞에서 언급 한 원칙을 고려하여 매우 신중하게 선택되었습니다.

• Reach Router . 더 이상 아무것도.
• Styled Components JS의 CSS를 훌륭한 문서화로 간단하게 CSS로 만듭니다. emotion 없는 이유는 무엇입니까? 모르겠습니다. 내가 알아야 할 이유가 있다면 알려주세요!
• 현대 UI가 종종 의미있는 애니메이션을 기반으로 구축되므로 React Spring 사용을 장려하는 모든 것이 훌륭합니다. 최근 라이브러리는 더 나은 성능을 위해 DOM과 직접 재생되는 멋진 후크 API를 제공합니다.

합법적인

MIT 라이센스 Copyright © 2019-Present, Mike Skowronek