💡 REACT MÜSAHİBƏ SUALLARI PART 3

UseEffect nədir ?

@TechcodeAz | #javascript

💡 REACT MÜSAHİBƏ SUALLARI PART 3

“Key" nədir və onu element massivlərində istifadə etməyin faydası nədir?


Key elementlərin massivlərini yaradarkən daxil etməli olduğunuz xüsusi sətir atributudur. O reacta hansı elementlərin dəyişdirildiyini, əlavə olunduğunu və ya silindiyini müəyyən etməyə kömək edir.

const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);

Key olaraq index istifadə etməməyə çalışmalıyıq.

@TechCodeAz | #javascript

Marağlıdı 😀

@TechCodeAz | #javascript

(function() {
var a = b = 5;
})();

console.log(b);

Consola nə çıxaracaq ?

@TechCodeAz | #javascript

JAVACSCRIPT MÜSAHİBƏ SUALLARI

1. Void (0) nə üçün istifadə olunur?
2. JavaScript-də innerHTML istifadə etməyin mənfi cəhətləri hansılardır?

@TechCodeAz I #javascript

JavaScript-də Promise nədir ?


Promise – söz, vəd(söz vermək) vermək deməkdir. Bəs proqramlaşdırmada?

Bizə hər hansı bir qiymət verməyi nəzərdə tutan bir obyektdir. Bu qiymət müsbət mənada da ola bilər, mənfi mənada da.

