{"id":18600,"date":"2025-04-19T14:30:14","date_gmt":"2025-04-19T11:30:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/basit-ve-optimize-edilmis-bir-react-native-todo-uygulamasi-olusturma\/"},"modified":"2025-04-19T14:30:14","modified_gmt":"2025-04-19T11:30:14","slug":"basit-ve-optimize-edilmis-bir-react-native-todo-uygulamasi-olusturma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/basit-ve-optimize-edilmis-bir-react-native-todo-uygulamasi-olusturma\/","title":{"rendered":"Basit ve Optimize Edilmi\u015f Bir React Native ToDo Uygulamas\u0131 Olu\u015fturma"},"content":{"rendered":"

<\/p>\n

Basit ve Optimize Edilmi\u015f Bir React Native ToDo Uygulamas\u0131 Olu\u015fturma<\/p>\n

Merhaba! Bu yaz\u0131da, React Native kullanarak basit, temiz ve performansl\u0131 bir ToDo uygulamas\u0131 nas\u0131l geli\u015ftirece\u011finizi ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. Hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in faydal\u0131 bilgiler bulacaks\u0131n\u0131z. \u00d6ncelikle, proje yap\u0131s\u0131n\u0131 ve temel bile\u015fenleri ele alaca\u011f\u0131z. Daha sonra, performans\u0131 optimize etmek i\u00e7in kullanabilece\u011fimiz baz\u0131 tekniklere de\u011finece\u011fiz. Son olarak da, uygulamay\u0131 geli\u015ftirmek ve geni\u015fletmek i\u00e7in birka\u00e7 ipucu payla\u015faca\u011f\u0131m.<\/p>\n

Proje Kurulumu ve Temel Bile\u015fenler<\/h2>\n

\u00d6ncelikle, bir React Native projesi olu\u015fturmam\u0131z gerekiyor. Bunun i\u00e7in Expo CLI kullanabilirsiniz. Expo, h\u0131zl\u0131 ve kolay bir \u015fekilde React Native uygulamalar\u0131 geli\u015ftirmenizi sa\u011flayan harika bir ara\u00e7t\u0131r. Kurulum ad\u0131mlar\u0131 a\u015fa\u011f\u0131daki gibidir:<\/p>\n

\nexpo init todo-app\ncd todo-app\nexpo start\n<\/code><\/pre>\n
Proje kurulduktan sonra, temel bile\u015fenleri olu\u015fturabiliriz. Uygulamam\u0131zda bir ToDo listesi, yeni ToDo ekleme formu ve her bir ToDo i\u00e7in silme \u00f6zelli\u011fi bulunacak.  Bunlar\u0131 olu\u015fturmak i\u00e7in, React Native’in yerle\u015fik bile\u015fenlerini ve state y\u00f6netimi i\u00e7in genellikle Redux veya Context API gibi y\u00f6ntemleri kullanabiliriz.  Bu yaz\u0131da, basitlik amac\u0131yla Context API kullanaca\u011f\u0131z. <\/p>\n
ToDo Ekleme ve Listeleme<\/h2>\n
\u015eimdi, ToDo ekleme ve listeleme i\u015flemlerini ger\u00e7ekle\u015ftirecek fonksiyonlar\u0131 yazal\u0131m. \u00d6ncelikle,  bir state de\u011fi\u015fkeni tan\u0131mlayarak ToDo listesini saklayabiliriz. Bu state de\u011fi\u015fkeni, yeni ToDo eklendi\u011finde veya silindi\u011finde g\u00fcncellenecektir.  Yeni bir ToDo eklemek i\u00e7in, bir form kullanarak kullan\u0131c\u0131n\u0131n ToDo i\u00e7eri\u011fini girmesini sa\u011flayabilir ve ard\u0131ndan bu i\u00e7eri\u011fi state’e ekleyebiliriz.  ToDo listesini g\u00f6r\u00fcnt\u00fclemek i\u00e7in ise, state’deki ToDo’lar\u0131 d\u00f6ng\u00fc ile listeleyebiliriz.<\/p>\n
\n\/\/ ... Context API kullanarak state y\u00f6netimi ...\n\nconst addTodo = (text) => {\n  setTodos([...todos, { id: Date.now(), text, completed: false }]);\n};\n\nconst renderTodoList = () => {\n  return todos.map((todo) => (\n    <View key={todo.id}>\n      <Text>{todo.text}<\/Text>\n      <Button title=\"Sil\" onPress={() => deleteTodo(todo.id)} \/>\n    <\/View>\n  ));\n};\n<\/code><\/pre>\n
Performans Optimizasyonu<\/h2>\n
Uygulamam\u0131z\u0131n performans\u0131n\u0131 optimize etmek i\u00e7in, birka\u00e7 \u00f6nemli noktaya dikkat etmeliyiz.  \u00d6rne\u011fin, b\u00fcy\u00fck listelerde render performans\u0131n\u0131 iyile\u015ftirmek i\u00e7in FlatList veya SectionList bile\u015fenlerini kullanabiliriz.  Bu bile\u015fenler, sadece g\u00f6r\u00fcn\u00fcr \u00f6\u011feleri render ederek performans\u0131 art\u0131r\u0131rlar. Ayr\u0131ca, gereksiz render i\u015flemlerini \u00f6nlemek i\u00e7in useMemo ve useCallback hook’lar\u0131n\u0131 kullanabiliriz.  Bunlar, fonksiyonlar\u0131n tekrar tekrar \u00e7al\u0131\u015fmas\u0131n\u0131 \u00f6nleyerek performans\u0131 art\u0131r\u0131r. <\/p>\n
Daha fazla performans iyile\u015ftirmesi i\u00e7in, React Native’in optimize edilmi\u015f yerel bile\u015fenlerini kullanmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz.  Ayr\u0131ca, kodunuzu d\u00fczenli ve okunabilir tutarak bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131rabilirsiniz.  Bu, gelecekte performans sorunlar\u0131n\u0131 gidermeyi kolayla\u015ft\u0131racakt\u0131r.  Ayr\u0131ca, gereksiz veri transferini \u00f6nlemek i\u00e7in, verilerinizi do\u011fru bir \u015fekilde yap\u0131land\u0131rmal\u0131 ve gereksiz verileri filtrelemelisiniz.<\/p>\n
Uygulamam\u0131z\u0131 Geni\u015fletmek<\/h2>\n
Bu basit ToDo uygulamas\u0131n\u0131 daha da geli\u015ftirmek i\u00e7in, bir\u00e7ok \u00f6zellik ekleyebilirsiniz.  \u00d6rne\u011fin, ToDo’lar\u0131 tamamland\u0131 olarak i\u015faretleme, ToDo’lar\u0131 kategorilere ay\u0131rma,  arama \u00f6zelli\u011fi ekleme gibi \u00f6zellikler uygulaman\u0131za de\u011fer katacakt\u0131r.  Bunlar\u0131 eklerken,  uygulaman\u0131z\u0131n temiz ve okunabilir kalmas\u0131na dikkat etmelisiniz.  \u0130yi bir mimari,  uygulaman\u0131z\u0131n \u00f6l\u00e7eklenebilirli\u011fini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131racakt\u0131r.<\/p>\n
Umar\u0131m bu makale size React Native ile ToDo uygulamas\u0131 geli\u015ftirmede yard\u0131mc\u0131 olmu\u015ftur.  Daha fazla bilgi ve kaynak i\u00e7in fatihsoysal.com<\/a> sitesini ziyaret edebilirsiniz.  Ayr\u0131ca, React Native belgelerini ve topluluk forumlar\u0131n\u0131 da inceleyebilirsiniz.   Ba\u015far\u0131lar!<\/p>\n
Faydal\u0131 bulabilece\u011finiz baz\u0131 kaynaklar:<\/p>\n