20+ Knihovny komponent / rozhraní s nejlepší reakcí UI pro rok 2020

Nejlepší složky / knihovny komponent uživatelského rozhraní s nejlepší reakcí


V tomto zdroji se díváme na nejlepší knihovny a rámce komponent React UI dostupné na webu. Ale nejdřív:

Co je React?

React je knihovna s otevřeným zdrojovým kódem JavaScript, která vám pomůže vytvořit špičkové rozhraní pro web i mobilní aplikace. Kombinuje se pohodlně s jinými kostry a knihovnami JavaScriptu a obsahuje malé, samostatné kousky kódu nazývané komponenty. Jsou to tyto komponenty, které budou v centru pozornosti tohoto zdroje.

Pěkná věc na komponentách je, že jsou modulární bez závislosti na konkrétních aplikacích. To znamená, že budete moci komponenty znovu použít k vytváření úžasných aplikací a rozhraní super rychle. A díky Bit, můžete je sdílet také s dalšími nadšenci React.

Než začnete svůj další projekt s Reactem, věnujte několik minut prohledání tohoto seznamu nejlepších knihoven komponent React UI, které vám mohou pomoci vytvořit úžasně vypadající UI.

Knihovny komponent a rámce s nejlepší reakcí uživatelského rozhraní v roce 2020

Material Kit React

Knihovny součástí uživatelského rozhraní React: Material Kit React

Materiál Kit React byl vytvořen inspirací z materiálového designu společnosti Google a vytváří sadu prvků, které jako hlavní rys uvádějí konzistenci. Tímto způsobem si váš webový projekt zachovává podobnost vzhledu a funkcí po celou dobu.

Obecné rozvržení připomíná několik listů papíru. To propůjčuje rozvržení hloubku a pořádek. Zahrnuty jsou tři vzorové stránky. Tyto stránky nejenže znázorní, co je s touto sadou možné, ale také slouží jako šablony, kde můžete nahradit text a obrázky vlastními..

Sada obsahuje také řadu základních prvků, jako jsou tlačítka, odznaky, posuvníky, nabídka, stránkování, navigační lišty, karty a pilulky. Budete moci přizpůsobit styl, velikost a barvu většiny prvků. Prvky JavaScriptu zahrnují Modály, popisy, nástroj pro výběr data, karusely a popovery. Kromě použití sady pro zahájení nového projektu můžete také změnit jakýkoli starý projekt Bootstrap. Material Kit React Pro verze obsahuje mnohem více komponent, sekcí a vzorových stránek.

Ant Design pro React

Ant Design pro React

Tato knihovna React UI je systém designu pro produkty na podnikové úrovni. Je to založeno na Mravenec Design projekt a obsahuje sadu vysoce kvalitních komponent a ukázek pro vytváření bohatých interaktivních uživatelských rozhraní. Součástí komponent je podpora internacionalizace desítek jazyků.

Máte také schopnost přizpůsobte komponenty podle vašich vlastních specifikací. Ant Design používá Less.js pro svůj stylový jazyk. Mravenec Design komponenty patří tlačítka, ikony, mřížky, strouhanka, rozbalovací nabídky, stránkování a další.

Projekt má téměř 60 tisíc hvězd na GitHub, takže u vývojářů je velmi populární.

Reagovat správce

Reagovat knihovny komponent uživatelského rozhraní: React Admin

Tato knihovna je vhodná pro vytváření aplikací pro správu mezi podniky (B2B) na rozhraní REST / GraphQL API a je přizpůsobitelná podle návrhu. Je postaven s řadou známých projektů kromě React: Material UI, React Router, Redux a React Final Form. Ten je populárním řešením pro správu stavu formulářů.

Kromě bezplatné verze a jeho komponenty, existuje také podnikové řešení. Podnikové řešení zahrnuje pro podporu od Marmelab (tvůrci) a přístup k soukromým modulům.

React Admin se může pochlubit asi 12 tisíci hvězdami na GitHub, a je aktivně udržován.

Shards React

Reagovat knihovny komponent uživatelského rozhraní: střepy

Shards React je otevřený zdroj, moderní sada React UI, která je postavena od nuly a je zaměřena na rychlý výkon. Moderní designový systém umožňuje měnit mnoho věcí. A co víc, můžete si stáhnout zdrojové soubory a měnit věci i na úrovni kódu. SCSS použitý pro styling pouze zvyšuje zážitek vývojáře.

