React.js və ya qısaca React — interaktiv istifadəçi interfeysləri yaratmaq üçün istifadə olunan JavaScript kitabxanasıdır. React vasitəsilə veb səhifənin interfeysini kiçik, müstəqil və təkrar istifadə edilə bilən hissələrə — component-lərə bölmək mümkündür. Sadə dillə desək, bir veb tətbiqdə menyu, məhsul kartı, axtarış sahəsi, düymə, modal pəncərə və digər interfeys hissələri ayrıca React component-i kimi hazırlana bilər. Məsələn, onlayn mağazada yüzlərlə məhsul kartı ola bilər. Hər məhsul üçün eyni HTML strukturunu ayrıca yazmaq əvəzinə bir ProductCard component-i yaradıb müxtəlif məhsul məlumatları ilə dəfələrlə istifadə etmək mümkündür. React xüsusilə dinamik və interaktiv veb tətbiqlərin hazırlanmasında geniş istifadə olunur.

React nə üçün istifadə olunur?

React istifadəçinin qarşılıqlı əlaqədə olduğu Frontend interfeyslərini yaratmaq üçün istifadə olunur. React ilə məhsul kataloqları, şəxsi kabinetlər, dashboard-lar, sosial platformalar, rezervasiya sistemləri, elektron ticarət saytları və müxtəlif web application-lar hazırlamaq mümkündür. React-in əsas üstünlüklərindən biri interfeysi component-lərə bölməyə imkan verməsidir.

Məsələn, bir dashboard belə component-lərdən ibarət ola bilər:

Header

Sidebar

UserProfile

StatisticsCard

NotificationList

Hər component öz funksiyasını yerinə yetirir və lazım gəldikdə başqa səhifələrdə də istifadə edilə bilər.

React JavaScript-dən nə ilə fərqlənir?

JavaScript proqramlaşdırma dilidir. React isə JavaScript ilə işləyən kitabxanadır. JavaScript istifadə edərək DOM elementlərini birbaşa seçmək, dəyişmək və event-ləri idarə etmək mümkündür.

React-də isə proqramçı daha çox interfeysin müəyyən state üçün necə görünməli olduğunu təsvir edir. State dəyişdikdə React interfeysin uyğun hissələrini yenidən render edir. Bu səbəbdən React öyrənməzdən əvvəl JavaScript-in əsaslarını bilmək vacibdir. Xüsusilə funksiyalar, Array və Object, destructuring, modules, scope, arrow functions, async/await və API ilə işləmək React öyrənmək üçün yaxşı baza yaradır.

React framework-dürmü?

React tez-tez framework adlandırılsa da, rəsmi olaraq JavaScript library — kitabxana kimi təqdim olunur. React əsasən istifadəçi interfeysinin yaradılması və component-lərin idarə edilməsinə fokuslanır. Routing, tam tətbiq strukturu, server-side rendering və digər funksiyalar üçün əlavə alət və framework-lərdən istifadə edilə bilər. Məsələn, Next.js React üzərində qurulan və tam veb tətbiqlərin hazırlanması üçün routing, server rendering, data fetching və digər imkanlar təqdim edən framework-dür.

Component nədir?

Component React-in əsas anlayışlarından biridir. Component istifadəçi interfeysinin müəyyən hissəsini təsvir edən təkrar istifadə edilə bilən kod blokudur. Müasir React-də component-lər əsasən JavaScript funksiyaları şəklində yaradılır.

Məsələn:

function Welcome() {

return <h1>JET Academy</h1>;

}

Burada Welcome adlı sadə React component-i yaradılıb. Daha sonra onu başqa component daxilində istifadə etmək mümkündür:

function App() {

return (

<div>

<Welcome />

</div>

);

}

Component yanaşması böyük interfeyslərin daha kiçik və idarəolunan hissələrə bölünməsinə kömək edir.

JSX nədir?

JSX JavaScript daxilində HTML-ə bənzər markup yazmağa imkan verən sintaksisdir.

Məsələn:

const title = <h1>React öyrənirik</h1>;

Bu görünüş HTML-ə bənzəsə də, JSX JavaScript ekosisteminin bir hissəsi kimi emal olunur. React component-lərinin böyük hissəsi JSX istifadə etməklə yazılır. JSX daxilində JavaScript ifadələrini {} işarələri arasında istifadə etmək mümkündür:

