2020년 웹 개발자를 위한 18가지 React 컴포넌트

불과 몇 년 만에 React.js와 같은 방식으로 라이브러리가 발전하는 것을 보는 것은 매우 드뭅니다. 라이브러리는 새로운 릴리스, 기능 및 개발과 관련하여 문자 그대로 광속의 속도로 가속화되었습니다. 최신 주요 릴리스는 여기를 참조하십시오. 물론 일부는 "프레임워크"가 필요하지 않다고 주장하지만 React는 단순한 프레임워크 그 이상이거나 "훨씬 적음"이라고 해야 합니다. 왜요? React는 반응형 구성 요소를 빌드하는 데 도움이 되는 라이브러리이기 때문입니다. 반드시 프레임워크로 작동하지는 않지만 Meteor 또는 Angular와 같이 사용 중인 기존 프레임워크 위에서 행복하게 작동합니다.

React의 상황은 현재 상당히 좋아 보입니다. 커뮤니티는 새로운 가능성에 대해 윙윙 거리고 있으며 일반적으로 모든 사람들이 불평하기보다는 구축하기에 바쁩니다. 도서관은 분명히 효과가 있으며 엄청난 잠재력을 가지고 있습니다. 지금 필요한 것은 군중에서 확실히 눈에 띄는 것을 구축할 수 있는 경험 많은 엔지니어와 개발자입니다. React에 대해 "욕설"하는 것을 좋아하는 개발자가 많이 있습니다. 그러나 세상에서 어떤 종류의 변화를 만드는 데 바쁘지 않은 사람들.

반응에 대해 더 알아보기

React는 구성 요소를 기반으로 하며 구성 요소를 재사용할 수 있습니다! 즉, 누구나 React로 멋진 것을 만들고 나머지 개발자 커뮤니티와 공유할 수 있습니다. 특히 최근 몇 년 동안 그것이 정확히 일어나고 있습니다. 축하하기 위해 우리는 기존 애플리케이션, 웹사이트 또는 출시하려는 기타 소프트웨어에 통합할 수 있는 유용하고 다재다능하며 기능적인 React 구성 요소로 구성될 자체 React 구성 요소 리소스를 구성할 때라고 느꼈습니다. 가까운 미래에. 우리는 또한 가능한 한 독특하려고 노력했고 가능한 한 많은 변형을 포함했습니다. 하지만 오류가 발생하므로 최고의 React 구성 요소를 만드는 데 참여하고 없이는 상상할 수 없는 가장 좋아하는 구성 요소를 공유해 주세요. 감사합니다!

머티리얼 UI

첫 번째 구성 요소에서 원하는 기능을 찾지 못한 경우를 대비하여 Google의 Material 디자인을 React 구성 요소 워크플로에 완전히 통합하는 Material-UI 라이브러리가 있습니다. 라이브러리 소유자는 이 프레임워크 및 구성 요소의 사용에 대해 개방적이며 이 진흙탕 속으로 알몸으로 뛰어들기 전에 머티리얼 디자인의 문서를 읽을 것을 권장합니다. 웹 개발 영역에서 React와 Material 디자인의 역할에 대한 이해는 그것이 당신을 위해 작동하도록 하는 데 필수적입니다.

React용 온천 UI

Onsen UI는 하이브리드 모바일 애플리케이션을 구현하기 위해 작동하는 React 구성 요소 키트입니다. 그것이 최근에 처리되어 온 것이라면 Onsen UI로 시간을 절약하는 것이 좋습니다. 이 도구는 사용자의 편의를 위해 Android 및 iOS와 모두 호환됩니다. 100개 이상의 구성 요소를 마음대로 사용할 수 있으므로 프로젝트에 적합한 조합을 찾을 수 있습니다. 모두 Material 및 Flat 디자인을 기반으로 합니다. 또한 모든 것이 사용자를 염두에 두고 이루어지며 가능한 한 이해하기 쉽도록 노력합니다.

