Appexa React Geliştirme Süreçlerinizi Işık Hızına Çıkarın

React ile uygulama geliştirmek harika, ancak her projede kendimizi tekrar eden kodları yazarken bulabiliyoruz: Redux state yönetimi, API istekleri için servis katmanları, form validasyonları... Peki ya tüm bu sıkıcı ve tekrarlayan işleri sizin için otomatikleştiren bir araç olsaydı? İşte react-appexa tam olarak bu noktada devreye giriyor.

react-appexa, Vite tabanlı React projeleri için geliştirilmiş, state yönetimi, API entegrasyonu ve validasyon gibi temel ihtiyaçları tek bir çatı altında toplayan güçlü bir araç setidir. Amacı, geliştiricileri boilerplate kod yazma zahmetinden kurtararak, asıl iş mantığına odaklanmalarını sağlamaktır.

react-appexa'nın Süper Güçleri Neler?

1. Konfigürasyon Dosyasından Yönetilen API Katmanı:

   Projenizdeki tüm API isteklerini appexa.json adında tek bir dosyadan yönettiğinizi hayal edin. Hangi endpoint'in hangi HTTP metodunu kullanacağı, URL'i ve hatta özel header'ları... Hepsi tek bir yerde. react-appexa, bu dosyayı okuyarak size request.getUsers() veya request.createProduct(data) gibi kullanıma hazır fonksiyonlar sunar. Artık Axios instance'ları veya fetch servisleri yazmanıza gerek yok!

2. store.CRUD ile Sıfır Boilerplate Redux:

   Redux'ta bir CRUD (Create, Read, Update, Delete) işlemi için ne kadar çok kod yazdığımızı biliyoruz: PENDING, SUCCESS, ERROR action type'ları, action creator'lar, reducer'daki switch-case blokları... react-appexa'nın store.CRUD sınıfı ile tüm bu süreci otomatikleştirebilirsiniz. Sadece operasyon isimlerini (["FETCH_PRODUCTS", "CREATE_PRODUCT"]) belirtin, gerisini react-appexa halletsin. Size sadece asenkron thunk fonksiyonlarını yazmak kalır.

3. Şema Tabanlı Güçlü Validasyon:

   Form verilerini doğrulamak için harici kütüphanelere (Yup, Zod vb.) ihtiyacınız kalmaz. react-appexa, kendi validasyon modülüyle gelir. Kurallarınızı bir şema nesnesi içinde tanımlayın ve tek bir fonksiyonla tüm girdilerinizi doğrulayın.

   import { validation } from "react-appexa";
   
   const formData = { email: "test@example.com", password: "123" };
   
   const validationResult = validation({
     email: { fieldTitle: "E-posta", type: "email" },
     password: { fieldTitle: "Şifre", type: "password", options: { min: 6 } }
   }, formData);
   
   if (!validationResult.status) {
     // validationResult.message -> "Şifre parameter's length 6 to ∞ should be in between. (123)"
     console.error(validationResult.message);
   }

4. Asenkron Aksiyonları Zincirleme: asyncDispatch

   Bazen bir API isteğinin sonucunu, bir sonraki isteği tetiklemek için kullanmamız gerekir. Örneğin, önce giriş yapıp, dönen kullanıcı ID'si ile kullanıcının profil bilgilerini çekmek gibi. react-appexa, bu senaryoyu asyncDispatch ve withForward yardımcılarıyla zarif bir şekilde çözer.

   import { store } from 'react-appexa';
   import authActions from './store/auth';
   import profileActions from './store/profile';
   
   const loginAndFetchProfile = async (credentials) => {
     await store.asyncDispatch(
       authActions.login(credentials), // Önce bu aksiyon çalışır
       store.withForward((loginResponse) => {
         // loginResponse, bir önceki aksiyonun sonucudur
         const userId = loginResponse.user.id;
         return profileActions.fetchProfile(userId); // Dönen ID ile yeni aksiyonu tetikle
       })
     );
   }

Hızlı Başlangıç: react-appexa ile Tanışın

Adım 1: Kurulum

npm install react-appexa

Adım 2: appexa.json Dosyasını Oluşturun

{
  "request": {
    "baseUrl": "https://api.my-app.com/",
    "getProducts": {
      "type": "get",
      "url": "products"
    },
    "createProduct": {
      "type": "post",
      "url": "products"
    }
  }
}

Adım 3: Provider'ı Ayarlayın (src/main.jsx)

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import Appexa from 'react-appexa';
import storeModules from './storeModules';
import appexaConfig from '../appexa.json';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Appexa storeModules={storeModules} config={appexaConfig}>
    <App />
  </Appexa>
);

Adım 4: Ürünler İçin Store Modülü Oluşturun (src/storeModules/products.js)

import { request, store } from "react-appexa";

class Products extends store.CRUD {
  constructor() {
    super({
      items: ["FETCH_PRODUCTS", "CREATE_PRODUCT"]
    });
  }

  // Thunk Action: Ürünleri getirme
  fetchProducts = () => async (dispatch) => {
    dispatch(this.fetchProductsPending()); // Otomatik oluşturulan action
    try {
      const response = await request.getProducts(); // appexa.json'dan gelen fonksiyon
      dispatch(this.fetchProductsSuccess(response)); // Otomatik oluşturulan action
    } catch (error) {
      dispatch(this.fetchProductsError(error)); // Otomatik oluşturulan action
    }
  };
}

export default new Products();

Bu modülü src/storeModules/index.js dosyasında export etmeyi unutmayın.

Adım 5: Component İçinde Kullanım

import React, { useEffect } from 'react';
import { store } from 'react-appexa';
import productsModule from '../storeModules/products';

function ProductList() {
  const dispatch = store.useDispatch();
  const { data: products, pending } = store.useSelector(state => state.products.fetchProducts);

  useEffect(() => {
    dispatch(productsModule.fetchProducts());
  }, [dispatch]);

  if (pending) return <p>Loading...</p>;

  return (
    <ul>
      {products?.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

Neden react-appexa?

• Hız ve Verimlilik: Tekrarlayan kodları ortadan kaldırarak geliştirme sürecini inanılmaz hızlandırır.

• Okunabilirlik ve Bakım Kolaylığı: Proje yapısını standartlaştırır. appexa.json sayesinde tüm API endpoint'leri tek bir yerde toplanır.

• Daha Az Hata: Otomatikleştirilmiş süreçler, manuel olarak yazılan kodlarda oluşabilecek hataları (typo gibi) en aza indirir.

• Hepsi Bir Arada Çözüm: State yönetimi, API istekleri, validasyon ve daha fazlası için farklı kütüphaneler arasında kaybolmanıza gerek kalmaz.

Sonuç

react-appexa, modern React geliştirme pratiğinde karşılaşılan yaygın sorunlara zarif ve etkili çözümler sunan kapsamlı bir pakettir. Eğer siz de projelerinizde daha az boilerplate kod yazmak, daha organize bir yapı kurmak ve geliştirme hızınızı artırmak istiyorsanız, react-appexa'ya mutlaka bir şans vermelisiniz.

Daha fazla bilgi için GitHub reposunu ziyaret edebilir ve dokümantasyonu inceleyebilirsiniz.

Orijinal yazı: https://ismailyagci.com/articles/appexa-react-gelitirme-surelerinizi-isik-hizina-cikarin