Ant Design ile ReactJS Uygulaması için Tema Oluşturma

Bugün Ant Design UI library’si ile Reactjs uygulamalarımız için nasıl tema oluştururuz onu konuşacağız.

Yakın zamanda bir ReactJs projesinde görevlendirildim ve bu proje için UI library seçmemiz gerekiyordu. Çok fazla seçenek olduğu için en çok kullanılan ReactJs UI libraryleri arasında araştırmalar ve kıyaslamalar yaptım. Daha sonra da bu konudaki tecrübesine güvendiğim bir arkadaşımın tavsiyesi ile Ant Design ile tanıştım. Bu konuda yazı yazmak istememin sebebi ise bu süreçlerde benim gibi kararsız kalanlara bir nebze de olsa yardımcı olabilmek.

Ant Design açık kaynak bir kütüphane ve kodlarına buradan erişebilirsiniz. Ayrıca Ant Design ile Vue ve Angular gibi diğer UI ve Frameworkler için de hazır componentler bulmanız mümkün.

ReactJs Uygulamasının Oluşturulması

ReactJs uygulamasını oluştururken ek konfigürasyonlar ile uğraşmamak için bizlere hazır bir ReactJs projesi template’ i sunan CRA (Create React App) kullanacağım.

npx create-react-app ant-design-theme

komutu ile ant-design-theme klasörü altında ReactJs projemizi oluşturuyoruz. Yazıda paket yöneticisi olarak npm’ i kullanacağım fakat, eğer siz isterseniz npm alternatifi başka paket yöneticilerini tercih edebilirsiniz.

Hooks ile birlikte Functional Component’lerde de state yönetimi sağlanabildiğinden Layout’u oluştururken component’leri functional component olarak oluşturacağım. Siz isterseniz hooks kullanmayıp, class component’leri tercih edebilirsiniz.

React projemiz oluştuktan sonra proje yapımız aşağıdaki gibi olacaktır.

daha sonra terminalde,

cd ant-design-theme

komutuyla react projemizin bulunduğu dizine gidiyoruz.

Sıra geldi Ant Design kütüphanesini yüklemeye. Ant Design kütüphanesini yüklemek için gerekli komut,

npm i antd

Antd kütüphanesini de yükledikten sonra antd’ a ait Button componenti ile kütüphaneyi kütüphaneyi kullanmaya yönelik ilk adımımızı atabiliriz. Bu işlem için proje dizinimizde src/App.js dosyasının içeriği aşağıdaki gibi olacaktır.

App componentimizi de oluşturduktan sonra antd’ a ait stillerin içeri aktarılabilmesi için src/App.css içinde antd kütüphanesini aşağıdaki gibi import ediyoruz.

@import '~antd/dist/antd.css';

Bu işlemlerden npm start komutu ile uygulamamızı ayağa kaldırıyoruz. Uygulama çalıştıktan sonra ise karşılaşacağımız görüntü aşağıdaki gibi olacaktır

ant design ile ilk ekranımız

Şuan için hazırlıklar tamamlanmış gibi gözükse de çözmemiz gereken birkaç problem var.

Yukarıda antd’ a ait stil dosyasını import ederek, ant’ a ait tüm componentlerin stillerini import etmiş olduk. Bu haldeyken projemizde kullanılmayan componentlerin stillerinin de gereksiz yere içeri aktarılması projemize gereksiz yere yük getirecektir. Bu problemin üstesinden gelebilmek için create-react-app projesi ile gelen default webpack config dosyasını modifiye etmemiz gerekiyor.

Bu işlem için 2 adet pakete ihtiyacımız var bunlar “react-app-rewired” ve “customize-cra” Bu paketleri yüklemek için ise gerekli komutumuz,

npm i react-app-rewired customize-cra

Bu kurulumu yaptıktan sonra package.json dosyasındaki scriptlerimizi aşağıdaki gibi düzenlememiz gerekiyor.

- olan scriptler yerine + olan scriptlerin eklenmesi gerekiyor

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