반응 부트스트랩

React-Bootstrap은 React로 빌드된 Bootstrap 4 구성 요소의 패키지입니다. 사용 가능한 자료를 사용하여 처음부터 새 프로젝트를 빌드할 수 있지만 기존 앱에 통합할 수도 있습니다. 물론 키트와 함께 제공되는 포괄적인 문서를 먼저 조사하고 거기에서 이동해야 합니다. React-Bootstrap을 사용하여 Bootstrap에서 Bootstrap 4로 이동하는 옵션도 있지만, 다시 한 번 자신에게 호의를 베풀고 문서를 먼저 읽으십시오. 그러면 실행이 더 완벽할 것입니다. 로컬 설정의 경우 Yarn은 트릭을 수행할 패키지 관리자입니다. 마지막으로, 프로젝트에 기여하고 싶다면 당신도 할 수 있습니다.

반응 도구 상자

React Toolbox는 프로젝트를 즉시 시작할 수 있도록 약속하는 Material Design 구성 요소 키트입니다. 결국, 당신은 혼자서 모든 힘든 일을 할 필요가 없습니다. 대신, React Toolbox에 저장되어 있는 바로 사용할 수 있는 도구를 선택하고 즉각적인 차이를 만드십시오. 구성 요소에 대해 말하면 React Toolbox는 앱 바, 아바타, 자동 완성, 드롭다운, 대화 상자, 메뉴, 진행률 표시줄, 입력 및 힙을 더 많이 제공합니다. 이 React 구성 요소 라이브러리는 개발자에게 도움이 될 것이며 이는 보증입니다. 자세한 설명서는 각 구성 요소를 올바르게 사용하는 방법을 보여주기 때문에 매우 편리하게 제공됩니다.

그로밋

모바일 우선 프로젝트의 성공적인 출시를 향해 나아가는 지금 그로밋의 놀라운 기능을 즐기십시오. 여러 앱에서 작업하는 경우에도 이것은 마술을 수행하여 작업 흐름을 지붕 전체에 향상시키는 React 구성 요소 라이브러리입니다. 물론 모든 것이 반응성을 염두에 두고 만들어졌기 때문에 최종 성능은 최상급이 될 것입니다. 미리 정의된 모든 요소를 ​​원하는 대로 자유롭게 믹스 앤 매치하고 그에 따라 사용자 정의할 수 있습니다. 새로운 프로젝트에서 작업하든 기존 프로젝트를 개선하든 그로멧은 두 접근 방식 모두에 적용할 수 있습니다. 최대한 활용할 수 있는 블록이 많이 있으므로 지금 최대한 활용하십시오.

시맨틱 UI 반응

이름에서 알 수 있듯이 Semantic UI React는 Semantic UI를 위한 공식 React 통합입니다. 설치 지침 및 사용법에 대해 자세히 알아야 하는 경우 먼저 공식 제품 랜딩 페이지의 모든 섹션을 살펴보고 요점을 파악하십시오. Semantic UI React의 일부 기능에는 하위 구성 요소, 자동 제어 상태, 속기 소품, 기능 보강 및 선언적 API 등이 포함됩니다. 요소에 관해서도 많은 것을 얻습니다. 버튼, 플래그 및 헤더에서 입력, 레이블, 로더 및 표시에 이르기까지 이것들은 손에 넣을 수 있는 모든 기능의 일부일 뿐입니다.

반응 데스크탑 | OS X El Capitan 및 Windows 10용 React UI 구성 요소