Tato knihovna je založena na Střepy, a použití Reagovat DatepickerReagovat Popper (polohovací motor) a noUIShlider. Podporuje materiál a Fontawesome ikony. Shards Pro balíček obsahuje 15 předem připravených stránek, které vám pomohou začít. Tyto stránky s výhodou používají bloky, které se můžete pohybovat.

S ~ 270 hvězdami zapnutými GitHub, zahrnuje také desítky vlastních komponent React, jako jsou posuvníky rozsahu a přepínací vstupy. Komponenty 350+ zajišťují, že pomocí Shards React můžete vytvořit téměř všechny typy webových stránek.

Material-UI

Reagovat UI komponenty knihovny a rámce - UI materiálu

S neuvěřitelných 55 000 hvězd GitHub, Material-UI patří mezi nejoblíbenější knihovny komponent React UI. Komponenty spoléhají na React, ale používají Material Design společnosti Google. Pro ty z vás, kteří potřebují vyplnit, se materiální design inspiruje fyzickým světem a texturami a zároveň udržuje skutečné prvky uživatelského rozhraní na minimu..

K dispozici je celá řada užitečných součástí, jako jsou panely aplikací, automatické dokončování, odznaky, tlačítka, karty, dialogová okna, ikony, nabídky, posuvníky a další. Naštěstí Material-UI také nabízí React témata a šablony, takže můžete mít vlastní barevné téma pro vaši aplikaci.

Reagovat Bootstrap

Reagovat-bootstrap

Další na našem seznamu knihoven komponent React UI je React Bootstrap, sada UI, která si zachovává jádro Bootstrap. Aby vám poskytla větší kontrolu nad formou a funkcí každé komponenty, nahrazuje JavaScript Bootstrapu skriptem React. Každá součást je postavena tak, aby byla snadno přístupná, důležitá pro budování front-end frameworku.

A protože se React Bootstrap příliš neliší od původů Bootstrapu, mohou si vývojáři vybrat z tisíce dostupných témat Bootstrapu. Vydělalo se na nich více než 1 400+ hvězd GitHub.

Reagovat Virtualizováno

reaktivně virtualizovaný

Budujete frontend, který je těžký? React Virtualized může být knihovna, do které se musíte ponořit. Obsahuje četné komponenty pro efektivní vykreslování velkých seznamů, tabulek a sítí. Najdete zde například zdivo, sloupy, autosizery, třídiče směru, posuvníky oken a další. Dále můžete tabulky přizpůsobit konfigurací výšek řádků a zobrazením zástupných symbolů v buňkách.

React Virtualized má také velmi málo závislostí a podporuje standardní prohlížeče, včetně nejnovějších mobilních prohlížečů pro iOS a Android. Má 18 000+ hvězd GitHub.

Argon Design System React

Reagovat knihovny komponent uživatelského rozhraní: Argon Design System React

Tato knihovna nabízí bezplatný návrhový systém pro Bootstrap 4, React a Reactstrap. Je dodáván se 100 moderními a nádhernými prvky, které jsou implementovány v plně funkčním kódu, takže můžete bez námahy přepínat ze stránky na skutečný web..

Systém designu Argon nabízí předpřipravené vzorové stránky a hrst variací pro všechny komponenty, jako jsou barvy, styly, vznášení a zaostření.

Udělejte si plíživý pohled na celá sada komponent, představovat základní prvky, typografii, navigační panely, upozornění, obrázky, ikony, komponenty Javascript a další.

Modrotisk

blueprintjs

Komponenty React v Blueprint jsou primárně určeny pro stolní aplikace. Tyto komponenty jsou zvláště vhodné pro vytváření komplexních a datově hustých rozhraní. Z knihovny komponent si můžete vyzvednout kousky kódu pro generování a zobrazování ikon, pro interakci s daty a časy, pro výběr časových pásem a další.

Co jiného je v této knihovně komponent? Hodně opravdu – strouhanka, tlačítka, popisky, karty, dělič, navbars, karty, tagy a mnoho dalšího. Na GitHub, hodiny na 15 000+ hvězd.

Také by vás mohly zajímat tyto články:

  • Zdarma Reagovat Nativní šablony pro vývoj aplikací
  • Nejlepší šablony úhlového administrátorského panelu

Sémantická UI reakce

Reagovat knihovny komponent uživatelského rozhraní: sémantické-ui

Sémantické uživatelské rozhraní používá pro svůj vývojový rámec HTML pro člověka a má integrace s React, Angular, Meteor, Ember a mnoha dalšími rámci. Všechny funkce jQuery byly znovu implementovány v React.

