Özelleştirilebilir React Uygulamaları Oluşturmak için En İyi 4 Biçimsiz Bileşen Kitaplığı

React uygulamalarının geliştirme sürecini basitleştirmek için önceden oluşturulmuş, stillendirilmiş öğeler sağlayan bileşen kitaplıklarını kullanabilirsiniz. Bu kitaplıklar zamandan ve emekten büyük tasarruf sağlayabilir, ancak aynı zamanda uygulamanızın stili üzerindeki kontrolünüzü de sınırlayabilir. React uygulamalarınızın stili üzerinde daha fazla kontrole ihtiyacınız varsa stillendirilmemiş bir bileşen kitaplığı kullanmayı düşünün.

Stilsiz Bileşen Kitaplıkları Nelerdir?

Stillendirilmemiş bileşen kütüphaneler erişilebilir React uygulamaları geliştirmek için kullanılır. Bunlar, önceden tanımlanmış stiller olmaksızın yeniden kullanılabilir kullanıcı arayüzü bileşenlerinin koleksiyonlarıdır. Size herhangi bir stil gerektirmeden UI öğelerinin temel yapısını sağlarlar. Bu size bileşenlerinizin nasıl göründüğü ve nasıl hissettirdiği konusunda tam kontrol sağlar.

Stilsiz Bileşen Kitaplıklarının Avantajları

Stillendirilmemiş bileşen kitaplıklarını kullanmanın bazı avantajları şunlardır:

• Stil üzerinde tam kontrol: Biçimlendirilmemiş bileşen kitaplıkları, bileşenlerinizin nasıl görüneceği konusunda size tam kontrol sağlar. Bileşenleri ihtiyaçlarınıza uyacak şekilde özelleştirmek için herhangi bir CSS'yi veya stil çerçevesini kullanabilirsiniz.
• Gelişimi hızlandırın: Biçimlendirilmemiş bileşen kitaplıkları, uygulamanızda kullanabileceğiniz bir dizi önceden oluşturulmuş bileşen sağlayarak geliştirmeyi hızlandırmanıza yardımcı olabilir.
• Bakımı kolay: Stillendirilmemiş bileşen kitaplıklarının bakımı kolaydır çünkü herhangi bir belirli stil çerçevesine sıkı sıkıya bağlı değildirler. Bu, temel kodda değişiklik yapmadan stili kolayca güncelleştirebileceğiniz anlamına gelir.

Radix UI, erişilebilirliğe odaklanan, stillendirilmemiş bir bileşen kitaplığıdır. Tüm kullanıcıların erişebileceği şekilde tasarlanmış bir dizi kullanıcı arayüzü bileşeni sağlar. Yapabilirsiniz Radix kullanıcı arayüzünü kullanarak güzel React uygulamaları oluşturun.

Radix UI ile çalışırken kütüphanenin tamamı yerine ihtiyacınız olan bileşenleri tek tek kurabilirsiniz. Bu, uygulamanızı hafif tutmanızı sağlar.

Örneğin, yalnızca bir akordeon bileşenine ihtiyacınız varsa aşağıdaki komutu çalıştırarak bunu uygulamanıza yükleyebilirsiniz:

npm install @radix-ui/react-accordion

Akordeon bileşenini yükledikten sonra React uygulamanızda akordeonlar oluşturabilirsiniz.

Akordeon bileşeninin nasıl kullanılacağına ilişkin bir örnek:

import React from"react"
import * as Accordion from"@radix-ui/react-accordion"
exportdefaultfunctionApp() {
return (


"single" defaultValue="item-1" collapsible>
"item-1">
Is this accordion unstyled?</Accordion.Trigger>
Yes. It is unstyled.</Accordion.Content>
 </Accordion.Item>
 </Accordion.Root>
 </div>
 )
}

Yukarıdaki kod bloğu, aşağıdakileri kullanarak temel bir stillendirilmemiş akordeon bileşeni kurar: @radix-ui/react-accordion Özelleştirilebilir içeriğe sahip daraltılabilir öğelere izin veren kitaplık.

Kod şuna benzeyen bir akordeon üretecektir:

React Aria kütüphanesi, React'ta kullanıcı arayüzleri oluşturmak için kullanılan bir dizi kancadır. Kitaplık, erişilebilirlik için en iyi uygulamaları takip eden bir bileşen koleksiyonu sağlayarak erişilebilir web uygulamaları oluşturmayı kolaylaştırır.

Adobe, React Aria kitaplığını geliştirdi ve bakımını yaptı. Kitaplık, erişilebilir kullanıcı arayüzleri oluşturmaya yönelik kapsamlı tasarım yönergeleri ve kaynaklar sağlayan daha kapsamlı Adobe Spectrum Tasarım Sisteminin bir parçasıdır. React Aria kütüphanesi tarafından sağlanan öğeler stilsizdir ve öğeleri ihtiyaçlarınıza uyacak şekilde özelleştirmenize olanak tanır.

