👨🏻‍💻 TechCode Azerbaijan

Yeni bir səhifəyə keçid etdikdə səhifənin hər zaman
yuxarısında başlamaq üçün (əgər scroll edib aşağıya
düşmüşüksə əvvəlki səhifədə) funksiya

#reactjs #javascript #frontend #frontenddeveloper #html

@CoderrTv | © Cəfərli Ziya

👍6👏1

1.3K viewsTaleh, 21:01

👨🏻‍💻 TechCode Azerbaijan

📢 Yeni başlayanlar və Tələbələr üçün #Onlayn #Frontend Proqramlaşdırma Təlimi!

Frontend proqramlaşdırma, interaktiv veb səhifələr və veb tətbiqlərin inkişafında əsas rol oynayır. Bizim təlimlərimiz vasitəsilə, HTML, CSS və JavaScript (React Js) kimi ən güclü və populyar veb texnologiyalarını öyrənəcəksiniz.

MasterCode Academy-də #Onlayn #frontend bootcamp-ına qoşulun və təcrübəli təlimçilərlə 5 ay müddətində frontend kodlaşdırma biliklərinə yiyələnin.

Bizim təlimlərimizdən faydalanmaqla, bir frontend proqramçı olmaq üçün tələb olunan lazımi bacarıqları əldə edəcəksiniz.

Dərslər həftədə 5 dəfə xüsusi tədris proqramı ilə həyata keçirilir.
Təlimçilərimiz ilə yanaşı mentor heyətimiz sizə 7/24 dəstək olur.

Bootcamp-a qoşulan #tələbələr üçün özəl qiymət təklifimiz də mövcuddur.

💬 Ətraflı məlumat üçün rəy bölməsinə və ya @coderarxivdev'ə yaza bilərsiniz.

#javascript #developer #html #css #reactjs

👍4❤1

1.45K views18:55

👨🏻‍💻 TechCode Azerbaijan

#frontend #reactjs

ℹ️ Use Optimistic nədir? və nəyə görə useState-dən fərqlidir?

Use Optimisctic - UI-ni optimist şəkildə yeniləməyə imkan verən React Hook-dur.

useState dəyişiklikləri ani göstərmir – dəyişiklik baş verir, sonra cavab alınır, sonra state yenilənir.

`useOptimistic` isə istifadəçiyə ani reaksiya verir (məsələn: "bəyənildi" effektini dərhal göstərir), amma arxa planda (backend API) sorğunu sonradan göndərir. Əgər uğursuz olarsa, əvvəlki vəziyyətə qayıtmaq mümkündür.

Bu, istifadəçi təcrübəsini daha sürətli və səlis edir.

📌 Nümunə: Post Like (Bəyənmə) funksiyası:

🟥 useState ilə (gec reaksiya)

const [liked, setLiked] = useState(false);

const handleLike = async () => {
  const res = await fetch("/api/like", {
    method: "POST",
    body: JSON.stringify({ postId }),
  });

  if (res.ok) {
    setLiked(true);
  }
};

➡️ Burda await bitmədən bəyənmə görünmür. Yəni istifadəçi bəyən düyməsinə kliklədikdə, arxa plandan cavab gəlməyincə heç nə dəyişmir. Bu isə yavaş görünür.

🟩 useOptimistic ilə (ani reaksiya)

"use client";

import { useOptimistic, useState } from "react";

export default function PostLikeButton({ postId, defaultLiked }) {
  const [liked, setLiked] = useState(defaultLiked);

  const [optimisticLiked, addOptimisticLike] = useOptimistic(liked);

  const handleLike = async () => {
    // Əvvəlcə istifadəçiyə dərhal göstər
    addOptimisticLike(!optimisticLiked);

    // Sonra serverə göndər
    const res = await fetch("/api/like", {
      method: "POST",
      body: JSON.stringify({ postId, liked: !liked }),
    });

    if (res.ok) {
      setLiked(!liked);
    } else {
      // burda hata varsa, sabitləşdirmək üçün istəsən `setLiked(liked)` edə bilərsən
    }
  };

  return (
    <button onClick={handleLike}>
      {optimisticLiked ? "❤️ Bəyənildi" : "🤍 Bəyən"}
    </button>
  );
}

✅ Faydası:

- İstifadəçi "Like" düyməsinə klikləyən kimi dəyişiklik görünür – ani reaksiya
- Backend API cavab verəndə isə əsl məlumat useState ilə sabitlənir
- Əgər backend uğursuz olarsa, geri ala bilirsən

@TechCodeAz | TechCode.Az

👍3

219 viewsMurad, 16:37

👨🏻‍💻 TechCode Azerbaijan

#frontend #javascript #reactjs

useFormStatus - React 19 ilə gələn yeni hook-lardan 1-i:
- useFormStatus
- useActionState
- useOptimistic
- use

useFormStatus — yalnızca formun içindəki Form komponentinin bir child komponentində istifadə oluna bilən bir hook-dur. Bu hook vasitəsilə:
- Formun hazırda göndərildiyini (pending) öyrənə bilərsən.
- Göstərilən butonun deaktiv olub-olmayacağını təyin edə bilərsən.
- Yükləmə animasiyası və ya spinner əlavə edə bilərsən.

✅ İstifadə qaydası (React 19 Server Actions ilə):

1. Form və Server Action:

// app/actions.ts
'use server'

export async function sendData(formData: FormData) {
  const name = formData.get("name")
  await new Promise(resolve => setTimeout(resolve, 2000)) // sadə gecikmə
  console.log("Ad göndərildi:", name)
}

2. Komponent və useFormStatus istifadəsi:

'use client'

import { useFormStatus } from "react-dom"

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    <button
      type="submit"
      disabled={pending}
      className={px-4 py-2 rounded ${pending ? "bg-gray-400" : "bg-blue-600 text-white"}}
    >
      {pending ? "Göndərilir..." : "Göndər"}
    </button>
  )
}

3. Əsas Form komponenti:

import { sendData } from "./actions"
import SubmitButton from "./SubmitButton"

export default function Page() {
  return (
    <form action={sendData} className="space-y-4">
      <input
        type="text"
        name="name"
        placeholder="Adınızı yazın"
        className="border p-2 rounded w-full"
      />
      <SubmitButton />
    </form>
  )
}

💡 Nə üçün useFormStatus faydalıdır?
- UX yaxşılaşdırır: Form göndərilərkən "Göndərilir..." mesajı və ya spinner göstərə bilərsən.
- Button disable: İkinci dəfə göndərmənin qarşısını alır.
- Server Action ilə uyğun işləyir.

⚠️ Nəzərə alınmalı məqamlar
- 🔒 useFormStatus yalnız form komponentinin içindəki child elementlərində işləyir.
- ❌ Form xaricində çağırıldıqda heç bir məlumat qaytarmır.
- ✅ React 19-un form komponenti ilə action={serverFunction} yazaraq istifadə etməlisən.

@TechCodeAz | TechCode.Az

👍1🔥1

246 viewsMurad, 15:03

About

Blog

Apps

Platform