React’te MobX ile Tema De\u011fi\u015ftirme: Kolay ve Etkili Bir Y\u00f6ntem<\/p>\n
Merhaba! Bug\u00fcn, React uygulamalar\u0131n\u0131zda kullan\u0131c\u0131 deneyimini geli\u015ftirmek i\u00e7in olduk\u00e7a \u00f6nemli bir \u00f6zellik olan tema de\u011fi\u015ftirme i\u015flemini, g\u00fc\u00e7l\u00fc state y\u00f6netim k\u00fct\u00fcphanesi MobX ile nas\u0131l entegre edece\u011finizi ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. Bu y\u00f6ntem, kodunuzu temiz ve d\u00fczenli tutarken, ayn\u0131 zamanda performans a\u00e7\u0131s\u0131ndan da olduk\u00e7a avantajl\u0131d\u0131r.<\/p>\n
\u00d6ncelikle, projenizde MobX’i kurman\u0131z gerekmektedir. Bunun i\u00e7in npm veya yarn kullanabilirsiniz:<\/p>\n
Kurulumdan sonra, uygulaman\u0131zda tema durumunu y\u00f6netecek bir store olu\u015fturabiliriz. Bu store, se\u00e7ili teman\u0131n (\u00f6rne\u011fin, a\u00e7\u0131k veya koyu) bilgisini saklayacak ve bu bilgiyi uygulama genelinde payla\u015facakt\u0131r.<\/p>\n G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, \u015eimdi ise, bu store’u React bile\u015fenlerimizde kullanarak tema ge\u00e7i\u015fini sa\u011flayabiliriz. \u00d6rne\u011fin, bir buton ile tema de\u011fi\u015ftirmeyi sa\u011flayacak bir bile\u015fen olu\u015fturabiliriz:<\/p>\n Bu bile\u015fen, Son olarak, uygulaman\u0131z\u0131n CSS’ini tema durumuna g\u00f6re ayarlayabilirsiniz. Bu, CSS de\u011fi\u015fkenleri (CSS Variables) kullanarak kolayca yap\u0131labilir. \u00d6rne\u011fin, Bu \u00f6rnekte, basit bir tema de\u011fi\u015ftirme mekanizmas\u0131 olu\u015fturduk. Ancak daha geli\u015fmi\u015f senaryolar i\u00e7in, lokal depolama (localStorage) kullanarak kullan\u0131c\u0131 tercihlerini kaydedebilir veya daha karma\u015f\u0131k tema se\u00e7enekleri sunabilirsiniz. Daha detayl\u0131 bilgi i\u00e7in MobX resmi d\u00f6k\u00fcmanlar\u0131n\u0131<\/a> inceleyebilirsiniz. Ayr\u0131ca, React uygulamalar\u0131n\u0131zda daha fazla ipucu ve teknik i\u00e7in kendi blo\u011fumu<\/a> ziyaret edebilirsiniz.<\/p>\n Bu makalede, React uygulamalar\u0131n\u0131zda MobX kullanarak tema de\u011fi\u015ftirme i\u015flemini nas\u0131l kolayca entegre edebilece\u011finizi \u00f6\u011frendiniz. Bu y\u00f6ntem, kodunuzu temiz tutarken, performans kayb\u0131n\u0131 da \u00f6nlemenize yard\u0131mc\u0131 olur. Umar\u0131m bu makale size yard\u0131mc\u0131 olmu\u015ftur!<\/p>\n #Etiketler: React, MobX, tema de\u011fi\u015ftirme, tema, dark mode, light mode, state management, javascript, react tutorial, fatihsoysal<\/p>\n <\/body>npm install mobx mobx-react-lite<\/code><\/p>\n\nimport { makeAutoObservable } from 'mobx';\n\nclass ThemeStore {\n theme = 'light'; \/\/ Ba\u015flang\u0131\u00e7ta a\u00e7\u0131k tema\n\n constructor() {\n makeAutoObservable(this);\n }\n\n toggleTheme() {\n this.theme = this.theme === 'light' ? 'dark' : 'light';\n }\n}\n\nexport default new ThemeStore();\n<\/code><\/pre>\nThemeStore<\/code> s\u0131n\u0131f\u0131, theme<\/code> \u00f6zelli\u011fi ile se\u00e7ili temay\u0131 tutar. toggleTheme<\/code> fonksiyonu ise teman\u0131n a\u00e7\u0131k ve koyu aras\u0131nda ge\u00e7i\u015f yapmas\u0131n\u0131 sa\u011flar. makeAutoObservable<\/code> fonksiyonu ise MobX’in bu s\u0131n\u0131f\u0131 g\u00f6zlem alt\u0131na almas\u0131n\u0131 sa\u011flar.<\/p>\n\nimport React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport ThemeStore from '.\/ThemeStore'; \/\/ Olu\u015fturdu\u011fumuz store\n\nconst ThemeToggleButton = observer(() => {\n return (\n <button onClick={() => ThemeStore.toggleTheme()}>\n Tema De\u011fi\u015ftir\n <\/button>\n );\n});\n\nexport default ThemeToggleButton;\n<\/code><\/pre>\nThemeStore<\/code>‘daki toggleTheme<\/code> fonksiyonunu \u00e7a\u011f\u0131r\u0131r ve tema durumunu de\u011fi\u015ftirir. observer<\/code> fonksiyonu sayesinde, tema de\u011fi\u015fimi an\u0131nda bile\u015fen yeniden render edilir.<\/p>\n:root<\/code> se\u00e7icisi ile temaya ba\u011fl\u0131 CSS de\u011fi\u015fkenleri tan\u0131mlayabilir ve bunlar\u0131 bile\u015fenlerinizde kullanabilirsiniz.<\/p>\nSonu\u00e7<\/h2>\n
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"React’te MobX ile Tema De\u011fi\u015ftirme: Kolay ve Etkili Bir Y\u00f6ntem Merhaba! Bug\u00fcn, React uygulamalar\u0131n\u0131zda kullan\u0131c\u0131 deneyimini geli\u015ftirmek i\u00e7in…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-14546","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n