Burak Behlül

MERN Stack ile Uygulama Geliştirme Mern ya da Mevn hepsi aynıdır. Birisi React biri Vue kullanır. Normalde bunun için NextJS, NuxtJS gibi Fullstack geliştirme araçlarımız var ama biz onun yerine client ve server diye ayırıp öyle yapacağız. Şundan başlayalım, 2 ayrı klasör olsa da React dosyalarını compiler edip çıktısını Nodejs ile render ediyorlar. Böylece direkt tek porttan istek atabiliyorsunuz. Kabaca. Bir de, Server’a gidip ayrı bir port ile açıp ona istek atıyoruz yeniden. Burada MERN Stack ne diye soracaksanız eğer: Mongodb, Express, React, Nodejs demektir. Burada hem Arayüz hem backend gelştireceğiz. Ama öncelikle, arayüzcüler için diyorum kolay olmayacak. Burada basitçe örneklendirmek için fazla bir şey kullanmayacağım. MERN Stack (Görsel, I.) 1- Proje Temelleri İlk olarak Todo-App diye bir dosya açalım. Neden Todo-App? Basit diye mi? Hayır. Çünkü örnek verebileceğimiz bolca şeyi sağladığı için. — Todo-App — — Client — — Server Böyle olacak. Gelin arayüzü kuralım, client...

Mala Anlatır Gibi React — 11: Test Kütüphanesi / Vitest Bir program yazmak kadar, onun testini yazmakta önemlidir. Hele ki büyük projelerde kontrol etmenin zorlaşmasıyla beraber test kütüphanesi size yardımcı olacaktır. Kütüphaneyi, şöyle hemen kurabilir ve kullanabilirsiniz: npm install -D vitest İlk olarak, package.json ’a script eklememiz gerek: "scripts" : { "test" : "vitest" , } Dosyaların adlarını şöyle yapmanız gerekiyor: .test. example.test.js example.test.jsx Vitest (Görsel, I.) Hadi gelelim içeriğine: Bir tane toplama işlemi oluşturalım: import { expect } from 'vitest' test ( 'toplama işlemi doğru' , () => { expect ( 1 + 1 ). toBe ( 2 ) }) it() ve test() : Bir test etme bloğu oluştururuz. it ve test fonksiyonları aynıdır. describe() : Testleri gruplandırmak için kullanılır. expect() : Sonucu yakalar. Değer kontrol fonksiyonları: .toBe ( değer ): Değerin aynı olup olmadığını kontrol eder. .toContain ( değer ): Yazının...

Mala Anlatır Gibi React — 10: Yeni Özellikler ve Hooklar / React 19 React 19 çıkmasıyla beraber, yeni özellikler ve hook lar geldi. Artık head etiketleri ni kullanabileceğiz. Yani direkt component’a <title> Burak Behlül </title> diye yazıp, kullanacağız. Bunun harici nextjs kullananlar bilir, artık ‘ use client ’, ‘ use server ’ özelliği de React’da geldi. React’da memoization ’ı elle yapmaya son. Bu durumda, useMemo() , useCallback() , memo() gibi hookları kullanmayacağız. React kendisi yönetecek. (Görsel, I.) Bunun yanında Promise ’ı çözen ve bir hook getirmişler. Kullanımı şöyle: import { use, Suspense } from 'react' use ( ()=> {}) use ( ()=> fetch ( URL ). then (). catch ()) Yanıtı beklemek <Suspense>: < Suspense fallback= "Yükleniyor..." > // code </ Suspense > Ayrıca, use() hook’u, useContext yerine geçiyor, bakalım: useContext (themeContext) use (themeContext) Provider kalkıyor: < ThemeContext . Provider valu...

Mala Anlatır Gibi React —9: İstek State Yönetimi / react-query React’da istek state yönetimi paketini tanıtacağım. (Görsel, I.) Paketin amacı, istekleri yönetimi kolaylaştırmak. State’de tutmak. Paketi yükleyelim: npm i --save @tanstack/react-query Ana component’ı sarmalayın: import { QueryClient , QueryClientProvider } from '@tanstack/react-query' const client = new QueryClient () < QueryClientProvider client={client}> < App /> </ QueryClientProvider > Query kullanımı: import { useQuery } from '@tanstack/react-query' const { data } = useQuery ([ "çekilecek-veri-adı" ], ()=> { console . log (data) return fetch ( 'url' ) }) Hazır eventler: isLoading: const { isLoading } = useQuery () if (isLoading) { return < h1 > Yükleniyor.. </ h1 > } Hata yönetimi: const { isError } = useQuery () if (isError) { return < h1 > hata </ h1 > } Yeniden istek atmak: const { refetch } = useQuer...

Mala Anlatır Gibi React — 8: Head’i dinamikleştir / react-helmet React helmet paketi, head içeriğini dinamik olarak kontrol etmemizi sağlar. İlk önce bu paketi yüklemek için: npm i react-helmet diyoruz. Sonra import edip, head etiketini açıp içine title yazdığımız gibi, etiketi açmamız gerekir. Görelim: import { Helmet } from 'react-helmet' < Helmet > < title > Burak Behlül </ title > </ Helmet > Bu paket işinize çok yarayacak. (Görsel, I.)

Mala Anlatır Gibi React — 7: Yönlendirme Paketi / react-router-dom React’da, sayfalardan sayfaya geçiş yapmak için, kullanılan bir paket, kabaca bir tâbir ile. Paketi yüklemek için: npm i react-router-dom Genel bir iskelet ve <Route /> tanımı: import { BrowserRouter as Router , Routes , Route } from 'react-router-dom' < Router > < Routes > // route'lar buraya gelecek. < Route path = "/" element = { < App /> } /> < Route path = "/menu" element = { < Menu /> } /> </ Routes > </ Router > Route’larımızı gördünüz. Neden “ / ” var? Çünkü “ / ” demek, ilk sayfayı açtığınız yer. Yani localhost:3000 'e girdiniz değil mi, direkt orası. Burada <Route /> içerisine yazdığımız şeyler, path= {}tanımladığımız yer, element={} ise o linke gittiğimiz de gelecek içerik. Meselâ “ /menu ” adlı yere gidelim. <Menu /> component tanımlamışız ama eğer element={<h1>Merhaba menü sa...

Mala Anlatır Gibi React — 6: NPM ve Axios paketi Npm , nodejs ’de bir paket yöneticisidir. Normalde bir react projesi oluşturmak için npx kullanılabilir (cra) ama vite ile kurulum yapacaksanız eğer npm kullanırsınız. Npx de aynıdır. Burada bunların farklılıklarına girmeyeceğim. Nodejs’i kurduğunuza göre, npm’de kurulur. Bir react projesi oluşturduğunuzda ana dosya da npm i komutuyla beraber paketleri kurarsınız. Ama biz burada proje içerisine paket kuracağız. Bu paket linke istek atmamıza yardımcı olacak. paketi yüklemek için terminale gelip npm i axios demeniz yeterli. Paket kurulduktan sonra package.json ’da adını göreceksiniz. axios paketini yükledikten sonra kullanımı için şöyle bir örneklendirme vereceğim. Örnek olarak bir api’miz olsun. O Api’den listeleri çekeceğiz. Önce paketi tabiî ki proje de tanımlamamız gerekiyor. // module import axios from 'axios' //commonjs const axios = require ( 'axios' ) GET isteği. axios. get ( "URL" ) // meselâ bir örne...