React Aria'yı React uygulamanızda kullanmak için aşağıdaki komutu çalıştırarak yükleyin:

npm install react-aria

Burada, bir düğme bileşeninin nasıl oluşturulacağına ilişkin bir örnek verilmiştir. KullanımDüğmesi kanca:

import React from'react'
import {useButton} from'react-aria';
functionButton(props: any) {
let ref = React.useRef(null);
let { buttonProps } = useButton(props, ref);
return (

 {props.children}
 </button>
 );
}
exportdefault Button;

Artık içe aktarabilir ve oluşturabilirsiniz. düğme Seçtiğiniz herhangi başka bir bileşendeki bileşen.

Örneğin:

import React from'react'
import Button from'./Button';
functionApp() {
return (
Click Me</Button>
 );
}
exportdefault App;

Yukarıdaki kod bloğunu oluşturduğunuzda, şuna benzeyen basit bir düğme oluşturacaktır:

Kancalar nedeniyle React Aria'yı kullanmaktan rahatsızlık duyuyorsanız React Aria Bileşenleri bunun yerine kütüphane. Bu kitaplık, varsayılan olarak erişilebilen önceden oluşturulmuş bileşenler sağlar. React Aria kütüphanesinin üstünde ince bir katmandır. Sağlanan bileşenler biçimlendirilmemiştir, dolayısıyla iki kitaplık birbirine çok benzer.

Base UI, stil gerektirmeden UI bileşenleri sağlayan, stillendirilmemiş bir React UI kitaplığıdır. Material UI ekibi, kendi özel React uygulamalarınızı oluşturmak için kullanabileceğiniz bir dizi temel bileşenle Base UI'yi oluşturdu. Base UI kütüphanesini de aynı temele dayandırdılar Malzeme Kullanıcı Arayüzü olarak sağlam mühendislikancak Temel Kullanıcı Arayüzü Materyal Tasarımını uygulamaz.

Base UI'yi React uygulamanıza şu komutla yükleyebilirsiniz:

npm install @mui/base

Temel kullanıcı arayüzü, bileşenleri hareket halindeyken sağlar; bu, kitaplıktaki bileşenleri doğrudan içe aktarabileceğiniz ve kullanabileceğiniz anlamına gelir. Ayrıca bileşenlerinizi oluşturmak ve yapılandırmak için kullanabileceğiniz kancalar da sağlar.

Temel UI bileşenlerini kullanmanın bir örneğini burada bulabilirsiniz:

import React from"react";
import Button from"@mui/base/Button";
exportdefaultfunctionApp() {
return (


Click Me</Button>
 </div>
 );
}

Bu kod, aşağıdakileri kullanarak basit bir düğme oluşturur: Düğme Temel UI kütüphanesinin bileşeni. Ayrıca şunları da kullanabilirsiniz: KullanımDüğmesi Aynı görevi gerçekleştirmek için kancayı kullanın.

import React from"react";
import useButton from"@mui/base/useButton";
exportdefaultfunctionApp() {
const { getRootProps } = useButton();
return (


Click Me</button>
 </div>
 );
}

KullanımDüğmesi kanca ve Düğme bileşeni aşağıdaki resimde gösterildiği gibi biçimlendirilmemiş bir düğme oluşturacaktır.

Keşfedebileceğiniz başka bir kitaplık, stilsiz kullanıcı arayüzü öğeleri sunan ve size kullanıcı arayüzü bileşenlerinizin görünümünü ve davranışını uygun gördüğünüz şekilde özelleştirme özgürlüğü veren Başsız Kullanıcı Arayüzü'dür.

Aşağıdaki komutu kullanarak kütüphaneyi yükleyebilirsiniz:

npm install @headlessui/react

Kütüphaneyi kurduktan sonra kütüphanenin sağladığı çeşitli bileşenleri React uygulamanızda kullanabilirsiniz.

Örneğin:

import React from"react";
import { Popover } from"@headlessui/react";
exportdefaultfunctionApp() {
return (




Popover</Popover.Button>

This is a Popover</p>
 </Popover.Panel>
 </Popover>
 </div>
 );
}

Bu örnekte, şunu kullanarak bir açılır pencere oluşturursunuz: Popover Başsız Kullanıcı Arayüzü kitaplığından bileşen. Yukarıdaki kod bloğu buna benzeyen bir açılır pencere oluşturacaktır.

Stilsiz Bileşenlerle Tam Kontrol Elde Edin

Stillendirilmemiş bileşen kitaplıkları, React uygulamanızın stili üzerinde size tam kontrol sağlayarak benzersiz kullanıcı deneyimleri oluşturmanıza olanak tanır. Bu kütüphaneler ihtiyaçlarınıza uygun çeşitli seçenekler sunar. Yukarıda belirtilen kütüphanelerden yararlanarak görsel olarak çekici ve son derece özelleştirilebilir React uygulamaları oluşturabilirsiniz.