Umožňuje načíst libovolné téma sémantického uživatelského rozhraní CSS na začátek aplikace sémantického uživatelského rozhraní React. Navíc budete mít také úplný přístup k označení, což znamená flexibilitu při přizpůsobování součástí. Počítá s hvězdou GitHub je přes 11 000.

Reagovat Toolbox

toolbox nástrojů

Další knihovnou komponent UI React, kterou můžete použít k implementaci principů materiálového designu společnosti Google do vašeho projektu, je React Toolbox. React Toolbox spoléhá na CSS moduly pro tento účel. I když můžete použít jakýkoli modul bundler, integruje se úhledně s webpack Pracovní postup. Tým React Toolbox poskytuje návštěvníkům editor v prohlížeči, kde můžete experimentovat s komponentami v reálném čase..

Při práci s React Toolbox si můžete vybrat, zda chcete importovat komponenty do svazků nebo surových komponent. Rozdíl je, pokud jde o první, komponenty přicházejí se všemi potřebnými závislostmi a tématy, které jsou pro vás aplikovány. To znamená, že CSS pro každou závislost bude automaticky k dispozici ve vašem konečném CSS. Naopak u surových komponent není zahrnut žádný CSS. To znamená, že budete muset komponentě poskytnout téma prostřednictvím vlastností, aby bylo správně navrženo. React Toolbox má více než 8 000 hvězd GitHub.

Reagujte na ploše

Reagovat knihovny komponent uživatelského rozhraní: rea-desktop

Naše další knihovna komponent, React Desktop používá komponenty MacOS, Sierra a Windows 10 s cílem přinést na web nativní prostředí pro stolní počítače.

Tato sbírka je knihovna JavaScript postavená na vrcholu Facebook’s React knihovna a je kompatibilní s jakýmkoli projektem založeným na JavaScriptu. Tento nástroj překračuje 8 000 hvězdiček GitHub.

Uživatelské rozhraní Onsen

onsen-ui

V případě, že se chystáte vytvářet mobilní platformy pro více platforem, bude vás tato nabídka zajímat v našem seznamu knihoven komponent React UI. Onsen UI je rámec pro vývoj mobilních aplikací, který používá HTML5 a JavaScript a poskytuje integraci s Angular, Vue.js a React. Všechny komponenty jsou automaticky upraveny na základě platformy, a proto podporuje iOS i Android pomocí stejného zdrojového kódu.

Uživatelské rozhraní Onsen je kompatibilní s mnoha populárními rámci React. Interaktivní výuka vám pomůže začít s tímto nástrojem dobře. Knihovna komponent využívá čisté CSS bez chování JavaScriptu. Chcete-li získat další podrobnosti, pomáhají vlastní prvky. Hvězda se počítá GitHub přesahuje 7 800.

Evergreen

Reagovat knihovny komponent uživatelského rozhraní: vždyzelené

Evergreen obsahuje sadu komponent React, které jsou vhodné pro podnikové webové aplikace. Protože to používá Reagovat primitivně, je vysoce flexibilní. Současně to funguje stejně snadno hned po vybalení z krabice.

Zahrnuje širokou škálu komponent a nástrojů počínaje základními rozvrženími, typografií, barvami a ikonami až po komponenty založené na funkcích, jako jsou rozevírací seznamy, přepínače, nahrávání souborů a ukazatele zpětné vazby. Po instalaci balíčku Evergreen si můžete vybrat a vybrat komponenty, které chcete importovat. V současné době má více než 9 000 hvězd GitHub.

Reactstrap

reastrap

Pro jednoduché komponenty React Bootstrap 4 si přečtěte Reactstrap. Dodává se ve dvou primárních distribučních verzích. Jedna, základní verze, která vylučuje volitelné závislosti. To vám poskytne větší flexibilitu při konfiguraci požadovaných závislostí.

Druhá verze je plná verze, která obsahuje všechny volitelné závislosti. Tento je doporučen pro menší aplikace. Reactstrap je další kolekce v knihovně komponent UI React, která překračuje hranici 8 700 hvězd GitHub.

Rebass

Reagovat knihovny komponent uživatelského rozhraní: rebass

Rebass obsahuje pouze osm základních komponent, vše v super malém souboru. Komponenty jsou rozšiřitelné a použitelné a jsou konstruovány pro responzivní webový design.

