{"id":36458,"date":"2025-12-18T02:41:32","date_gmt":"2025-12-17T23:41:32","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36458"},"modified":"2025-12-18T02:41:32","modified_gmt":"2025-12-17T23:41:32","slug":"bulma-css-ve-react-neden-birlikte-kullanmaliyiz","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/bulma-css-ve-react-neden-birlikte-kullanmaliyiz\/","title":{"rendered":"Bulma CSS ve React: Neden Birlikte Kullanmal\u0131y\u0131z?"},"content":{"rendered":"<\/p>\n
Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn h\u0131zl\u0131 ve tutarl\u0131 bir \u015fekilde olu\u015fturulmas\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Bu noktada CSS framework’leri ve JavaScript k\u00fct\u00fcphaneleri devreye girer. Bu rehberde, hafif, modern ve mobil \u00f6ncelikli bir CSS framework’\u00fc olan Bulma’y\u0131, bile\u015fen tabanl\u0131 kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in pop\u00fcler bir k\u00fct\u00fcphane olan React ile nas\u0131l bir araya getirebilece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz. React’in dinamik yap\u0131s\u0131 ile Bulma’n\u0131n \u015f\u0131k ve kolay kullan\u0131ml\u0131 CSS s\u0131n\u0131flar\u0131n\u0131 birle\u015ftirerek, hem geli\u015ftirici deneyimini hem de son kullan\u0131c\u0131 deneyimini iyile\u015ftirebilirsiniz.<\/p>\n
Bulma CSS ve React: Neden Birlikte Kullanmal\u0131y\u0131z?<\/h2>\n
Bulma, tamamen CSS tabanl\u0131 (JavaScript i\u00e7ermeyen) bir framework’t\u00fcr. Bu, projenizin boyutunu k\u00fc\u00e7\u00fclt\u00fcr ve performans\u0131n\u0131 art\u0131r\u0131r. Flexbox \u00fczerine in\u015fa edilmi\u015f olmas\u0131 sayesinde, duyarl\u0131 (responsive) tasar\u0131mlar olu\u015fturmak son derece kolayd\u0131r. React ise, b\u00fcy\u00fck ve karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerini y\u00f6netmeyi kolayla\u015ft\u0131ran, bile\u015fen tabanl\u0131 bir JavaScript k\u00fct\u00fcphanesidir. React ile Bulma’y\u0131 birle\u015ftirmek, \u015fu avantajlar\u0131 sa\u011flar:<\/p>\n
Tutarl\u0131 Tasar\u0131m:<\/b> Bulma’n\u0131n tasar\u0131m dili, uygulaman\u0131z boyunca tutarl\u0131 bir g\u00f6r\u00fcn\u00fcm ve his sa\u011flar.<\/li>\n
Esneklik:<\/b> Bulma’n\u0131n mod\u00fcler yap\u0131s\u0131, sadece ihtiyac\u0131n\u0131z olan k\u0131s\u0131mlar\u0131 kullanman\u0131za olanak tan\u0131r. React’in bile\u015fen yap\u0131s\u0131yla birle\u015fti\u011finde, bu mod\u00fclerlik daha da anlam kazan\u0131r.<\/li>\n
Kolay \u00d6\u011frenme:<\/b> Sadece CSS s\u0131n\u0131flar\u0131n\u0131 \u00f6\u011frenerek Bulma’y\u0131 kullanmaya ba\u015flayabilirsiniz.<\/li>\n<\/ul>\n
Bu rehberde, temel bir React projesi olu\u015fturmaktan, Bulma’y\u0131 entegre etmeye ve Bulma’n\u0131n temel bile\u015fenlerini React bile\u015fenlerinizle birlikte kullanmaya kadar her \u015feyi ele alaca\u011f\u0131z.<\/p>\n
React Projesi Olu\u015fturma ve Bulma’y\u0131 Entegre Etme<\/h2>\n
Bulma’y\u0131 React projenize dahil etmeden \u00f6nce, temel bir React projesi olu\u015fturmam\u0131z gerekiyor. Bunun i\u00e7in create-react-app<\/code> arac\u0131n\u0131 kullanaca\u011f\u0131z. E\u011fer bilgisayar\u0131n\u0131zda Node.js ve npm (veya yarn) kurulu de\u011filse, \u00f6ncelikle bunlar\u0131 kurman\u0131z gerekmektedir.<\/p>\n
React Projesi Olu\u015fturma<\/h3>\n
Terminalinizi a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rarak yeni bir React projesi olu\u015fturun:<\/p>\n
Bu komutlar, bulma-react-app<\/code> ad\u0131nda yeni bir React projesi olu\u015fturacak ve projenin dizinine ge\u00e7menizi sa\u011flayacakt\u0131r. Projenin ba\u015far\u0131yla olu\u015fturuldu\u011funu do\u011frulamak i\u00e7in a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rabilirsiniz:<\/p>\n
\u015eimdi s\u0131ra Bulma’y\u0131 React projemize eklemeye geldi. Bulma’y\u0131 bir npm paketi olarak kolayca kurabiliriz:<\/p>\n
npm install bulma\n<\/code><\/pre>\n
Veya yarn kullan\u0131yorsan\u0131z:<\/p>\n
yarn add bulma\n<\/code><\/pre>\n
Bulma paketi y\u00fcklendikten sonra, CSS dosyalar\u0131n\u0131 projemize dahil etmemiz gerekiyor. Bunu genellikle src\/index.js<\/code> veya src\/App.js<\/code> dosyas\u0131nda yapar\u0131z. src\/index.js<\/code> dosyas\u0131n\u0131 a\u00e7\u0131n ve en \u00fcst\u00fcne a\u015fa\u011f\u0131daki sat\u0131r\u0131 ekleyin:<\/p>\n
Bu sat\u0131r, Bulma’n\u0131n minimize edilmi\u015f CSS dosyas\u0131n\u0131 global olarak uygulaman\u0131za dahil edecektir. Art\u0131k Bulma s\u0131n\u0131flar\u0131n\u0131 React bile\u015fenlerinizde kullanmaya haz\u0131rs\u0131n\u0131z!<\/p>\n
Bulma, bir\u00e7ok kullan\u0131ma haz\u0131r bile\u015fen ve yard\u0131mc\u0131 s\u0131n\u0131f sunar. React ile bu s\u0131n\u0131flar\u0131 do\u011frudan JSX i\u00e7inde kullanabilirsiniz. Temel bir sayfa yap\u0131s\u0131 olu\u015fturarak ve baz\u0131 bile\u015fenleri kullanarak nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6relim.<\/p>\n
Temel Layout ve Konteyner<\/h3>\n
Bulma’n\u0131n en temel layout \u00f6\u011felerinden biri container<\/code> s\u0131n\u0131f\u0131d\u0131r. Bu s\u0131n\u0131f, i\u00e7eri\u011fi ortalar ve belirli bir geni\u015flikte tutar. src\/App.js<\/code> dosyas\u0131n\u0131 a\u015fa\u011f\u0131daki gibi g\u00fcncelleyelim:<\/p>\n
Bu bir Bulma konteyneridir.<\/p>\n <\/div>\n <\/div>\n );\n}\n\nexport default App;\n<\/code><\/pre>\n
Yukar\u0131daki \u00f6rnekte, bir hero<\/code> bile\u015feni ve bir container<\/code> kullanarak temel bir sayfa yap\u0131s\u0131 olu\u015fturduk. is-primary<\/code>, title<\/code>, subtitle<\/code> ve mt-5<\/code> gibi s\u0131n\u0131flar Bulma’dan gelmektedir ve bile\u015fenlerimize stil kazand\u0131r\u0131r.<\/p>\n
Butonlar ve Modifikat\u00f6rler<\/h3>\n
Bulma, butonlar i\u00e7in \u00e7e\u015fitli stil ve boyut modifikat\u00f6rleri sunar. Bir butona renk vermek i\u00e7in is-primary<\/code>, is-info<\/code>, is-success<\/code> gibi s\u0131n\u0131flar; boyutunu de\u011fi\u015ftirmek i\u00e7in is-small<\/code>, is-medium<\/code>, is-large<\/code> gibi s\u0131n\u0131flar kullanabilirsiniz. Ayr\u0131ca is-loading<\/code> veya is-outlined<\/code> gibi durum modifikat\u00f6rleri de mevcuttur.<\/p>\n
\/\/ App.js veya ba\u015fka bir React bile\u015feninde\n