React의 달콤한 액션을 데스크탑으로 가져오고 싶습니까? 이제 할 수 있습니다! 라이브러리가 BETA 프로젝트로 지정되어 있지만 더 많은 개발자가 Windows 10 및 Mac OS X 플랫폼에 가장 적합하도록 라이브러리를 생각하고 조정하는 데 귀중한 시간을 투자한다면 도움이 될 것입니다. 이들 모두의 가장 유망한 기능은 데스크톱 컴퓨터가 혜택을 받을 수 있는 자신의 프로젝트를 소집하기 위해 JavaScript를 사용할 수 있다는 점을 설명할 필요도 없습니다. 이 공간의 발전을 지켜보는 것도 흥미로울 것입니다. 기술이 기본적인 소프트웨어 제한 프로그래밍 언어를 넘어 발전하고 있다는 사실을 알게 되어 기쁩니다. 대신 웹을 데스크탑으로 가져오는 방법을 배우고 있습니다.

Griddle – 그리드 구성 요소에 반응

Griddle은 고성능 및 브라우저 간의 원활한 상호 작용에서 작동하는 그리드 최적화 데이터 테이블의 기능입니다. Griddle을 처음 탐색했을 때 다른 그리드 테이블 프로젝트처럼 보였습니다. 그러나 자세히 조사하고 이해하면 Griddle이 다른 그리드 테이블 라이브러리보다 성능이 훨씬 우수한 것으로 보입니다. 웹 개발자의 워크플로에 가져오는 것으로 알려진 고품질 구성 요소를 실제로 제공합니다. 데모를 플레이하고 데이터를 탐색하고 검색 매개변수를 조정할 때 상호 작용이 얼마나 부드러운지 직접 확인하십시오.

반응 절대 그리드

그리드는 종종 기능이 무엇인지 혼동될 수 있습니다. 고유한 스타일과 브라우저 값이 있는 웹 페이지 내의 특정 요소입니다. 외부 라이브러리를 사용하여 이러한 구성 요소와 요소를 훨씬 더 유연하게 만들 수 있습니다. 특히 Absolute Grid와 같은 라이브러리를 구현하고 사용자에게 제공하는 요소 그리드를 완전히 제어할 수 있습니다. 여기에서 보고 있는 구성 요소는 콘텐츠를 공유하고 데이터베이스 값을 기반으로 구성하는 웹 사이트/플랫폼에서 사용하도록 쉽게 구성할 수 있습니다. 매우 다재다능한 라이브러리, 진정한 개발 가능성의 예.

반응 그라바타

Gravatar에 대해 들어본 적이 없다면 최근 2일 동안만 접속했을 것입니다. 하! Gravatar는 WordPress 플랫폼에 통합된 기본 사용자 아바타 플랫폼입니다. 이제 React Gravatar 구성 요소 라이브러리를 사용하여 모든 놀라운 아바타를 고급 프로젝트에 가져올 수 있습니다. 이를 통해 구성 요소는 이메일 주소 입력을 기반으로 사용자가 사용하는 Gravatar 아바타를 렌더링합니다. 수동으로 수행하는 대신 사용자 데이터를 가져오는 세계화 측면을 추진하기 위해 이러한 라이브러리를 편리하게 사용하는 데 정말 도움이 됩니다.

반응 스피너

액세스하려는 페이지가 아직 로드 중임을 사용자에게 알리고 싶으십니까? 페이지 점프 프로세스를 보다 대화식으로 만들기 위해 애플리케이션에 스피너를 추가하고 싶습니까? 자신의 스피너를 코딩해야 하는 시간을 절약하세요. 이 사용하기 쉬운 구성 요소를 구현하기만 하면 됩니다. 말 그대로 구성이 필요하지 않습니다.

React Stripe 체크아웃 구성 요소

Stripe은 계속해서 모든 사람에게 깊은 인상을 남깁니다. 고객, 디자이너, 개발자 및 기술 커뮤니티 전반에 걸쳐. 거대 스타트업이 일하는 방식과 스타트업이 어떻게 세상을 바꿀 수 있는지를 재정의한 스타트업, 비록 그들이 구글의 시가 총액만큼의 자원을 갖고 있지 않더라도 말이다. Stripe의 체크아웃은 수백만 개의 플랫폼에서 사용되고 있으며 매일 수십억 건의 요청을 전달하고 있습니다. React 프로젝트에서 Stripe를 사용할 계획이라면 React Stripe Checkout 구성 요소를 가져와 Stripe의 Checkout 라이브러리를 React 구성 요소로 직접 로드합니다. 이것은 앱에서 Stripe를 사용하기 위한 훨씬 더 부드러운 전환이 될 것입니다.

