Modern Web Uygulaması: FastAPI & React TypeScript ile Geliştirme

Modern Web Uygulaması: FastAPI & React TypeScript ile Geliştirme

Merhaba! Fatih Soysal olarak, bu yazıda sizlere FastAPI (backend) ve React ile TypeScript (frontend) kullanarak modern bir web uygulaması nasıl geliştirebileceğinizi adım adım göstereceğim. Bu güçlü teknolojilerin birleşimi, hızlı, ölçeklenebilir ve sürdürülebilir uygulamalar oluşturmanıza olanak tanır. Öncelikle her iki teknolojinin avantajlarına değinelim.

FastAPI: Hızlı ve Verimli Backend

FastAPI, Python tabanlı, yüksek performanslı bir web framework’üdür. API’ler geliştirmek için idealdir çünkü; API’lerinizi hızlı bir şekilde oluşturmanıza ve ölçeklendirmenize yardımcı olur. Ayrıca, otomatik etkileşimli dokümantasyon sağlamasıyla da geliştirme sürecini oldukça kolaylaştırır. Daha fazla bilgi için resmi FastAPI dokümanlarını inceleyebilirsiniz.

React & TypeScript: Güçlü ve Tip Güvenli Frontend

React, Facebook tarafından geliştirilen ve günümüzde en popüler JavaScript kütüphanelerinden biri olan bir frontend framework’üdür. Kullanıcı arayüzleri oluşturmak için bileşen tabanlı bir yaklaşım sunar. TypeScript ise, JavaScript’in üst kümesidir ve statik tipleme özelliğiyle kod kalitesini ve sürdürülebilirliği önemli ölçüde artırır. Sonuç olarak, daha az hata ve daha temiz bir kod yapısı elde edersiniz. TypeScript ile ilgili daha derinlemesine bilgi için TypeScript resmi sayfasına göz atabilirsiniz.

Proje Yapısı ve Kurulum

Öncelikle, projemizi oluşturalım. Backend için bir FastAPI projesi, frontend içinse bir Create React App projesi oluşturacağız. Daha sonra, gerekli paketleri yükleyeceğiz. Bu aşamada, Poetry (Python için paket yöneticisi) ve npm (Node.js için paket yöneticisi) kullanacağız. Aşağıda, temel proje yapısını ve kurulum adımlarını görebilirsiniz:

# Proje yapısı
├── backend
│   ├── main.py
│   └── ...
└── frontend
    ├── src
    │   ├── App.tsx
    │   └── ...
    └── ...

Bu aşamalar tamamlandıktan sonra, backend ve frontend’i ayrı ayrı çalıştırabilir ve API’leri test edebilirsiniz. Frontend’de, API’leri çağırmak için fetch veya axios gibi araçlar kullanabilirsiniz. Ayrıntılı kurulum adımları için buradan İngilizce kaynağa bakabilirsiniz (Türkçeye çevirim yapılmıştır).

Kod Örnekleri

İşte basit bir FastAPI endpoint ve React bileşeni örneği:

FastAPI (main.py)

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
async def root():
    return {"message": "Merhaba FastAPI!"}

React (App.tsx)

import React, { useState, useEffect } from 'react';

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('/')
      .then(res => res.json())
      .then(data => setMessage(data.message));
  }, []);

  return (
    

      {message}
    
  );
}

export default App;

Bu örnekte, FastAPI bir “Merhaba FastAPI!” mesajı döndürür ve React bu mesajı görüntüler. Daha karmaşık uygulamalar için, veritabanı entegrasyonu, yetkilendirme ve diğer özellikleri ekleyebilirsiniz. Bu konularda detaylı bilgi için fatihsoysal.com sitesini ziyaret edebilirsiniz.

Sonuç

FastAPI ve React TypeScript kullanarak modern, hızlı ve ölçeklenebilir web uygulamaları geliştirmek mümkündür. Bu güçlü kombinasyon, geliştirme sürecini hızlandırır ve daha temiz, daha sürdürülebilir bir kod tabanına olanak tanır. Umarım bu makale, size bu teknolojileri kullanarak kendi uygulamalarınızı geliştirmeniz için gerekli bilgileri sağlamıştır.

Herhangi bir sorunuz veya öneriniz varsa, lütfen yorum bölümünde belirtin. Başarılar!

#Etiketler: FastAPI, React, TypeScript, Web Uygulama Geliştirme, Modern Web Uygulaması, Backend, Frontend, API, Tutorial, Python, Javascript