function Student() {

const name = "Murad";

return <h2>Salam, {name}</h2>;

}

JSX məcburi olmasa da, React layihələrində geniş istifadə olunur.

Props nədir?

Props component-ə xaricdən məlumat ötürmək üçün istifadə olunur. Məsələn, eyni CourseCard component-i müxtəlif kurslar üçün istifadə edilə bilər:

function CourseCard({ title }) {

return <h2>{title}</h2>;

}

Daha sonra:

<CourseCard title="Frontend Proqramlaşdırma" />

<CourseCard title="Full-Stack Proqramlaşdırma" />

Burada title prop-dur.

Props sayəsində eyni component strukturunu müxtəlif məlumatlarla təkrar istifadə etmək olur. React-də props bir component-in öz daxilində birbaşa dəyişdirməli olduğu məlumat deyil. Parent component məlumatı child component-ə ötürür və child həmin məlumat əsasında interfeysi göstərir.

State nədir?

State component-in zaman ərzində dəyişə bilən məlumatını saxlamaq üçün istifadə olunur. Məsələn, istifadəçinin düyməyə neçə dəfə klik etdiyini göstərən component hazırlaya bilərik.

import { useState } from "react";

function Counter() {

const [count, setCount] = useState(0);

return (

<button onClick={() => setCount(count + 1)}>

{count}

</button>

);

}

Burada count cari dəyəri saxlayır. setCount isə həmin state-i yeniləməyə imkan verir. State dəyişdikdə React component-i yeni məlumat əsasında yenidən render edir. Formalar, açılan menyular, məhsul səbəti, aktiv tab və modal pəncərələr kimi bir çox interaktiv element state vasitəsilə idarə edilə bilər.

Props və State arasında fərq nədir?

Props və State hər ikisi component daxilində məlumatlarla işləmək üçün istifadə olunur, lakin onların funksiyası fərqlidir. Props adətən parent component-dən child component-ə ötürülən məlumatdır. State isə component-in öz davranışı və istifadəçi qarşılıqlı əlaqəsi nəticəsində dəyişə bilən məlumatıdır. Məsələn, məhsul kartının adı və qiyməti props vasitəsilə verilə bilər. İstifadəçinin məhsulu “seçilmişlərə” əlavə edib-etməməsi isə state ilə idarə oluna bilər.

React Hooks nədir?

Hooks function component-lərin React-in müxtəlif imkanlarından istifadə etməsinə şərait yaradan xüsusi funksiyalardır. React-də ən çox istifadə olunan Hooks arasında useState, useEffect, useContext, useRef və useReducer var. Hook adları adətən use ilə başlayır.

Məsələn:

const [user, setUser] = useState(null);

Burada useState component üçün state yaratmağa imkan verir. React-də Hook-lar müəyyən qaydalara əsasən istifadə olunur. Onlar component-in yuxarı səviyyəsində və ya custom Hook daxilində çağırılmalıdır.

useState nədir?

useState component daxilində state saxlamaq və dəyişmək üçün istifadə olunan Hook-dur.

Məsələn:

const [darkMode, setDarkMode] = useState(false);

Burada darkMode cari vəziyyəti, setDarkMode isə onu dəyişdirmək üçün istifadə olunan funksiyanı göstərir.

İstifadəçi düyməyə klik etdikdə:

setDarkMode(true);

ilə state dəyişdirilə bilər.

useEffect nədir?

useEffect component-i xarici sistemlərlə sinxronlaşdırmaq tələb olunan hallarda istifadə olunan React Hook-larından biridir. Məsələn, müəyyən xarici subscription qurmaq, browser API ilə işləmək və ya bəzi hallarda serverdən məlumat alma prosesini idarə etmək üçün istifadə edilə bilər.

Sadə nümunə:

import { useEffect, useState } from "react";

function Users() {

const [users, setUsers] = useState([]);

useEffect(() => {

fetch("/api/users")

.then(response => response.json())

.then(data => setUsers(data));

}, []);

return <div>{users.length} istifadəçi</div>;

}