Daha sonra webpack konfigürasyonları ile ilgili özelleştirmeleri sağlamak için react proje dizinimiz altında src ile aynı düzeyde config-overrides.js adında bir dosya oluşturuyoruz. Eğer bu dosyayı oluşturmazsak “npm start” komutu ile projeyi başlatmaya çalıştığımızda hata ile karşılaşırız.

“config-overrides.js” dosyasını da oluşturduktan sonra sıra geldi “babel-plugin-import” paketinin kurulmasına. Bu paketi kurmak için terminalde,

npm i babel-plugin-import

komutunu çalıştıracağız.

“babel-plugin-import” paketini neden kullanıyoruz?

“babel-plugin-import” paketi’nin kullanılma sebebi yukarıda da bahsedilen antd’ da bulunan bütün componentlere ait stillerin import edilmesini önlemek.

Bu işlemden sonra sıra config-overrides.js dosyasının içeriğini doldurmaya geldi. config-overrides.js dosyasının içeriği aşağıdaki gibi olmalıdır.

Bu komutlarla yapılan kısaca antd kütüphanesine ait stillerin bulunduğu klasörlerin import edilmesidir.

Şimdi App.css dosyası içinde bulunan

@import '~antd/dist/antd.css';

Satırını silebiliriz. Çünkü import işlemini config-overrides.js içinde yaptık ve artık bu komuta ihtiyacımız kalmadı. Bu komutu sildikten sonra uygulamayı yeniden

npm start

komutu ile başlattığımızda sayfada ant’ a ait Button componentinin bulunduğunu göreceğiz.

Layoutu Özelleştirmek

@primary-color: #1890ff; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 4px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers

Ant Design’da layoutu özelleştirmek amacıyla yukarıdaki gibi less değişkenleri (less variables) kullanılıyor. Dolayısıyla bizim de ilerde uygulamaya ait stil özelleştirmelerini yapabilmek için less özelliğini şimdiden uygulamaya kazandırmamız fena olmaz.

Bunun için less ve less-loader paketlerini aşağıdaki gibi yüklememiz gerekiyor,

npm i less less-loader

Kurulum işleri tamamlandıktan sonra config-overrides.js dosyasında aşağıdaki gibi düzenlemeler yapmamız gerekiyor.

Yapılan düzenlemelerin daha net anlaşılabilmesi adına önceki hallerini yorum satırı haline getirdim. Kısaca yapılan değişiklikler,

- Importlara addLessLoader eklendi,

- fixBabelImports içinde style değeri css’ ten true’ ya çekildi. override içine ek olarak addLessLoader, parametreleri ile birlikte eklendi.

Şimdi uygulamayı durdurup,

npm start

komutu ile yeniden başlattığımızda buton renginin görseldeki gibi

ant design component lerinin özelleştirilmesi

yeşile döndüğünü göreceğiz. Bundan sonra uygulamamız .css uzantılı stil dosyalarının yanı sıra .less uzantılı stil dosyalarını da destekleyecektir.

Ek olarak Modify variables’ ları direkt olarak bu şekilde eklemek yerine .less uzantılı bir dosyadan da çekebiliriz. Bunun için yapılması gereken ise terminalden,

npm i less-vars-to-js

komutunu çalıştırarak less-vars-to-js paketinin yüklenmesidir.

Sonra config-overrides.js dosyasıyla aynı düzeyde customize-vars.less adında bir dosya oluşturalım. Bu dosyaya less değişkenimizi aktaralım. Dosyanın içeriği aşağıdaki gibi olacaktır.

@primary-color: #1DA57A

Sonra da config-overrides.js dosyasını aşağıdaki gibi düzenlemeli ve less değişkenlerimizin bulunduğu dosyanın içeriğini modifyVars’ a aktarmalıyız.

Şu ana kadar biraz sıkıcı olsa da 😊 uygulamamıza ait alt yapıyı tamamlamış bulunuyoruz. Yazıyı daha fazla uzatmamak adına burada noktalıyorum. Bir sonraki yazımda Layout tasarımı ile devam edeceğiz.

Yazı ile ilgili eksikleri ya da karşılaştığınız problemleri yorum olarak yazarsanız düzeltmek / yardımcı olmak için elimden geleni yaparım. Bir sonraki yazımda görüşmek üzere.

Kaynak

https://ant.design/