Komponenty používají stylizovaný systém a slouží jako skvělý výchozí bod pro rozšíření na vlastní komponenty uživatelského rozhraní pro vaši aplikaci. ThemeProvider vám s tím může také pomoci. Hvězda se počítá GitHub je přes 6 000.

Grommet

průchodka

Grommet má ve své sadě širokou knihovnu komponent a mezi své uživatele počítá velká jména jako Netflix a Boeing. Ať už je vaše aplikace určena pro telefony nebo pro širší obrazovky, budete moci navrhnout rozvržení. Přístupnost je pomocí klávesnice nebo čtečky obrazovky.

Themingové nástroje pomáhají s přizpůsobením pro barvu, typ a rozvržení. Tato knihovna komponent UI React má počet hvězdiček přesahující 6 000 GitHub.

Elementární uživatelské rozhraní

Reagovat knihovny komponent uživatelského rozhraní: elemental-ui

Elemental UI poskytuje řadu základních funkčních komponentů pro samostatné použití nebo v jakékoli kombinaci, ať už ve výchozím stylu nebo po nich. Mezi komponenty patří formuláře, tlačítka, karty a modály.

Projekt je ve vývoji, ale spravuje více než 4 000 hvězd GitHub.

Reagujte Suite

rsuite

React Suite obsahuje řadu knihoven komponent pro produkty podnikového systému. Podporuje všechny hlavní prohlížeče a platformy, stejně jako vykreslování na straně serveru.

Pokud jste doma s menším vývojem, přizpůsobení komponent by nemělo představovat žádný problém. Komponenty v této knihovně zahrnují ikony, zavaděče, oddělovače, popisky a další a React Suite má téměř 4 000 hvězd na GitHub.

Kráska

kráska

Mezi nejzajímavější knihovny komponent React UI nabízí Belle opravdu širokou škálu komponent. Tyto komponenty můžete přizpůsobit na dvou úrovních – základní úroveň pro všechny komponenty společně, stejně jako pro každou součást zvlášť.

Komponenty přicházejí s podporou mobilních telefonů a podporou ARIA. Způsob, jak začít používat Belle, je nejprve nastavit jednoduchou aplikaci s React a poté importovat jakoukoli komponentu Belle a začít ji ihned používat. Tato knihovna komponent má více než 2 400 hvězd GitHub.

reagovat-md

reagovat-md

Další knihovnou komponent React UI, kterou byste měli zvážit, pokud chcete do projektu implementovat návrh materiálu, je rea-md. To vám dává na výběr komponenty React, které pracují se Sassem. Za tímto účelem je v Sassu místo stylů inline oddělení stylů. Usnadňuje vám přizpůsobení součástí v souladu se stávajícími styly.

Barvy a typografie lze přizpůsobit a podrobná dokumentace vám pomůže překonat základy. Na GitHub, Reagovat-md počítá více než 2 000 hvězd.

PrimeReact

primer

Tento seznam knihoven komponent React UI by nebyl úplný bez PrimeReact. Poskytuje komponenty, které pokrývají téměř všechny základní požadavky na rozhraní, jako jsou vstupní možnosti, nabídky, prezentace dat, zprávy a další.

Věnuje pozornost také mobilnímu zážitku pomocí dotykových optimalizovaných návrhových prvků. Existuje řada šablon a motivů, které umožňují přizpůsobit a vybrat si mezi plochým a materiálovým designem. Tato knihovna komponent má více než 1200 hvězd GitHub.

KendoReact

kendoreakt

Na rozdíl od předchozích knihoven komponent React UI je KendoReact prémiová sada komponent s licencemi začínajícími na 799 USD. Může se pochlubit působivým seznamem klientů, který zahrnuje Microsoft, NASA a Sony. A vy jej také můžete použít k vytváření rychlých a funkčně bohatých aplikací s působivým uživatelským rozhraním.

Sada komponent je vytvořena speciálně pro vývoj React. To zajišťuje nulové závislosti a všechny komponenty jsou plně optimalizovány pro React. Navíc, pokud máte existující knihovnu komponent, můžete ji jednoduše přidat z KendoReact, aniž byste museli přepisovat celou knihovnu.

To je náš seznam nejlepších knihoven komponent React UI. Je zde vaše oblíbená knihovna?

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 50–80%:

* Tento příspěvek obsahuje přidružené odkazy, což znamená, že pokud kliknete na jeden z odkazů na produkt a poté produkt zakoupíte, dostaneme malý poplatek. Bez obav však budete stále platit standardní částku, takže z vaší strany nevzniknou žádné náklady.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map