Burada component yaradıldıqdan sonra API-yə sorğu göndərilir və nəticə state daxilində saxlanılır. Müasir React layihələrində data fetching üçün framework və xüsusi data fetching kitabxanalarından da istifadə oluna bilər.

useRef nədir?

useRef render üçün lazım olmayan məlumatı saxlamaq və ya DOM elementinə reference əldə etmək üçün istifadə edilə bilər.

Məsələn:

import { useRef } from "react";

function Search() {

const inputRef = useRef(null);

function focusInput() {

inputRef.current.focus();

}

return (

<>

<input ref={inputRef} />

<button onClick={focusInput}>

Axtar

</button>

</>

);

}

Burada düyməyə klik edildikdə input elementinə focus verilir.

React-də event-lər necə işləyir?

React istifadəçinin interfeyslə qarşılıqlı əlaqəsinə cavab vermək üçün event handler-lərdən istifadə edir.

Məsələn:

function Button() {

function handleClick() {

alert("Klik edildi");

}

return (

<button onClick={handleClick}>

Klik et

</button>

);

}

React-də onClick, onChange, onSubmit və digər event-lər vasitəsilə istifadəçi əməliyyatlarına uyğun funksiyalar işlətmək mümkündür.

React-də Conditional Rendering nədir?

Bəzən component-in müəyyən hissəsi yalnız müəyyən şərt daxilində göstərilməlidir.

Məsələn:

function Profile({ loggedIn }) {

return (

<div>

{loggedIn

? <p>Profilinizə xoş gəldiniz</p>

: <p>Daxil olun</p>}

</div>

);

}

Bu yanaşma Conditional Rendering adlanır. İstifadəçinin login vəziyyəti, loading statusu, xəta mesajları və müxtəlif UI vəziyyətləri bu üsulla idarə edilə bilər.

React-də siyahılar necə göstərilir?

Array daxilində olan məlumatları component-lərə çevirmək üçün çox vaxt JavaScript-in map() metodundan istifadə olunur.

Məsələn:

const courses = [

"Frontend",

"Full-Stack",

"Java Backend"

];

function CourseList() {

return (

<ul>

{courses.map(course => (

<li key={course}>

{course}

</li>

))}

</ul>

);

}

React siyahı elementlərini fərqləndirmək üçün key istifadə edir. key mümkün qədər həmin məlumatı stabil və unikal şəkildə müəyyən etməlidir.

React API ilə necə işləyir?

Real React tətbiqlərində məlumatlar çox vaxt Backend serverdən API vasitəsilə alınır. Məsələn, məhsulların siyahısı serverdə saxlanılırsa, Frontend həmin məlumatı API vasitəsilə əldə edə bilər.

Sadə proses belədir:

React tətbiqi → API request → Backend → Database → API response → React UI

JavaScript-də fetch() və ya Axios kimi vasitələrdən istifadə etməklə API-yə sorğu göndərmək mümkündür. Bu səbəbdən API anlayışını bilmək React və ümumilikdə Frontend proqramlaşdırma üçün vacibdir.

Context API nədir?

Bəzən məlumatı component ağacında çox uzaqda yerləşən component-lərə ötürmək lazım gəlir. Hər mərhələdə props ötürmək bəzi hallarda kodu çətinləşdirə bilər. Bu vəziyyət tez-tez props drilling adlandırılır. React Context müəyyən məlumatın component ağacında daha aşağı səviyyələrdə istifadə olunmasına imkan verir. Məsələn, tətbiqin mövzusu — dark/light theme, dil seçimi və bəzi istifadəçi məlumatları Context vasitəsilə paylaşa bilər. Context bütün state management problemlərinin avtomatik həlli deyil. Layihənin ehtiyacına uyğun istifadə olunmalıdır.

Redux nədir və React ilə hansı əlaqəsi var?

Redux tətbiq state-inin idarə olunması üçün istifadə edilə bilən ayrıca JavaScript kitabxanasıdır. Kiçik React layihələrində useState, useReducer və Context kifayət edə bilər. Layihədə çoxlu component-in ortaq və mürəkkəb state ilə işləməsi tələb olunduqda Redux Toolkit kimi əlavə state management alətləri istifadə edilə bilər. JET Academy-nin Frontend proqramında da React-dən sonra Redux və Redux Toolkit ilə state management öyrədilir.

