ReactJS

Redux Toolkit içinde createAsyncThunk fonksiyonu, asenkron bir işlem yapmak için kullanabileceğiniz bir işlevdir. Aşağıdaki örnekte, bir kullanıcının adını almak için bir API çağrısı yapmak için kullanılmaktadır: import { createAsyncThunk } from '@reduxjs/toolkit'; import axios from 'axios'; export const fetchUser = createAsyncThunk('users/fetchUser', async (name) => { const response = await axios.get(`https://api.example.com/users/${name}`); return response.data; }); Bu işlev, users/fetchUser türünde bir aksiyon oluşturur ve geri dönüş değeri olarak API'den dönen verileri döndürür. Bu işlevi kullanmak için, bir users reducer'ı oluşturmanız ve bu aksiyonu işlemek için case eklemeniz gerekir: import { createSlice } from '@reduxjs/toolkit'; import { fetchUser } from './usersSlice'; const usersSlice = createSlice({ name: 'users', initialState: [], reducers: {}, extraReducers: (builder) => { builder .addCase(fetchUser.pending, (state) => { // Handle the loading state }) .addCase(fetchUser.fulfilled, (state, action) => { // Handle the success state state.push(action.payload); }) .addCase(fetchUser.rejected, (state, action) => { // Handle the error state }); }, }); Bu örnekte, fetchUser işlevi çağrıldığında, users/fetchUser_pending, users/fetchUser_fulfilled, veya users/fetchUser_rejected türünde aksiyonlar oluşur ve bunları işlemek için extraReducers kullanılmaktadır.

React, kullanıcı arayüzleri oluşturmak için popüler bir JavaScript kütüphanesidir ve TypeScript, JavaScript'e tip kontrolü, arayüzler gibi özellikler ekleyen bir statik olarak tip belirlenmiş dilidir. Bu iki teknolojiyi birleştirerek, emin adımlarla ölçeklenebilir ve kolay bakımlı web uygulamaları oluşturabilirsiniz. React, kullanıcı arayüzleri oluşturmak için popüler bir JavaScript kütüphanesidir ve TypeScript, JavaScript'e tip kontrolü, arayüzler gibi özellikler ekleyen bir statik olarak tip belirlenmiş dilidir. Bu iki teknolojiyi birleştirerek, emin adımlarla ölçeklenebilir ve kolay bakımlı web uygulamaları oluşturabilirsiniz: [[reklam]] 1. Create React App'i kurun: Başlamak için, Create React App'i makineye global olarak kurmanız gerekir. Bunu terminalinizde aşağıdaki komutu çalıştırarak yapabilirsiniz: npm install -g create-react-app 2. TypeScript ile yeni bir React uygulaması oluşturun: TypeScript ile yeni bir React uygulaması oluşturmak için aşağıdaki komutu çalıştırın: npx create-react-app my-app --template typescript [[reklam]] 3. Proje dizinine gidin: Uygulama oluşturulduktan sonra, aşağıdaki komutu çalıştırarak proje dizinine gidin: cd my-app 4. Geliştirme sunucusunu başlatın: Proje dizinine girdikten sonra, aşağıdaki komutu çalıştırarak geliştirme sunucusunu başlatabilirsiniz: npm start [[reklam]] 5. Kodlamaya başlayın: Favori kod editörünüzle src dizinini açarak uygulamanıza başlayabilirsiniz. src dizini, uygulamanız için gerekli olan tüm kaynak kodları, bileşenler, stiller ve TypeScript dosyalarını içerir. Bu adımları izleyerek, TypeScript ile yeni bir React uygulaması oluşturmuş olursunuz. Artık React ve TypeScript'in avantajlarını kullanarak ölçeklenebilir ve kolay bakımlı web uygulamaları oluşturmaya başlayabilirsiniz.

Yaygın kullanılan javascript frameworklerinden olan React ile Web uygulamalar geliştiriyorsunuz. Uygulamalardan birinde belli bir görüntünün (Componentin) pdf olarak kayd edilmesini istiyorsunuz. Peki bunu nasıl yapa bilirsiniz? React içinde her hangi bir komponenti pdf şekline getirmek için oluşturulmuş çok kullanışlı "react-to-pdf" paketini kullana biliriz. Paketin kurulumu için aşağıdakı npm komutunu çalıştırmanız yeterlidir: npm i react-to-pdf Paketi kurduktan sonra aşağıdakı adımları takip ederik basit bir şekilde react ile pdf oluştura bilirsiniz. ReactToPdf paketini dosyamıza dahil ediyoruz: import ReactToPdf from 'react-to-pdf' React.createRef() kullanarak ref oluşturuyoruz: const ref = React.createRef(); PDF`e dahil etmek istediğimiz bölümün ana tag`ne oluşturduğumuz ref değerini prop olarak veriyoruz.     Son olarak ReactToPdf tagi dahilinde aşağıda örnek verdiğim değerleri ekleyerek pdf oluşturmak için gerekli işlemleri tamamlaya bilirsiniz. <ReactToPdf targetRef={ref} filename="lorem.pdf">     {({toPdf}) => (        <button onClick={toPdf}>Generate pdf</button>     )} </ReactToPdf> Anlattıklarımı birleştirerek son olarak aşağıdakı kodları örnek vermek istiyorum. import React from 'react' import ReactToPdf from 'react-to-pdf' const ref = React.createRef(); export const App =()=> {   return (     <div>       <ReactToPdf targetRef={ref} filename="lorem.pdf">           {({toPdf}) => (               <button onClick={toPdf}>Generate pdf</button>           )}       </ReactToPdf>       <div ref={ref}>         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.       </div>     </div>   ) } export default App;

Redux, JavaScript tabanlı uygulamaların veri yönetimini kolaylaştıran popüler bir kütüphanedir. Ancak, Redux'i kullanırken bazı karmaşıklıklarla karşılaşabilirsiniz. State (durum) yönetimi, action'lar, reducer'lar ve store gibi terimler karmaşık gelebilir ve uygulama geliştirme sürecini zorlaştırabilir. Bu sorunların üstesinden gelmek için Redux Toolkit devreye girer. Redux Toolkit, Redux kullanımını basitleştiren, daha hızlı ve daha verimli bir veri yönetim aracıdır. Bu yazıda Redux Toolkit'in ne olduğunu ve nasıl kullanıldığını ayrıntılı bir şekilde inceleyeceğiz. Redux Toolkit Nedir? Redux Toolkit, Redux'i kolaylaştıran bir kütüphanedir. Redux'in sunduğu faydaları korurken, geliştirme sürecini hızlandıran birçok kullanışlı özelliği içerir. Bu özellikler arasında bir dizi kullanışlı fonksiyon, önceden tanımlanmış bir yapı ve gelişmiş kodlama deneyimi bulunur. Redux Toolkit, ölçeklenebilir ve sürdürülebilir uygulamalar geliştirmek isteyen geliştiriciler için ideal bir seçenektir. Redux Toolkit Avantajları 1. Basit Kodlama Deneyimi: Redux Toolkit, karmaşık kod yapısını basitleştirir ve daha okunabilir, sürdürülebilir bir kodlama deneyimi sunar. Geliştiriciler, daha az kod yazarak daha fazla iş yapabilir ve geliştirme sürecini hızlandırabilir. 2. Hazır Yapılar: Redux Toolkit, önceden tanımlanmış yapılar sunar. Bu yapılar, geleneksel Redux'e kıyasla daha hızlı bir başlangıç ​​sağlar. Store oluşturma, action tanımlama ve reducer oluşturma gibi süreçler daha az kod gerektirir ve hataları azaltır. 3. Immutability ve Immer Entegrasyonu: Redux Toolkit, durumu değiştirmek için Immer kütüphanesini kullanır. Bu, immutability (değiştirilemezlik) kavramını korurken, durumun güncellenmesini kolaylaştırır. Bu sayede, Redux Toolkit ile daha güvenli bir şekilde veri yönetimi yapabilirsiniz. 4. Performans Optimizasyonu: Redux Toolkit, Redux'e entegre edilmiş performans optimizasyonları sunar. Durum güncellemelerinin etkilerini takip etmek ve gereksiz yeniden render'ları önlemek için kullanılan Redux'in ara katmanlarına otomatik olarak dahil edilir. Bu da uygulamanın performansını iyileştirir. Redux Toolkit Nasıl Kullanılır? Redux Toolkit'i kullanmak oldukça basittir. Aşağıda temel adımlar özetlenmiştir: 1. Projeye Redux Toolkit'i ekleyin: npm install @reduxjs/toolkit komutu ile Redux Toolkit'i projenize dahil edebilirsiniz. 2. Store'u oluşturun: Redux Toolkit, configureStore() fonksiyonu ile store oluşturmayı sağlar. Bu fonksiyon, Redux'in çeşitli özelliklerini otomatik olarak yapılandırır. 3. Slice'lar Oluşturun: Slice'lar, durum, action ve reducer'ları tek bir birimde birleştiren yapıdır. createSlice() fonksiyonu ile slice'larınızı oluşturabilirsiniz. 4. Slice'ları Kullanın: Oluşturduğunuz slice'ları, durumu güncellemek veya action'lar tetiklemek için kullanabilirsiniz. Sonuç olarak Redux Toolkit, Redux ile uğraşırken karşılaşılan karmaşıklıkları ortadan kaldıran güçlü bir veri yönetim aracıdır. Kolay kullanımı, performans optimizasyonları ve hızlı geliştirme süreci sunmasıyla, Redux Toolkit uygulama geliştirme sürecini daha keyifli ve verimli hale getirir. Redux Toolkit'i projelerinizde kullanarak daha temiz, sürdürülebilir ve ölçeklenebilir kodlar oluşturabilirsiniz.