반응-Crouton

React.js용 메시징 구성 요소 — React Crouton. 이것이 인스턴트 메시징 구성 요소라고 생각하더라도 혼동하지 마십시오. 이것은 탐색 강조 표시 메뉴의 형태로 강조 표시 옵션을 제공하는 것을 목표로 하는 메시징 구성 요소에 가깝습니다. 구성 요소를 사용하면 요청된 양식 제출을 기반으로 페이지 상단에서 사용자에게 표시될 메시지를 작성할 수 있습니다. 우리는 이미 이메일 마케팅 담당자가 이 매끄럽고 완벽한 라이브러리에 열광할 것이라고 예상할 수 있습니다.

ReactJS용 SVG 로더 구성 요소

SVG는 더 많은 집중과 관심으로 성능이 높은 보상을 받는 웹 개발 시대로 전환함에 따라 의심할 여지 없이 인기가 높아지고 있습니다. React InlineSVG 라이브러리를 사용하면 React.js를 통해 SVG 파일을 직접 로드할 수 있습니다. 이렇게 하면 동일한 문서 간에 전환하지 않고도 편집하고 스타일을 지정할 수 있습니다.

반응 탭 구성 요소

탭 콘텐츠가 필요한 모든 상황에서 구현할 수 있는 React 탭 구성 요소. 탭 콘텐츠를 사용하여 데이터를 보다 편리하게 제공하는 것으로 유명한 지식 기반과 같은 플랫폼에서 React가 어떻게 유용해지는지 지켜보는 것은 흥미로울 것입니다. 전반적으로 콘텐츠에 대한 탭 상호 작용을 몇 초 만에 추가하는 매우 안정적인 라이브러리입니다.

드래그 가능 반응

우리가 이야기한 처음 몇 개의 드래그 가능한 구성 요소가 마음에 들지 않고 더 원시적이고 독특한 것을 찾고 있다면 React Draggable을 사용해 보십시오. 이것은 가능한 한 기본입니다. 드래그 가능한 기능을 통해 콘텐츠를 노출하고 콘텐츠가 사용자에게 표시되는 방식을 사용자에게 맡길 수 있는 무언가를 만드십시오. 현재 데모에는 고정된 끌기 기능이 표시되지 않습니다. 그러나 약간의 React 마법을 사용하면 해당 기능에 다소 빨리 도달해야 합니다.

React.js용 Google reCAPTCHA

스팸 발송자들은 자신이 점점 더 똑똑해지고 있다고 생각하지만 Google의 reCAPTCHA는 현대 보안 문자 시스템과 이 시스템을 깨려는 봇의 문제를 실제로 극복했습니다. reCAPTCHA는 스팸 발송자로부터 제출 양식 데이터를 보호하기 위한 신뢰할 수 있는 대안입니다. reCAPTCHA 계정을 만들고 API 키를 가져와야 합니다. 그렇게 하면 이 구성 요소의 잠재력을 최대한 활용할 수 있습니다.

Elasticsearch용 UI 구성요소

Searchkit은 인기 있는 Elasticsearch의 UI 구성 요소 모음입니다. 이제 검색 경험을 혁신하고 현대적으로 만들 수 있습니다. 영화 사이트를 구축하는 것이 당신의 일이라면 Searchkit은 간결한 검색 기능에 필요한 모든 어려운 알고리즘 기능을 처리하고 사용자가 매일 다시 방문하도록 하는 일종의 검색 플랫폼을 제공할 것입니다. 때로는 모든 프로젝트의 가장 중요한 기능이 검색 기능입니다. 이것이 사용자가 콘텐츠와 상호작용하는 방식입니다.