• Басқарылатын формалар (Controlled forms):
  Форманың мәні әрдайым компоненттің күйінде сақталады. Әрбір енгізілген өзгеріс (мысалы, input ішіндегі мәтін) React күйін жаңартады, сондықтан форма толығымен React бақылауында болады. Бұл тәсіл деректердің сенімділігін арттырады, тексерулерді (валидация) жеңілдетеді және қолданба логикасымен тығыз байланысты.

• Басқарылмайтын формалар (Uncontrolled forms):
  Бұл тәсілде деректер React күйінде сақталмайды. Оның орнына, мәндерді алу үшін ref немесе тікелей DOM-ға жүгіну қолданылады. Бұл әдіс кейде жеңілірек және аз кодты қажет етеді, бірақ қолданбаның жалпы логикасына деректерді интеграциялау қиынырақ болуы мүмкін.

Практикада күрделі логикасы бар қосымшалар көбінесе басқарылатын формаларды пайдаланады, ал қарапайым, тез жасалатын формаларда басқарылмайтын тәсіл қолданылуы мүмкін.

React-та форма логикасын құру кезінде дұрыс тәсілді таңдау жобаның архитектурасына әсер етеді.

1. Басқарылатын формалар (Controlled forms)

Артықшылықтары:

• Деректер әрдайым компонент күйімен (state) синхрондалады;

• Логика мен валидацияны оңай іске асыруға болады;

• Реактивтілік жоғары — енгізу кезіндегі әр өзгерісті бақылауға мүмкіндік береді.

Кемшіліктері:

• Көбірек код жазуды талап етеді (әр input үшін onChange және value баптау керек);

• Үлкен формаларда көптеген күй жаңартулары өнімділікке әсер етуі мүмкін.

2. Басқарылмайтын формалар (Uncontrolled forms)

Артықшылықтары:

• Қарапайым, тез орнатылады — кішігірім формалар үшін ыңғайлы;

• Әр енгізу үшін қосымша күй жаңартуларын қажет етпейді.

Кемшіліктері:

• Деректер React бақылауында емес, сондықтан күрделі тексерулер мен синхронизация қиын;

• ref арқылы DOM-мен тікелей жұмыс істеу керек.

Қолдану жағдайлары:

• Егер форма шағын әрі қарапайым болса (мысалы, іздеу жолы) — басқарылмайтын тәсіл ыңғайлы;

• Егер форма күрделі, бірнеше тексеру, шартты логика және деректерді сервермен синхрондау талап етсе — басқарылатын тәсілді таңдау дұрыс.

React Hook Form – бұл React қосымшаларында формаларды тез әрі тиімді құруға көмектесетін құрал. Оның басты артықшылықтары:

• Жеңіл және жылдам: кітапхана кішкентай көлемді, қосымшаға ауырлық түсірмейді.

• Өнімділік: Controlled формалардағы сияқты әр өзгеріске күй жаңарту жасалмайды, сондықтан қосымша жылдамырақ жұмыс істейді.

• Оңай валидация: деректерді тексеру (валидация) қарапайым әрі ыңғайлы жолмен іске асырылады.

• Ықшам код: input өрістерін тіркеу (register) арқылы көп артық кодсыз форманы басқаруға мүмкіндік береді.

Бұл бөлімде біз кітапхананың негізгі идеяларын, не үшін қолданылатынын және оны орнату жолын қарастырамыз. Келесі қадамда — нақты код мысалдарымен жұмыс істейміз.

React Hook Form-ды пайдалану үшін алдымен оны орнату керек:

npm install react-hook-form

Содан кейін форманы мынадай түрде жазуға болады:

import React from "react"; import { useForm } from "react-hook-form"; export default function MyForm() { const { register, handleSubmit } = useForm(); const onSubmit = (data) => { console.log(data); // Форма деректері }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("name")} placeholder="Есіміңіз" /> <input {...register("email")} type="email" placeholder="Email" /> <button type="submit">Жіберу</button> </form> ); }

Бұл кодта:

• useForm — формамен жұмыс істеуге қажетті құралдарды береді;

• register — input-тарды формаға «тіркейді»;

• handleSubmit — форманың жіберілуін өңдейді және енгізілген деректерді onSubmit функциясына береді.

Бұл тәсіл дәстүрлі controlled формаларға қарағанда аз код жазуға, өнімділікті арттыруға мүмкіндік береді.

Fetch — браузерлерде HTTP сұраныстарын орындауға арналған кірістірілген JavaScript API. Ол серверден деректер алу немесе серверге ақпарат жіберу үшін қолданылады. Fetch-тің басты артықшылығы — асинхронды жұмыс істеуі және Promise арқылы нәтижелерді өңдеу мүмкіндігі.

Fetch көмегімен әзірлеушілер:

• API арқылы JSON форматындағы деректерді ала алады;

• форма деректерін немесе файлдарды серверге жібере алады;

• сұраныс күйін (сәтті, сәтсіз) бақылай алады;

• жауапты өңдеп, интерфейсте динамикалық өзгерістер жасай алады.

Fetch-тің негізгі жұмыс принципі:

1. Серверге сұраныс жіберу (GET, POST, PUT, DELETE).

2. Серверден жауап алу.

3. Жауапты JSON немесе басқа форматқа түрлендіру.

4. Алынған деректерді беттегі элементтерге енгізу немесе логикада пайдалану.

Fetch — қазіргі веб-қосымшаларда API-лармен жұмыс істеудің стандартты және ең танымал әдістерінің бірі.

Бұл сабақта біз JavaScript-тегі HTTP сұраныстарын орындауға арналған кеңінен қолданылатын Axios кітапханасын қарастырамыз. Axios — браузерде де, серверде де (Node.js) жұмыс істейтін, қарапайым әрі түсінікті API-і бар кітапхана.

Сабақ барысында келесі аспектілер қарастырылады:

1. Axios деген не?

• HTTP сұраныстарын орындауға арналған кітапхана

• Promise негізінде жұмыс істейді

• Fetch-пен салыстырғанда жеңіл синтаксис

• Автоматты түрде JSON-ды түрлендіреді

Бұл бөлімде Axios кітапханасының басқа HTTP құралдардан айырмашылығы неде екені және оны тиімді пайдаланудың ерекшеліктері толық түсіндіріледі. Сабақ нақты мысалдармен қамтамасыз етіледі.

---

1. Автоматты JSON түрлендіруі

Axios серверден келген JSON-ды автоматты түрде JavaScript объектісіне айналдырады.

axios.get('/users').then(res => console.log(res.data));

Fetch-пен салыстырғанда response.json() қолданудың қажеті жоқ.

---

2. Қате өңдеудің жетілдірілген жүйесі

Axios қателерді үш категорияға бөледі:

axios.get('/data') .catch(error => { if (error.response) { console.log('Сервер қатесі:', error.response.status); } else if (error.request) { console.log('Жауап жоқ...'); } else { console.log('Басқа қате:', error.message); } });

Бұл қателерді түсіну мен түзетуді жеңілдетеді.

---

3. Базалық URL орнату

Көп сұранысты бір API-ге жібергенде ыңғайлы.

const api = axios.create({ baseURL: 'https://api.example.com/' }); api.get('/users'); api.post('/posts');

4. Таймаут орнату

Сервер ұзақ жауап берсе, сұранысты тоқтатуға болады.

axios.get('/users', { timeout: 5000 }) .catch(err => console.log('Уақыт бітті'));

---

5. Интерцепторлар (Interceptors)

Сұраныс немесе жауап жіберілмей тұрып, оған өзгеріс енгізуге мүмкіндік береді.

Сұраныс интерцепторы

axios.interceptors.request.use(config => { config.headers.Authorization = 'Bearer TOKEN'; return config; });

Жауап интерцепторы

axios.interceptors.response.use( response => response, error => { console.log('Error intercepted'); return Promise.reject(error); } );

Бұл логирование, авторизация және қателерді бір жерден басқаруға көмектеседі.

Қолданбада желілік жүктемені басқару, қажет емес сұраныстарды тоқтату, пайдаланушы әрекетіне қарай сұраныстарды кешіктіру — қазіргі веб-жобаларда маңызды дағдылар. Бұл сабақта:

• Сұраныстарды болдырмау

• Батырманың жылдам басылуында дубликат сұраныстардың алдын алу

• Іздеу жолағында енгізуді debounce/delay жасау

• Axios және Fetch арқылы отмена жасау

• Жасанды кідіріс орнату

Толық түсіндіріледі.

---

1. Сұранысты болдырмау (Cancellation)

Fetch: AbortController арқылы болдырмау

JavaScript-та сұранысты болдырмаудың ең негізгі тәсілі — AbortController.

const controller = new AbortController(); fetch('/users', { signal: controller.signal }) .then(res => res.json()) .then(data => console.log(data)) .catch(err => { if (err.name === 'AbortError') { console.log('Сұраныс тоқтатылды'); } }); // 1 секундтан кейін болдырмау setTimeout(() => controller.abort(), 1000);

Қолдану мысалы:
Іздеу жолағында әр енгізген сайын ескі сұранысты тоқтату.

---

Axios: Cancel Token (ескі) немесе AbortController (жаңа)

Axios бұрын арнайы CancelToken қолданған.
Қазір стандарт ретінде AbortController қолдану ұсынылады.

const controller = new AbortController(); axios.get('/users', { signal: controller.signal }) .catch(err => { if (axios.isCancel(err)) { console.log('Axios сұранысы тоқтатылды'); } }); // Қажет кезде тоқтату: controller.abort();

---

2. Сұранысты кешіктіру (Delay / Debounce)

Сұранысты кешіктіру сайтты жылдамдатуға және қажетсіз жүктемені азайтуға көмектеседі.

---

2.1. setTimeout арқылы қарапайым задержка

function delayedFetch(url, delay = 1000) { return new Promise(resolve => { setTimeout(() => resolve(fetch(url)), delay); }); } delayedFetch('/posts', 1500) .then(res => res.then(r => r.json())) .then(data => console.log(data));

---

2.2. Debounce — тез жазғанда әр символға сұраныс кетпеуі үшін

Мысалы, іздеу жолағы:

function debounce(fn, delay) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); }; } const search = debounce((query) => { axios.get(`/search?q=${query}`).then(res => console.log(res.data)); }, 500); // input event: input.oninput = (e) => search(e.target.value);