React TypeScript ilə istifadə olunurmu?

Bəli. React layihələri həm JavaScript, həm də TypeScript ilə hazırlana bilər. TypeScript React component-lərində props, state, API response və müxtəlif məlumat strukturlarının tiplərini əvvəlcədən müəyyən etməyə imkan verir.

Məsələn:

type CourseProps = {

title: string;

duration: number;

};

function Course({

title,

duration

}: CourseProps) {

return (

<p>

{title} — {duration} ay

</p>

);

}

Bu yanaşma xüsusilə böyük layihələrdə type səhvlərinin daha erkən aşkar edilməsinə və kodun daha aydın olmasına kömək edə bilər.

React və Next.js arasında fərq nədir?

React istifadəçi interfeysləri yaratmaq üçün kitabxanadır. Next.js isə React əsasında veb tətbiqlər hazırlamaq üçün yaradılmış framework-dür. React əsasən component və UI məntiqinə fokuslanır. Next.js isə routing, server və client components, data fetching, rendering strategiyaları və digər tətbiq səviyyəli imkanlar təqdim edir. Bu səbəbdən onları bir-birinin birbaşa alternativi kimi düşünmək düzgün deyil. Next.js React istifadə edir.

Öyrənmə ardıcıllığı adətən belə ola bilər:

JavaScript → React → TypeScript → Next.js

React və React Native eyni şeydirmi?

Xeyr. React əsasən web user interface yaratmaq üçün istifadə olunur. React Native isə React prinsiplərindən istifadə edərək iOS və Android üçün mobil tətbiqlər hazırlamağa imkan verən texnologiyadır. React Native-də web üçün istifadə olunan div və button kimi HTML elementləri əvəzinə mobil platformaya uyğun komponentlərdən istifadə edilir.

React-in üstünlükləri nələrdir?

React-in əsas üstünlüklərindən biri component əsaslı yanaşmadır. Eyni UI hissəsini müxtəlif səhifələrdə təkrar istifadə etmək mümkündür və böyük interfeysləri kiçik hissələrə bölmək layihənin idarə olunmasını asanlaşdıra bilər. React-in digər üstünlüklərinə geniş ekosistem, JavaScript və TypeScript ilə işləməsi, müxtəlif state management və routing həlləri ilə inteqrasiya və Next.js kimi framework-lərlə genişləndirilə bilməsi daxildir.

React-in çatışmazlıqları varmı?

React hər layihə üçün mütləq lazım deyil. Sadə və demək olar ki, interaktivliyi olmayan kiçik səhifədə React istifadə etmək əlavə mürəkkəblik yarada bilər. React yalnız UI kitabxanası olduğu üçün böyük tətbiqdə routing, data fetching, state management, testing və layihə arxitekturası üçün əlavə qərarlar vermək lazım gələ bilər. Bundan əlavə, React öyrənməyə başlayan şəxsin əvvəlcə JavaScript-i kifayət qədər yaxşı bilməsi vacibdir. Yalnız React sintaksisini əzbərləmək uzunmüddətli perspektivdə kifayət etmir.

React öyrənməyə haradan başlamaq lazımdır?

React öyrənməzdən əvvəl HTML, CSS və xüsusilə JavaScript əsaslarını bilmək lazımdır. JavaScript-də funksiyalar, Array və Object, destructuring, modules, Scope, DOM, events, async/await və API ilə işləmə mövzuları yaxşı baza yaradır.

Daha sonra aşağıdakı istiqamətdə inkişaf etmək mümkündür:

JavaScript əsasları → JSX → Components → Props → State → Events → Hooks → Forms → API → Routing → State Management → TypeScript → Next.js

React öyrənərkən yalnız tutorial izləmək əvəzinə praktik layihələr hazırlamaq daha faydalıdır. Məsələn, To-Do tətbiqi, məhsul kataloqu, hava tətbiqi, şəxsi dashboard və API ilə işləyən sadə e-commerce layihəsi hazırlamaq mümkündür.

React.js, JavaScript, TypeScript, Redux Toolkit, Next.js və digər müasir Frontend texnologiyalarını real layihələr üzərində öyrənmək istəyirsinizsə, JET Academy-nin Frontend Proqramlaşdırma Təlimi ilə tanış ola bilərsiniz.