{"id":31975,"date":"2025-10-16T08:01:30","date_gmt":"2025-10-16T05:01:30","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/neden-go-ve-react-ikilisi-kisisel-blog-projeleri-icin-ideal-bir-secimdir\/"},"modified":"2025-10-16T08:01:30","modified_gmt":"2025-10-16T05:01:30","slug":"neden-go-ve-react-ikilisi-kisisel-blog-projeleri-icin-ideal-bir-secimdir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/neden-go-ve-react-ikilisi-kisisel-blog-projeleri-icin-ideal-bir-secimdir\/","title":{"rendered":"Neden Go ve React \u0130kilisi Ki\u015fisel Blog Projeleri \u0130\u00e7in \u0130deal Bir Se\u00e7imdir?"},"content":{"rendered":"

Go ve React ile Ki\u015fisel Blogunuzu Ba\u015ftan Sona \u0130n\u015fa Edin: Kapsaml\u0131 Rehber<\/h1>\n

Bir\u00e7o\u011fumuz kendi fikirlerimizi, deneyimlerimizi veya teknik bilgilerimizi payla\u015fmak i\u00e7in bir blog sahibi olma hayalini kurar\u0131z. Haz\u0131r platformlar ba\u015flang\u0131\u00e7 i\u00e7in cazip g\u00f6r\u00fcnse de, zamanla ki\u015fiselle\u015ftirme eksiklikleri, performans k\u0131s\u0131tlamalar\u0131 veya maliyet engelleriyle kar\u015f\u0131la\u015fabiliriz. Peki ya kendi platformunuzu, en modern ve g\u00fc\u00e7l\u00fc teknolojilerle s\u0131f\u0131rdan in\u015fa etseniz? Go (Golang) ve React ikilisi, tam da bu noktada devreye girerek size h\u0131zl\u0131, esnek ve tamamen kontrol edilebilir bir ki\u015fisel blog ortam\u0131 sunar. Bu makale, bu heyecan verici yolculukta size ad\u0131m ad\u0131m rehberlik edecek, her a\u015famada kar\u015f\u0131la\u015fabilece\u011finiz zorluklar\u0131 a\u015fman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n

Ki\u015fisel blogunuzu kurarken do\u011fru teknoloji stack’ini se\u00e7mek, projenizin uzun vadeli ba\u015far\u0131s\u0131 ve s\u00fcrd\u00fcr\u00fclebilirli\u011fi i\u00e7in kritik \u00f6neme sahiptir. Piyasada bir\u00e7ok backend ve frontend alternatifi bulunsa da, Go ve React kombinasyonu, \u00f6zellikle performans, geli\u015ftirici deneyimi ve \u00f6l\u00e7eklenebilirlik a\u00e7\u0131s\u0131ndan benzersiz avantajlar sunar. Bu ikili, modern web uygulamas\u0131 geli\u015ftirme paradigmas\u0131n\u0131n temel ta\u015flar\u0131ndan baz\u0131lar\u0131n\u0131 temsil eder ve ki\u015fisel blogunuz i\u00e7in sa\u011flam bir temel olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n

Go (Golang), Google taraf\u0131ndan geli\u015ftirilen, statik tipli, derlenmi\u015f bir programlama dilidir. Temel amac\u0131, C++’\u0131n performans\u0131n\u0131 ve Python’\u0131n geli\u015ftirme kolayl\u0131\u011f\u0131n\u0131 birle\u015ftirmektir. Go’nun \u00f6ne \u00e7\u0131kan \u00f6zellikleri aras\u0131nda m\u00fckemmel e\u015fzamanl\u0131l\u0131k deste\u011fi (goroutine’ler ve kanallar), h\u0131zl\u0131 derleme s\u00fcreleri ve k\u00fc\u00e7\u00fck bellek ayak izi yer al\u0131r. Bir blogun backend’i i\u00e7in Go kullanmak, \u00f6zellikle y\u00fcksek trafikli anlarda bile h\u0131zl\u0131 yan\u0131t s\u00fcreleri ve d\u00fc\u015f\u00fck sunucu maliyetleri anlam\u0131na gelir. Go’nun sade ve anla\u015f\u0131l\u0131r s\u00f6zdizimi, karma\u015f\u0131k API’ler olu\u015fturmay\u0131 bile olduk\u00e7a basit hale getirir. \u00d6rne\u011fin, bir blog yaz\u0131s\u0131 verisini veritaban\u0131ndan \u00e7ekip JSON format\u0131nda sunmak, Go ile olduk\u00e7a verimli bir \u015fekilde ger\u00e7ekle\u015ftirilebilir. Ayr\u0131ca, Go’nun g\u00fc\u00e7l\u00fc standart k\u00fct\u00fcphanesi sayesinde, ek \u00fc\u00e7\u00fcnc\u00fc parti paketlere olan ba\u011f\u0131ml\u0131l\u0131k minimize edilir, bu da projenin bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. Go’nun statik tipli yap\u0131s\u0131, derleme zaman\u0131nda bir\u00e7ok hatay\u0131 yakalamaya yard\u0131mc\u0131 olurken, dilin kendi ara\u00e7lar\u0131 (gofmt gibi) kod kalitesini ve tutarl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flamaya katk\u0131da bulunur.<\/p>\n

React ise Facebook taraf\u0131ndan geli\u015ftirilen, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fen tabanl\u0131 mimarisi sayesinde, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir par\u00e7alara b\u00f6lerek geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve kolayla\u015ft\u0131r\u0131r. Bir blogda, navigasyon men\u00fcs\u00fc, yaz\u0131 kartlar\u0131, yorum b\u00f6l\u00fcmleri gibi her bir \u00f6ge ayr\u0131 bir React bile\u015feni olarak tasarlanabilir. Bu yakla\u015f\u0131m, kodun daha d\u00fczenli olmas\u0131n\u0131 sa\u011flar ve gelecekteki de\u011fi\u015fiklikleri veya yeni \u00f6zellik eklemelerini kolayla\u015ft\u0131r\u0131r. React’\u0131n sanal DOM (Virtual DOM) mekanizmas\u0131, ger\u00e7ek DOM \u00fczerinde do\u011frudan manip\u00fclasyon yapmak yerine \u00f6nce sanal bir kopyay\u0131 g\u00fcncelleyip ard\u0131ndan yaln\u0131zca gerekli de\u011fi\u015fiklikleri ger\u00e7ek DOM’a yans\u0131tarak \u00fcst\u00fcn bir performans sunar. Bu, blogunuzun sayfalar\u0131 aras\u0131nda gezinirken veya i\u00e7erik y\u00fcklerken ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sa\u011flar. Geni\u015f ve aktif bir toplulu\u011fa sahip olmas\u0131, React i\u00e7in s\u00fcrekli g\u00fcncellenen k\u00fct\u00fcphaneler, ara\u00e7lar ve bol miktarda \u00f6\u011frenme kayna\u011f\u0131 anlam\u0131na gelir. Bu da herhangi bir sorunla kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131zda h\u0131zl\u0131ca \u00e7\u00f6z\u00fcm bulabilmenizi sa\u011flar.<\/p>\n

Go ve React’\u0131n bir araya gelmesiyle elde edilen sinerji olduk\u00e7a g\u00fc\u00e7l\u00fcd\u00fcr. Go, blogunuzun arka ucunda verileri g\u00fcvenli ve h\u0131zl\u0131 bir \u015fekilde y\u00f6netirken (yaz\u0131lar, yorumlar, kullan\u0131c\u0131 bilgileri vb.), React bu verileri dinamik ve interaktif bir \u00f6n y\u00fczde sergiler. Backend’iniz API endpoint’leri arac\u0131l\u0131\u011f\u0131yla veri sunarken, frontend’iniz bu API’leri t\u00fcketerek kullan\u0131c\u0131ya zengin bir deneyim sunar. Bu ayr\u0131k mimari (decoupled architecture), her iki taraf\u0131n da birbirinden ba\u011f\u0131ms\u0131z olarak geli\u015ftirilmesine ve \u00f6l\u00e7eklendirilmesine olanak tan\u0131r. \u00d6rne\u011fin, Go backend’inizi mobil uygulamalar i\u00e7in de kullanabilirken, React frontend’inizi farkl\u0131 bir backend ile de entegre edebilirsiniz. Bu esneklik, ki\u015fisel blog projenizi sadece bir blog olmaktan \u00e7\u0131kar\u0131p gelecekte farkl\u0131 bir uygulama platformuna d\u00f6n\u00fc\u015ft\u00fcrmek istedi\u011finizde size b\u00fcy\u00fck bir avantaj sa\u011flar. Dolay\u0131s\u0131yla, Go’nun performans\u0131 ve React’\u0131n kullan\u0131c\u0131 deneyimi odakl\u0131 yakla\u015f\u0131m\u0131, ki\u015fisel blogunuz i\u00e7in modern, h\u0131zl\u0131 ve esnek bir temel olu\u015fturman\u0131n en iyi yollar\u0131ndan biridir.<\/p>\n

Go ile G\u00fc\u00e7l\u00fc ve H\u0131zl\u0131 Bir Blog API’si Nas\u0131l Geli\u015ftirilir? Ad\u0131m Ad\u0131m Rehber<\/h2>\n

Ki\u015fisel blogunuzun kalbi, verilerinizi y\u00f6neten ve i\u00e7eri\u011fi \u00f6n uca sunan Go tabanl\u0131 API’niz olacakt\u0131r. Bu b\u00f6l\u00fcmde, Go ile sa\u011flam, h\u0131zl\u0131 ve g\u00fcvenli bir RESTful API’yi nas\u0131l ad\u0131m ad\u0131m olu\u015fturaca\u011f\u0131n\u0131z\u0131 ke\u015ffedece\u011fiz. Amac\u0131m\u0131z, blog yaz\u0131lar\u0131n\u0131 olu\u015fturma, okuma, g\u00fcncelleme ve silme (CRUD) i\u015flemlerini destekleyen bir yap\u0131 kurmak ve kullan\u0131c\u0131 kimlik do\u011frulamas\u0131n\u0131 (authentication) JWT (JSON Web Tokens) ile sa\u011flamakt\u0131r.<\/p>\n

\u0130lk olarak, Go projemizi ba\u015flatmam\u0131z gerekiyor. Terminalde go mod init blog-api<\/code> komutunu \u00e7al\u0131\u015ft\u0131rarak yeni bir Go mod\u00fcl\u00fc olu\u015fturabiliriz. Daha sonra, HTTP isteklerini daha kolay y\u00f6nlendirmek i\u00e7in Gorilla Mux gibi bir router k\u00fct\u00fcphanesi kullanabiliriz. Projenizin ana dizininde main.go<\/code> ad\u0131nda bir dosya olu\u015ftural\u0131m:<\/p>\n

package main\n\nimport (\n\t\"fmt\"\n\t\"log\"\n\t\"net\/http\"\n\t\"github.com\/gorilla\/mux\" \/\/ Router k\u00fct\u00fcphanesi\n)\n\nfunc main() {\n\trouter := mux.NewRouter()\n\n\t\/\/ Ana sayfa route'u\n\trouter.HandleFunc(\"\/\", func(w http.ResponseWriter, r *http.Request) {\n\t\tfmt.Fprint(w, \"Merhaba, Go Blog API'sine ho\u015f geldiniz!\")\n\t}).Methods(\"GET\")\n\n\t\/\/ API'mizi 8080 portunda dinlemeye ba\u015fla\n\tfmt.Println(\"Sunucu 8080 portunda ba\u015flat\u0131ld\u0131...\")\n\tlog.Fatal(http.ListenAndServe(\":8080\", router))\n}<\/pre>\n
<\/code><\/p>\n
Bu ba\u015flang\u0131\u00e7 yap\u0131s\u0131 ile temel bir Go web sunucusu kurmu\u015f olduk. \u015eimdi, blog yaz\u0131lar\u0131 i\u00e7in bir veritaban\u0131 se\u00e7imi yapal\u0131m. \u00c7o\u011fu blog projesi i\u00e7in PostgreSQL m\u00fckemmel bir se\u00e7enektir; g\u00fc\u00e7l\u00fc, a\u00e7\u0131k kaynakl\u0131 ve g\u00fcvenilirdir. Veritaban\u0131 ile etkile\u015fim kurmak i\u00e7in database\/sql<\/code> paketini ve PostgreSQL s\u00fcr\u00fcc\u00fcs\u00fc olarak github.com\/lib\/pq<\/code>'yu kullanabiliriz. Veritaban\u0131 ba\u011flant\u0131s\u0131 ve blog yaz\u0131s\u0131 yap\u0131s\u0131n\u0131 tan\u0131mlayal\u0131m:<\/p>\n
\/\/ models.go\npackage main\n\nimport \"time\"\n\n\/\/ BlogPost veritaban\u0131ndaki bir blog yaz\u0131s\u0131n\u0131 temsil eder\ntype BlogPost struct {\n\tID        string    json:\"id\"<\/code>\n\tTitle     string    json:\"title\"<\/code>\n\tContent   string    json:\"content\"<\/code>\n\tAuthor    string    json:\"author\"<\/code>\n\tCreatedAt time.Time json:\"created_at\"<\/code>\n\tUpdatedAt time.Time json:\"updated_at\"<\/code>\n}\n\n\/\/ User veritaban\u0131ndaki bir kullan\u0131c\u0131y\u0131 temsil eder\ntype User struct {\n\tID       string json:\"id\"<\/code>\n\tUsername string json:\"username\"<\/code>\n\tPassword string json:\"-\"<\/code> \/\/ \u015eifrenin JSON'a dahil edilmemesi i\u00e7in\n}<\/pre>\n
<\/code><\/p>\n
Ard\u0131ndan, veritaban\u0131 ba\u011flant\u0131m\u0131z\u0131 main.go<\/code> dosyam\u0131zda ba\u015flatabiliriz. Ger\u00e7ek d\u00fcnya senaryolar\u0131nda, veritaban\u0131 ba\u011flant\u0131 bilgilerini do\u011frudan koda yazmak yerine ortam de\u011fi\u015fkenlerinden (environment variables) veya bir yap\u0131land\u0131rma dosyas\u0131ndan okumak daha g\u00fcvenlidir.<\/p>\n
\/\/ main.go (veritaban\u0131 ba\u011flant\u0131s\u0131 eklendi)\npackage main\n\nimport (\n\t\"database\/sql\"\n\t\"fmt\"\n\t\"log\"\n\t\"net\/http\"\n\t\"os\"\n\n\t\"github.com\/gorilla\/mux\"\n\t_ \"github.com\/lib\/pq\" \/\/ PostgreSQL s\u00fcr\u00fcc\u00fcs\u00fc\n)\n\nvar db *sql.DB \/\/ Global veritaban\u0131 ba\u011flant\u0131s\u0131\n\nfunc init() {\n\t\/\/ Veritaban\u0131 ba\u011flant\u0131s\u0131n\u0131 ba\u015flat\n\tvar err error\n\tconnStr := os.Getenv(\"DATABASE_URL\") \/\/ Ortam de\u011fi\u015fkeninden oku\n\tif connStr == \"\" {\n\t\t\/\/ \u00d6rnek: \"postgres:\/\/user:password@host:port\/dbname?sslmode=disable\"\n\t\tlog.Fatal(\"DATABASE_URL ortam de\u011fi\u015fkeni tan\u0131ml\u0131 de\u011fil.\")\n\t}\n\tdb, err = sql.Open(\"postgres\", connStr)\n\tif err != nil {\n\t\tlog.Fatal(err)\n\t}\n\n\terr = db.Ping()\n\tif err != nil {\n\t\tlog.Fatal(err)\n\t}\n\tfmt.Println(\"Veritaban\u0131 ba\u011flant\u0131s\u0131 ba\u015far\u0131l\u0131!\")\n\n\t\/\/ Tablolar\u0131 olu\u015ftur (varsa atla)\n\tcreateTablesSQL := CREATE TABLE IF NOT EXISTS blog_posts (\n\t\t\tid UUID PRIMARY KEY DEFAULT gen_random_uuid(),\n\t\t\ttitle VARCHAR(255) NOT NULL,\n\t\t\tcontent TEXT NOT NULL,\n\t\t\tauthor VARCHAR(255) NOT NULL,\n\t\t\tcreated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,\n\t\t\tupdated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP\n\t\t);\n\n\t\tCREATE TABLE IF NOT EXISTS users (\n\t\t\tid UUID PRIMARY KEY DEFAULT gen_random_uuid(),\n\t\t\tusername VARCHAR(255) UNIQUE NOT NULL,\n\t\t\tpassword VARCHAR(255) NOT NULL\n\t\t);<\/code>\n\t_, err = db.Exec(createTablesSQL)\n\tif err != nil {\n\t\tlog.Fatalf(\"Tablolar olu\u015fturulurken hata olu\u015ftu: %v\", err)\n\t}\n\tfmt.Println(\"Veritaban\u0131 tablolar\u0131 kontrol edildi\/olu\u015fturuldu.\")\n}\n\nfunc main() {\n\trouter := mux.NewRouter()\n\t\/\/ ... (route tan\u0131mlar\u0131 buraya gelecek)\n\t\/\/ JWT middleware'i ve handler'lar\n\tlog.Fatal(http.ListenAndServe(\":8080\", router))\n}<\/pre>\n
<\/code><\/p>\n
\u015eimdi temel CRUD i\u015flemlerini ele alal\u0131m. \u00d6rne\u011fin, yeni bir blog yaz\u0131s\u0131 olu\u015fturmak i\u00e7in bir handler fonksiyonuna ihtiyac\u0131m\u0131z var. Bu handler, gelen JSON iste\u011fini BlogPost<\/code> struct'\u0131na \u00e7\u00f6z\u00fcmler ve veritaban\u0131na kaydeder.<\/p>\n
\/\/ handlers.go (main.go'dan ayr\u0131 bir dosya veya ayn\u0131 dosyaya eklenebilir)\npackage main\n\nimport (\n\t\"encoding\/json\"\n\t\"fmt\"\n\t\"io\/ioutil\"\n\t\"net\/http\"\n\t\"time\"\n\n\t\"github.com\/gorilla\/mux\"\n)\n\n\/\/ createPost yeni bir blog yaz\u0131s\u0131 olu\u015fturur\nfunc createPost(w http.ResponseWriter, r *http.Request) {\n\tvar post BlogPost\n\tbody, err := ioutil.ReadAll(r.Body)\n\tif err != nil {\n\t\thttp.Error(w, \"\u0130stek g\u00f6vdesi okunamad\u0131\", http.StatusBadRequest)\n\t\treturn\n\t}\n\n\terr = json.Unmarshal(body, &post)\n\tif err != nil {\n\t\thttp.Error(w, \"JSON \u00e7\u00f6z\u00fcmlenirken hata olu\u015ftu\", http.StatusBadRequest)\n\t\treturn\n\t}\n\n\t\/\/ Yazar alan\u0131n\u0131 g\u00fcvenlik nedeniyle, yetkilendirme sonras\u0131 kullan\u0131c\u0131 ID'sinden almal\u0131y\u0131z.\n\t\/\/ \u015eimdilik varsay\u0131lan bir yazar atayal\u0131m.\n\tpost.Author = \"Admin\" \/\/ Ger\u00e7ek uygulamada JWT ile gelen kullan\u0131c\u0131dan al\u0131nmal\u0131\n\n\t\/\/ Veritaban\u0131na kaydet\n\terr = db.QueryRow(\n\t\t\"INSERT INTO blog_posts(title, content, author) VALUES($1, $2, $3) RETURNING id, created_at, updated_at\",\n\t\tpost.Title, post.Content, post.Author,\n\t).Scan(&post.ID, &post.CreatedAt, &post.UpdatedAt)\n\n\tif err != nil {\n\t\thttp.Error(w, fmt.Sprintf(\"Veritaban\u0131na kaydederken hata olu\u015ftu: %v\", err), http.StatusInternalServerError)\n\t\treturn\n\t}\n\n\tw.Header().Set(\"Content-Type\", \"application\/json\")\n\tw.WriteHeader(http.StatusCreated)\n\tjson.NewEncoder(w).Encode(post)\n}\n\n\/\/ getPosts t\u00fcm blog yaz\u0131lar\u0131n\u0131 getirir\nfunc getPosts(w http.ResponseWriter, r *http.Request) {\n\trows, err := db.Query(\"SELECT id, title, content, author, created_at, updated_at FROM blog_posts ORDER BY created_at DESC\")\n\tif err != nil {\n\t\thttp.Error(w, fmt.Sprintf(\"Yaz\u0131lar \u00e7ekilirken hata olu\u015ftu: %v\", err), http.StatusInternalServerError)\n\t\treturn\n\t}\n\tdefer rows.Close()\n\n\tvar posts []BlogPost\n\tfor rows.Next() {\n\t\tvar post BlogPost\n\t\tif err := rows.Scan(&post.ID, &post.Title, &post.Content, &post.Author, &post.CreatedAt, &post.UpdatedAt); err != nil {\n\t\t\thttp.Error(w, fmt.Sprintf(\"Yaz\u0131 taran\u0131rken hata olu\u015ftu: %v\", err), http.StatusInternalServerError)\n\t\t\treturn\n\t\t}\n\t\tposts = append(posts, post)\n\t}\n\n\tw.Header().Set(\"Content-Type\", \"application\/json\")\n\tjson.NewEncoder(w).Encode(posts)\n}\n\n\/\/ main.go dosyas\u0131nda route'lar:\n\/\/ router.HandleFunc(\"\/posts\", createPost).Methods(\"POST\")\n\/\/ router.HandleFunc(\"\/posts\", getPosts).Methods(\"GET\")<\/pre>\n
<\/code><\/p>\n
Bu kod par\u00e7alar\u0131, Go API'nizin nas\u0131l \u015fekillenece\u011fine dair sa\u011flam bir temel sunuyor. G\u00fcncelleme ve silme i\u015flemleri i\u00e7in de benzer handler'lar yaz\u0131labilir. Ger\u00e7ek d\u00fcnya senaryosunda, bir blog y\u00f6neticisinin admin panelinden yeni bir yaz\u0131 eklemesi veya mevcut bir yaz\u0131y\u0131 d\u00fczenlemesi, bu API endpoint'leri arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015fir. \u00d6rne\u011fin, y\u00f6netici blog paneline giri\u015f yapar, \"Yeni Yaz\u0131 Ekle\" butonuna t\u0131klar, ba\u015fl\u0131k ve i\u00e7eri\u011fi girer ve \"Yay\u0131nla\" tu\u015funa basar. Bu eylem, React frontend'inden Go backend'indeki createPost<\/code> endpoint'ine bir POST iste\u011fi g\u00f6nderir ve yaz\u0131 veritaban\u0131na kaydedilir. Y\u00f6netici daha sonra \"T\u00fcm Yaz\u0131lar\" sayfas\u0131nda yeni yaz\u0131s\u0131n\u0131 g\u00f6rebilir, bu da getPosts<\/code> endpoint'inden veri \u00e7ekilerek sa\u011flan\u0131r.<\/p>\n
G\u00fcvenlik, herhangi bir web uygulamas\u0131n\u0131n olmazsa olmaz\u0131d\u0131r. \u00d6zellikle blog yaz\u0131lar\u0131n\u0131 olu\u015fturma, g\u00fcncelleme ve silme gibi hassas i\u015flemler i\u00e7in kimlik do\u011frulama gereklidir. JWT (JSON Web Tokens), durum bilgisi olmayan (stateless) bir kimlik do\u011frulama mekanizmas\u0131 sunar ve Go API'leri i\u00e7in pop\u00fcler bir se\u00e7imdir. Kullan\u0131c\u0131 giri\u015f yapt\u0131\u011f\u0131nda, sunucu bir JWT olu\u015fturur ve istemciye g\u00f6nderir. \u0130stemci, sonraki her istekte bu token'\u0131 Authorization<\/code> ba\u015fl\u0131\u011f\u0131nda g\u00f6nderir ve sunucu token'\u0131 do\u011frulayarak kullan\u0131c\u0131n\u0131n yetkili olup olmad\u0131\u011f\u0131n\u0131 kontrol eder. Bu, blog yaz\u0131lar\u0131 gibi \u00f6zel i\u00e7eriklerin sadece yetkili ki\u015filer taraf\u0131ndan y\u00f6netilebilmesini sa\u011flar. Go'da JWT entegrasyonu i\u00e7in github.com\/dgrijalva\/jwt-go<\/code> gibi k\u00fct\u00fcphaneler kullan\u0131labilir. Bu sayede, blogunuz sadece herkese a\u00e7\u0131k i\u00e7erik sunmakla kalmaz, ayn\u0131 zamanda i\u00e7eri\u011finizi g\u00fcvenli bir \u015fekilde y\u00f6netmenize de olanak tan\u0131r.<\/p>\n
\n  Uzman \u0130pucu: Go'da API geli\u015ftirirken, hata y\u00f6netimine b\u00fcy\u00fck \u00f6nem verin. Her bir olas\u0131 hata durumunu ele almak, uygulaman\u0131z\u0131n daha kararl\u0131 ve g\u00fcvenilir olmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, API endpoint'leriniz i\u00e7in rate limiting (h\u0131z s\u0131n\u0131rlama) ve CORS (Cross-Origin Resource Sharing) yap\u0131land\u0131rmalar\u0131n\u0131 da eklemeyi unutmay\u0131n. CORS, React frontend'inizin farkl\u0131 bir port veya domain \u00fczerinde \u00e7al\u0131\u015fmas\u0131 durumunda API'nize eri\u015febilmesi i\u00e7in gereklidir.\n<\/div>\n
Modern Bir React Frontend ile Blog Deneyimi Nas\u0131l Tasarlan\u0131r?<\/h2>\n
Ki\u015fisel blogunuzun Go tabanl\u0131 API'si i\u00e7eri\u011fi ve verileri y\u00f6netirken, React tabanl\u0131 \u00f6n y\u00fcz\u00fc, bu i\u00e7eri\u011fi kullan\u0131c\u0131lar\u0131n\u0131za estetik ve etkile\u015fimli bir \u015fekilde sunar. React'\u0131n bile\u015fen tabanl\u0131 mimarisi sayesinde, blogunuzun her bir par\u00e7as\u0131n\u0131 ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir bile\u015fenler halinde in\u015fa edebiliriz. Bu yakla\u015f\u0131m, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r, kod kalitesini art\u0131r\u0131r ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n
\u0130lk ad\u0131m, yeni bir React projesi olu\u015fturmakt\u0131r. Modern web geli\u015ftirme ekosisteminde, proje kurulumu i\u00e7in Vite veya Create React App (CRA) gibi ara\u00e7lar olduk\u00e7a pop\u00fclerdir. Vite, \u00f6zellikle daha h\u0131zl\u0131 geli\u015ftirme sunucusu ve daha k\u00fc\u00e7\u00fck \u00fcretim build boyutlar\u0131 ile \u00f6ne \u00e7\u0131kar. Terminalde \u015fu komutla bir React projesi ba\u015flatabiliriz:<\/p>\n
npm create vite@latest my-blog-frontend -- --template react\ncd my-blog-frontend\nnpm install\nnpm run dev<\/pre>\n
<\/code><\/p>\n
Bu komutlar, my-blog-frontend<\/code> ad\u0131nda yeni bir React projesi olu\u015fturacak, ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyecek ve geli\u015ftirme sunucusunu ba\u015flatacakt\u0131r. Taray\u0131c\u0131n\u0131zda http:\/\/localhost:5173<\/code> (veya ba\u015fka bir port) adresine giderek varsay\u0131lan React uygulamas\u0131n\u0131 g\u00f6rebilirsiniz.<\/p>\n
Blogunuzun \u00f6n y\u00fcz\u00fcn\u00fc tasarlarken, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc mant\u0131ksal par\u00e7alara b\u00f6lmek en iyi yakla\u015f\u0131md\u0131r. \u00d6rne\u011fin, bir blog genellikle \u015fu temel bile\u015fenlere sahiptir:<\/p>\n
*   Header (Ba\u015fl\u0131k Alan\u0131):<\/strong> Logo, blog ad\u0131, navigasyon linkleri (Anasayfa, Hakk\u0131m\u0131zda, \u0130leti\u015fim, Y\u00f6netim Paneli).
\n*   Footer (Alt Bilgi Alan\u0131):<\/strong> Telif hakk\u0131 bilgileri, sosyal medya linkleri.
\n*   PostCard (Yaz\u0131 Kart\u0131):<\/strong> Ana sayfada her bir blog yaz\u0131s\u0131n\u0131 \u00f6zetleyen bile\u015fen (ba\u015fl\u0131k, yazar, yay\u0131n tarihi, k\u0131sa a\u00e7\u0131klama, g\u00f6rsel).
\n*   SinglePost (Tek Yaz\u0131 Sayfas\u0131):<\/strong> Tam blog yaz\u0131s\u0131n\u0131n i\u00e7eri\u011fini, yorumlar\u0131 ve belki de ilgili yaz\u0131lar\u0131 g\u00f6steren bile\u015fen.
\n*   Router:<\/strong> Farkl\u0131 sayfalar aras\u0131nda gezinmeyi sa\u011flayan yap\u0131 (React Router DOM).<\/p>\n
\u015eimdi, basit bir PostCard<\/code> bile\u015feni ve API'den veri \u00e7ekme \u00f6rne\u011fini inceleyelim. Blog yaz\u0131lar\u0131n\u0131 Go API'mizden \u00e7ekmek i\u00e7in fetch<\/code> API'sini veya axios<\/code> gibi \u00fc\u00e7\u00fcnc\u00fc parti bir k\u00fct\u00fcphaneyi kullanabiliriz. axios<\/code>, hata y\u00f6netimi ve istek iptali gibi ek \u00f6zellikler sundu\u011fu i\u00e7in genellikle tercih edilir.<\/p>\n
\/\/ src\/components\/PostCard.jsx\nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\nfunction PostCard({ post }) {\n  const formattedDate = new Date(post.created_at).toLocaleDateString('tr-TR', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric'\n  });\n\n  return (\n    
\n      
\n        \/posts\/${post.id}<\/code>}>{post.title}<\/Link>\n      <\/h3>\n      
\n        Yazan: {post.author} | {formattedDate}\n      <\/p>\n      
{post.content.substring(0, 150)}...<\/p>\n      \/posts\/${post.id}<\/code>} className=\"read-more\">Devam\u0131n\u0131 Oku<\/Link>\n    <\/div>\n  );\n}\n\nexport default PostCard;<\/pre>\n
<\/code><\/p>\n
Bu PostCard<\/code> bile\u015feni, ana sayfada her bir blog yaz\u0131s\u0131n\u0131 temsil etmek i\u00e7in kullan\u0131lacak. Link<\/code> bile\u015feni react-router-dom<\/code>'dan gelir ve kullan\u0131c\u0131y\u0131 t\u0131klanan yaz\u0131n\u0131n tam sayfas\u0131na y\u00f6nlendirir.<\/p>\n
\u015eimdi, ana sayfada t\u00fcm blog yaz\u0131lar\u0131n\u0131 Go API'mizden nas\u0131l \u00e7ekece\u011fimizi ve PostCard<\/code> bile\u015fenlerini kullanarak nas\u0131l listeleyece\u011fimizi g\u00f6relim:<\/p>\n
\/\/ src\/pages\/HomePage.jsx\nimport React, { useState, useEffect } from 'react';\nimport PostCard from '..\/components\/PostCard';\nimport axios from 'axios'; \/\/ npm install axios\n\nfunction HomePage() {\n  const [posts, setPosts] = useState([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    const fetchPosts = async () => {\n      try {\n        const response = await axios.get('http:\/\/localhost:8080\/posts'); \/\/ Go API adresiniz\n        setPosts(response.data);\n      } catch (err) {\n        setError('Blog yaz\u0131lar\u0131n\u0131 y\u00fcklerken bir hata olu\u015ftu.');\n        console.error('API Hatas\u0131:', err);\n      } finally {\n        setLoading(false);\n      }\n    };\n    fetchPosts();\n  }, []); \/\/ Bo\u015f ba\u011f\u0131ml\u0131l\u0131k dizisi, bile\u015fen y\u00fcklendi\u011finde bir kez \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar\n\n  if (loading) return 
Yaz\u0131lar y\u00fckleniyor...<\/div>;\n  if (error) return 
{error}<\/div>;\n\n  return (\n    
\n      
En Son Blog Yaz\u0131lar\u0131<\/h2>\n      
\n        {posts.length > 0 ? (\n          posts.map(post => (\n            \n          ))\n        ) : (\n          
Hen\u00fcz hi\u00e7 blog yaz\u0131s\u0131 bulunmamaktad\u0131r.<\/p>\n        )}\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default HomePage;<\/pre>\n
<\/code><\/p>\n
Bu HomePage<\/code> bile\u015feni, React'\u0131n useState<\/code> hook'unu kullanarak bile\u015fenin durumunu (yaz\u0131lar, y\u00fcklenme durumu, hata) y\u00f6netir. useEffect<\/code> hook'u ise bile\u015fen ilk y\u00fcklendi\u011finde Go API'mizden http:\/\/localhost:8080\/posts<\/code> adresine bir GET iste\u011fi g\u00f6ndererek blog yaz\u0131lar\u0131n\u0131 \u00e7eker. Bu veri, daha sonra PostCard<\/code> bile\u015fenlerine props olarak iletilir ve sayfada listelenir. Bu, Go backend'i ile React frontend'i aras\u0131ndaki temel veri ak\u0131\u015f\u0131n\u0131 g\u00f6steren bir \u00f6rnektir.<\/p>\n
Routing i\u00e7in react-router-dom<\/code> k\u00fct\u00fcphanesini kullanabiliriz. App.jsx<\/code> dosyam\u0131zda farkl\u0131 rotalar\u0131 tan\u0131mlayarak blogunuzun farkl\u0131 sayfalar\u0131n\u0131 olu\u015fturabiliriz:<\/p>\n
\/\/ src\/App.jsx\nimport React from 'react';\nimport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\nimport HomePage from '.\/pages\/HomePage';\nimport SinglePostPage from '.\/pages\/SinglePostPage'; \/\/ Tek bir yaz\u0131y\u0131 g\u00f6sterecek sayfa\nimport Header from '.\/components\/Header';\nimport Footer from '.\/components\/Footer';\nimport '.\/App.css'; \/\/ Global stiller\n\nfunction App() {\n  return (\n    \n      
\n      
\n        \n          } \/>\n          } \/>\n          {\/* Di\u011fer rotalar buraya eklenebilir (\u00f6rn. admin paneli) *\/}\n        <\/Routes>\n      <\/main>\n