Yəni ilk olaraq bizə söz verildikdə bu gözləmə (pending) rejimində olur. Sonra isə bizə ya uğurlu (resolved) ya da uğursuz (rejected) olması haqqında bir qiymət qaytarır. Əgər uğurludursa ƏLA həyata davam et) Yox uğursuz nəticə almış olduğumuz halda isə, bir az məyus olaraq bu vəziyyəti idarə edə bilərik(error handling).
Bəs bu promise-i JavaScript`də niyə çox eşitməmişik? niyə istifadə eləmirik? suallarına cavab tapaq.
Promise EcmaScript 6 ilə javascript dünyasına giriş edib. Digər bir məsələ isə EcmaScript 5-də ən çox XMLHttpRequest API istifadə etməyimizdir (fikrimcə). XMLHttpRequest API promise API istifadə eləmir. Lakin promise istifadə edən bir neçə native API var

1. Battery API
2. Fetch API
3. ServiceWorkers

Promise gün keçdikcə məhşurlaşan bir temadı. Buna görə də front-end developerlərə bu temanı dərindən öyrənmələrini məsləhət görürəm. Bundan əlavə Node.js proqramlaşdırma dilinə promise teması üçün başqa bir dünyasıda demək olar (Promise sistemi dilin kökündə olduğu üçün).

Promise new açar sözü ilə istifadə edirik.
Uğurlu (resolve), uğursuz (reject) funksiyaları ilə birlikdə istifadə edirik. Sıralamanı pozmadan adlarını fərqli yaza bilərsiniz. — Promise.resolve() :Promise.all() :, Promise.race(): , Promise.reject() :
Promise gözlənilən əməliyyatı həyatə keçirdikdən sonra nöbəti əməliyyatlar üçün then() metodunun daxilinə keçir. Göndərilən parametr isə resolve() ilə göndərilir.
Hər hansı bir problem baş verdiyi halda catch() daxilinə keçir.

@TechCodeAz | #javascript

JavaScript-də callback funksiyalarının işləmə sxemi
Asinxron JavaScript-də callback funskiyalarından istifadə edilərək bir neçə işi eyni vaxtda etmək mümkün olur.Məsələn, bizim yazdığımız kodlar yuxarıdan aşağı (top-down) işlədilmə məntiqi ilə işləyir. Asinxron (async) isə “hal hazırda yox, sonradan işlədiləcək” ya da “bir az vaxt alır” kimi mənalarda düşünülə bilər. Yəni birdən çox iş görə bilmə qabiliyyəti deyə bilərik. Elektrik sahəsindəki məna ilə eyni mənaya gəlib gəlmədiyini bilmirəm, amma JavaScript üçün belədir. Callback isə əsasən giriş-çıxış (I/O) işləri üçün istifadə edilir. Məsələn, fayl yükləyəndə, fayl oxuyanda, baza ilə əlaqədə və s. Yəni qısaca Nodejs-də daha çox qarşınıza çıxar nəyin ki, front-end işi ilə məşğul olanda.

var res = add(5,3);
console.log(res); // 8
Yuxarıdakı kodda normal funksiyadan istifadə ediləndə iki iş görülür.

Toplama əməli
Ekranda göstər
Asinxron olan funksiyalar isə tez cavab vermir.

var res = download("http://huseyn.org/photo.jpg");
console.log(res);
// res undefined olar

@TechCodeAz | #javascript

💡 REACT MÜSAHİBƏ SUALLARI

React-in əsas xüsusiyyətləri hansılardır?

1. RealDOM manipulyasiyalarının bahalı olduğunu nəzərə alaraq RealDOM əvəzinə VirtualDOM istifadə edir.

2. Server tərəfində render olmanı dəstəkləyir.

3. Bir istiqamətli məlumat axını və ya məlumat bağlanmasını izləyir.

4. Təkrar istifadə olunan birləşdirilə bilən UI komponentlərindən istifadə edir.

5. State idarə edilməsi daha asandır.

@TechCodeAz | #javascript

📢 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

#frontend #html #javascript

<script /> nədir?

HTML-də JavaScript kodunu işlətmək üçün <script> tagından istifadə olunur.

Bu tag brauzerə deyir ki, "buradan sonra JavaScript kodu gəlir və onu icra et.”:

<script>
  alert("Salam, dünya!");
</script>

JavaScript-in HTML-ə 3 cür bağlanma üsulu:

1. Daxili script (Internal JavaScript) - JavaScript kodları birbaşa HTML faylının içində, <script> tagı vasitəsilə yazılır:

<!DOCTYPE html>
<html>
<head>
  <title>Daxili Script</title>
</head>
<body>
  <h1>Salam!</h1>
  <script>
    alert("Bu daxili scriptdir.");
  </script>
</body>
</html>

✅ Üstünlükləri:

- Kiçik layihələr üçün rahatdır.
- Fayl sayı az olur.

❌ Dezavantajları:

- Kodlar HTML ilə qarışır.
- Təmizlik və təkrar istifadəyə uyğun deyil.

2. Xarici script (External JavaScript) - Kodlar ayrıca .js faylına yazılır və HTML faylında çağırılır:

<!DOCTYPE html>
<html>
<head>
  <title>Xarici Script</title>
  <script src="main.js"></script>
</head>
<body>
  <h1>Xarici fayl nümunəsi</h1>
</body>
</html>

main.js:

alert("Bu, xarici scriptdir.");

✅ Üstünlükləri:

- Kod daha səliqəli və təşkilatlanmış olur.
- Eyni faylı bir neçə HTML faylında istifadə etmək mümkündür.
- Kodun saxlanması və inkişafı asanlaşır.

❌ Dezavantajları:

- Əlavə HTTP sorğusu (performansa təsir edə bilər).
- Əgər script faylı tapılmasa, səhv çıxar.

3. Inline script (Sətir içi JavaScript) - HTML elementinin içində birbaşa yazılır (məsələn, onclick atributu ilə).:

<button onclick="alert('Düyməyə basıldı!')">Beni bas</button>

✅ Üstünlükləri:

- Sadə funksiyalar üçün tez və rahatdır.

❌ Dezavantajları:

- Kodlar HTML ilə qarışır.
- Oxunması və idarə olunması çətindir.
- Təhlükəsizlik riski artar (XSS hücumları).

⭐️ Ən çox istifadə olunan hansıdır və niyə? -

✅ Xarici script üsulu ən çox istifadə olunur.

Səbəbləri:

- Kodun təkrar istifadəsi mümkündür.
- Layihənin böyüməsinə uyğun səliqəli struktur təmin edir.
- HTML və JavaScript ayrı saxlandığı üçün baxımı və inkişafı asan olur.

@TechCodeAz | TechCode.Az

#javascript #pdf

📚 400+ JAVASCRIPT INTERVIEW QUESTIONS

⚡️JavaScript 400+ İntervyu Sualı və Cavabı


@TechCodeAz | TechCode.Az

#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

#frontend #javascript #socket.io

Socket.io nədir? - Real vaxt rejimində veb programları üçün Javascript kitabxanasıdır.

O, WebSockets və ya fallbacks kimi ehtiyatlardan istifadə edərək brauzer və server arasında iki istiqamətli, hadisəyə əsaslanan əlaqəni təmin edir.

⚙️ Yüklənməsi:
Backend (Node.js):

npm install express socket.io

Frontend (Client):

<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>

💻 Nümunə:
Server (server.js):

const express = require("express");
const http = require("http");
const { Server } = require("socket.io");

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  cors: {
    origin: "*",
  },
});

io.on("connection", (socket) => {
  console.log("User connected:", socket.id);

  socket.on("chat-message", (msg) => {
    io.emit("chat-message", msg);
  });

  socket.on("disconnect", () => {
    console.log("User disconnected:", socket.id);
  });
});

server.listen(3000, () => {
  console.log("Server running on http://localhost:3000");
});

Client (index.html):

<!DOCTYPE html>
<html>
<head><title>Socket.IO Chat</title></head>
<body>
  <input id="msgInput" placeholder="Type a message..." />
  <button onclick="sendMessage()">Send</button>
  <ul id="messages"></ul>

  <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
  <script>
    const socket = io("http://localhost:3000");
    const messages = document.getElementById("messages");
    const input = document.getElementById("msgInput");

    socket.on("chat-message", (msg) => {
      const li = document.createElement("li");
      li.textContent = msg;
      messages.appendChild(li);
    });

    function sendMessage() {
      const msg = input.value;
      socket.emit("chat-message", msg);
      input.value = "";
    }
  </script>
</body>
</html>

Sən bunları edə bilərsən:
- 💬 Chat applications
- 🔔 Notifications (e.g., new followers, messages)
- 📈 Live dashboards (e.g., user count, data updates)
- 🎮 Multiplayer games
- 🧑‍💻 Real-time collaborative editors

@TechCodeAz | TechCode.Az