React-a giriş

İnterfeys vəziyyətdən yaranır

React komponenti JSX qaytaran funksiyadır. Props valideyndən gələn məlumat, state isə komponentin yadda saxladığı vəziyyətdir. State dəyişəndə React görünüşü yeniləyir.

import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>
    Say: {count}
  </button>;
}

Massiv və obyekt state-ini birbaşa dəyişmə; yeni dəyər yarat və setter-ə ötür. Bir məlumatı bir neçə komponent istifadə edirsə, onu ən yaxın ortaq valideyndə saxlamaqdan başla.

Props, formalar və siyahılar

Props komponentin girişidir, state onun dəyişən yaddaşıdır. İdarə olunan input state-dən value alır və onChange ilə yenilənir. Checkbox üçün checked istifadə et. JSX-də label-ı htmlFor ilə sahənin id dəyərinə bağla.

import { useState } from 'react';
export function TaskList() {
  const [text, setText] = useState('');
  const [tasks, setTasks] = useState([]);
  function addTask(event) {
    event.preventDefault();
    const title = text.trim();
    if (!title) return;
    const task = { id: crypto.randomUUID(), title };
    setTasks(previous => [...previous, task]);
    setText('');
  }
  return <>
    <form onSubmit={addTask}>
      <label htmlFor="task-title">Tapşırıq</label>
      <input id="task-title" value={text}
        onChange={event => setText(event.target.value)} required />
      <button type="submit">Əlavə et</button>
    </form>
    <ul>{tasks.map(task => <li key={task.id}>
      {task.title}
      <button type="button" onClick={() =>
        setTasks(previous => previous.filter(item => item.id !== task.id))
      }>Sil: {task.title}</button>
    </li>)}</ul>
  </>;
}

Sabit ID elementin kimliyini saxlayır. Element əlavə edilən və silinən siyahılarda indeksi key kimi seçmə. filter ilə sil, map və yeni obyektlə yenilə. Yüklənmə, xəta və boş nəticəni ayrıca render et; rəqəm sıfır ola bilərsə count > 0 && ... kimi açıq şərt yaz.

Həyat dövrü və Effect təmizlənməsi

Əvvəlki nümunələrdə sinif komponentlərinin render, this.props, this.state, setState, componentDidMount və componentWillUnmount API-ləri də var. Bunlar mövcud layihələri oxumağa kömək edir. Yeni nümunələrdə funksiya komponentləri və Hook-larla başla. Sinifdəki setState obyektin bəzi xassələrini birləşdirə bilər, useState setter-i isə bütün dəyəri əvəz edir.

import { useEffect, useState } from 'react';
export function Timer() {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setSeconds(value => value + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <p>Keçən saniyə: {seconds}</p>;
}

Effect xarici sistemlə sinxronlaşma üçündür. Dinləyicini sil, taymeri dayandır və effect-in oxuduğu reaktiv dəyərləri asılılıqlarda göstər. Cleanup yenidən sinxronlaşmadan əvvəl və unmount zamanı işləyə bilər. State yeniləməsi cari renderdəki dəyişəni dərhal dəyişmir.

Client routing

SPA-da URL-dən asılı olaraq interfeysin hissəsi dəyişir. React Router-in deklarativ rejimində BrowserRouter, Routes, Route və Link ilə marşrut qurmaq olar. /products/:id yol parametri, ?search=... isə query parametridir. Aşağıdakı müasir nümunə react-router paketindən istifadə edir; Əvvəlki köhnə versiyanın import və prop-larını bununla qarışdırma.

import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router';
function Product() {
  const { id } = useParams();
  return <h1>Məhsul: {id}</h1>;
}
export function App() {
  return <BrowserRouter>
    <nav><Link to="/">Ana səhifə</Link> <Link to="/products/1">Məhsul 1</Link></nav>
    <Routes>
      <Route path="/" element={<h1>Məhsullar</h1>} />
      <Route path="/products/:id" element={<Product />} />
      <Route path="*" element={<h1>Səhifə tapılmadı</h1>} />
    </Routes>
  </BrowserRouter>;
}

Bu ayrıca React təlim layihəsi üçündür; roadmap.az-ın Astro marşrutlaşdırmasını əvəz etmir. SPA yayımlayanda birbaşa alt URL açılışı üçün hosting fallback-ını da qur. Keçidləri, Geri düyməsini və səhifəni yeniləməyi yoxla.

Ortaq vəziyyət və Redux

Əvvəl state-i ən yaxın ortaq valideynə qaldır. Ayrı hissələrin mürəkkəb ortaq state-ə ehtiyacı olduqda Redux-u qiymətləndir. Store vəziyyəti saxlayır, action baş verəni bildirir, reducer yeni vəziyyəti hesablayır. Əvvəlki klassik createStore və connect nümunələrinin müasir qarşılığı Redux Toolkit və React-Redux Hook-larıdır.

import { configureStore, createSlice } from '@reduxjs/toolkit';
const cart = createSlice({
  name: 'cart',
  initialState: { items: [] },
  reducers: {
    added(state, action) { state.items.push(action.payload); },
    removed(state, action) {
      state.items = state.items.filter(item => item.id !== action.payload);
    }
  }
});
export const { added, removed } = cart.actions;
export const store = configureStore({ reducer: { cart: cart.reducer } });

Komponent ağacını react-redux paketinin <Provider store={store}> elementi ilə əhatə et; useSelector(state => state.cart.items) ilə oxu və useDispatch() nəticəsinə action ötür. createSlice daxilində mutasiya kimi görünən yazını Immer dəyişməz yeniləməyə çevirir. Bu qayda adi React state-də birbaşa mutasiyaya icazə vermir.

Mövzu üzrə praktika

Tapşırıq siyahını React ilə yenidən qur. Forma, filtr və tapşırıq sətri üçün ayrı komponentlər yarat.

Əlavə, silmə və filtr işləyir; state birbaşa dəyişdirilmir və konsolda key xəbərdarlığı yoxdur.

Mövzunun yoxlama siyahısı

• JSX, komponent və props
• useState və idarə olunan formalar
• Siyahılarda sabit key dəyərləri
• State-i ortaq valideyn komponentə qaldırmaq
• Sinif komponentləri və lifecycle kodunu oxumaq
• useEffect, asılılıqlar və cleanup
• Client routing, yol parametrləri və SPA
• Redux store, action, reducer və Redux Toolkit