Нәтиже:
Пайдаланушы тоқтап, 0.5 секунд өтпейінше сұраныс жіберілмейді.

---

2.3. Axios-та жасанды задержка жасау

Интерцептор арқылы:

axios.interceptors.request.use(async (config) => { await new Promise(res => setTimeout(res, 1000)); // 1 сек задержка return config; });

---

3. Отмена + задержка біріктірілген мысал

let controller; function searchUser(query) { if (controller) controller.abort(); // ескі сұранысты тоқтату controller = new AbortController(); setTimeout(() => { axios.get(`/users?name=${query}`, { signal: controller.signal }) .then(res => console.log(res.data)) .catch(err => { if (err.name === 'CanceledError') { console.log('Сұраныс тоқтатылды'); } }); }, 500); }

React Query — REST API немесе кез келген сыртқы дерек көзінен алынған ақпаратты басқаруды автоматтандыратын кітапхана. Әдеттегі Axios/Fetcһ қолданылатын жобаларда деректерді алу, сақтау, қателерді өңдеу, жүктелу статустарын көрсету кодты күрделі етеді.

React Query бұл процесті жеңілдетіп, “деректермен жұмыс логикасын” бір жерге жинайды.

---

React Query не үшін қолданылады?

• Деректерді автоматты түрде кэштеу

• Ескі деректерді фондық жаңарту

• Параллель сұраныстар

• Сұраныстарды қайтадан орындау (refetch)

• Жүктелу / қате статусын бақылау

• Infinite scroll

• Сұранысты тоқтату

• Оптимистік жаңарту (optimistic update)

Бұл мүмкіндіктер React қосымшасын әлдеқайда жылдам және тұрақты етеді.

---

1. Орнату

npm install @tanstack/react-query

Провайдерді қосу:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryClient(); export default function App() { return ( <QueryClientProvider client={queryClient}> <MyComponent /> </QueryClientProvider> ); }

---

2. useQuery — деректерді алу

React Query-дің негізгі ілмегі (hook) — useQuery.

import { useQuery } from '@tanstack/react-query'; import axios from 'axios'; function Users() { const { data, isLoading, error } = useQuery({ queryKey: ['users'], queryFn: async () => { const res = await axios.get('/api/users'); return res.data; } }); if (isLoading) return <p>Жүктелуде...</p>; if (error) return <p>Қате пайда болды</p>; return ( <ul> {data.map(user => <li key={user.id}>{user.name}</li>)} </ul> ); }

React Query — деректерді кэштеуді толық автоматтандыратын қуатты құрал. Кәдімгі React жобаларында деректерді сақтау, жаңарту, синхрондау, жүктелу статусын көрсету сияқты процестерді әрқайсысын қолмен жазу керек.

Ал React Query бұл процестерді бірегей кэштеу механизмі арқылы оңтайландырады.

---

1. React Query кэші деген не?

React Query кэші — серверден алынған деректердің жадыда сақталатын көшірмесі.

Кэш келесілер үшін керек:

• бірдей сұранысты қайта орындамау

• қолданушы басқа бетке ауысып қайта келгенде API-ді қайта шақырмау

• офлайн кезде де деректі көрсету

• фондық жаңарту

• деректерді жылдам көрсету

React Query кэшті queryKey бойынша сақтайды.

useQuery({ queryKey: ['users'], queryFn: fetchUsers });

---

2. Stale Time (деректердің ескіру уақыты)

staleTime — деректер қанша уақыт «жаңарған» болып саналады.

Осы уақыт ішінде React Query API-ге қайта сұраныс жасамайды.

useQuery({ queryKey: ['products'], queryFn: fetchProducts, staleTime: 1000 * 60, // 1 минут });

Мысалы:
Пайдаланушы бір минут ішінде осы бетке қайта келсе — React Query API-ді шақырмайды, дайын деректі кэштен көрсетеді.

---

3. Cache Time (кэштің сақтау уақыты)

cacheTime — сұраныс қолданылмай қалғаннан кейін кэштің жадыдан қанша уақыттан соң өшірілетінін анықтайды.

useQuery({ cacheTime: 1000 * 60 * 5 // 5 минут });

Мысалы:
Пайдаланушы беттен кетсе, 5 минут бойы тоқтап тұрған кэш сақталады. Егер осы 5 минут ішінде қайта келсе — API шақырылмай, кэштен жылдам нәтижені алады.

---

4. React Query қалай кэш жаңартады?

React Query деректерді келесі жағдайларда автоматты түрде қайта фетч жасайды:

• терезе фокусқа қайта келгенде

• желі қайта қосылған кезде

• staleTime бітсе

• queryKey өзгерсе

• invalidateQueries шақырылса

Мысалы:

queryClient.invalidateQueries(['users']);

Бұл users деректерін жаңартуға мәжбүрлейді.

Веб-жобаларды дамыту кезінде деректердің бірнеше түрін қолдану керек: API URL, кілттер, дерекқор параметрлері және басқа конфигурациялар. Бұл ақпаратты код ішінде тікелей жазу қауіпті және ыңғайсыз. Сол үшін ортаның айнымалылары (environment variables) қолданылады.

Ол арқылы:

• Жобаны әртүрлі ортада (dev/prod/test) іске қосуға болады

• Құпия кілттерді кодтан оқшаулауға болады

• Кодты қайта жазбай-ақ конфигурацияны өзгерту мүмкіндігі болады

---

1. .env файлы

Жоба түпкі қалтасында .env файлын жасаймыз:

REACT_APP_API_URL=https://api.example.com REACT_APP_API_KEY=123456

• React жобасында айнымалылар REACT_APP_ префиксімен басталуы керек

• Басқа жобаларда (Node.js) бұл шектеу жоқ

---

2. Айнымалыны қолдану

React ішінде:

const apiUrl = process.env.REACT_APP_API_URL; const apiKey = process.env.REACT_APP_API_KEY; axios.get(`${apiUrl}/users?key=${apiKey}`) .then(res => console.log(res.data));

Node.js жобасында:

const apiUrl = process.env.API_URL; const apiKey = process.env.API_KEY;

---

3. Бірнеше ортаны басқару

.env.development

REACT_APP_API_URL=https://dev-api.example.com

.env.production

REACT_APP_API_URL=https://api.example.com

• React автоматты түрде ортаға сәйкес файлды қолданады

• Build кезінде дұрыс айнымалы пайдаланылады

---

4. Build жасау

React жобасын құрастыру кезінде:

npm run build

• Build кезінде .env.production файлындағы айнымалылар қолданылады

• HTML, JS файлдарында process.env.REACT_APP_* айнымалыларының мәні енеді

Node.js жобасында:

NODE_ENV=production node index.js

• process.env.NODE_ENV арқылы орта анықталады

• Керек болса арнайы .env.production файлынан деректер оқылады

---

5. Құпия деректерді қорғау

• API кілтін фронтендке тікелей қою қауіпті, тек backend арқылы жіберу ұсынылады

• .env файлды .gitignore-ге қосу керек

• Құпия деректерді тек серверде немесе қауіпсіз конфигурация менеджері арқылы сақтау

---

6. Қорытынды

Ортаның айнымалыларын пайдалану:

• Жобаны әртүрлі ортада оңай баптауға мүмкіндік береді

• Құпия деректерді қауіпсіз сақтауға көмектеседі

• Кодты қайта жазбай-ақ конфигурацияны өзгертуге мүмкіндік береді

• Build кезінде дұрыс айнымалы қолданылып, жобаның дұрыс жұмыс істеуін қамтамасыз етеді

Nginx — жоғары өнімді, жеңіл салмақты веб-сервер және reverse proxy. Ол веб-қосымшаларды орналастыруда, сұраныстарды басқаруда және қауіпсіздік шараларын қолдануда кеңінен қолданылады.

Сабақта қарастыратын негізгі тақырыптар:

• Nginx орнату және іске қосу

• Конфигурация файлдарының құрылымы

• Виртуалды хосттарды баптау

• Reverse proxy орнату

• HTTPS сертификаттарын қосу

• Статикалық және динамикалық контентті басқару

---

1. Орнату (Ubuntu мысалы)

sudo apt update sudo apt install nginx sudo systemctl start nginx sudo systemctl enable nginx

Тексеру:

sudo systemctl status nginx

• Сервер қосулы болу керек

• Браузерде http://localhost ашып көріңіз

---

2. Конфигурация файлы

Негізгі конфигурация файлы: /etc/nginx/nginx.conf

• http {} — HTTP сервер параметрлері

• server {} — әрбір виртуалды хост

• location {} — URL маршруттарын өңдеу

Мысал:

server { listen 80; server_name example.com www.example.com; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; } }

---

3. Виртуалды хосттар (server blocks)

• Әр веб-сайтқа жеке server блогын жасау

• Файлдар: /etc/nginx/sites-available/

• Символдық сілтеме: /etc/nginx/sites-enabled/

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

• Конфигурацияны тексеру:

sudo nginx -t

• Қайта жүктеу:

sudo systemctl reload nginx

---

4. Reverse Proxy орнату

Node.js немесе басқа серверлерді Nginx арқылы көрсету:

server { listen 80; server_name example.com; location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } }

• Бұл әдіс арқылы сыртқы сұраныстар Nginx арқылы ішкі серверге жіберіледі

---

5. HTTPS қосу (Let's Encrypt)

sudo apt install certbot python3-certbot-nginx sudo certbot --nginx -d example.com -d www.example.com

• Автоматты сертификат жаңарту

sudo systemctl status certbot.timer

---

6. Статикалық контентті басқару

location /static/ { root /var/www/example.com; expires 30d; add_header Cache-Control "public"; }

• CSS, JS, суреттерді кэштеу арқылы жылдамдықты арттыру

---

7. Қорытынды

Nginx веб-серверін дұрыс баптау:

• Жоғары өнімділік береді

• Бірнеше сайтты бір серверде орналастыруға мүмкіндік береді

• Reverse proxy арқылы backend серверлерді қорғауға мүмкіндік береді

• HTTPS арқылы қауіпсіздік береді

• Статикалық контентті жылдам жеткізеді