React Hooks

React Context

React lifecycle

API

State management (Redux, Redux toolkit)

React query

Socket.io

Frontend Architecture

Frontend Optimization

Nextjs

Freelance

Frontend Level Up kimlar uchun?

Frontend yo'nalishi bo'yicha real loyihalar orqali tajribasini oshirmoqchi bo'lganlar va portfoliosini kuchaytirib olmoqchi bo'lganlar dasturchilar uchun. Faqat darslar bo'ladimi? Yo'q albatta, bu 2 oylik ishlab chiqilgan dastur va bunda siz 5 tagacha real loyihalar qilasiz, suhbatlarga tayyorgarlik ko'rasiz va albatta yuqorida ko'rsatilgan mavzular bo'yicha darslar o'tiladi.

Freelance asosida ishlashni ham o'rganasiz, loyihalarni qayerdan olish kerakligi va mijozlar bilan qanaqa ishlash kerakligi. O'zimning freelance loyihalarimni ushbu Frontend Level Up da o'qiganlar bilan birga qilishimiz mumkin. Bu uchun unga haq to'lanadi albatta.

Bu bepul bo'ladimi? Yo'q bu 2 oylik ishlab chiqilgan dastur bo'lganligi sabab to'lovi mavjud va har oy 670 mingdan. Umumiy to'lov: 1mln 340 ming so'm, agar siz umumiy bitta to'lov qilmoqchi bo'lsangiz 10% chegirmaga ega bo'lasiz.

Hozirgi o'qiyotgan o'quvchilarning natijalari:

Batafsil: https://t.me/Muhammadislom_Dev/1733

Sizni natijangizni kafolatlayman faqat 2 oy davomida barcha aytilganlarni qilsangiz.

Bog'lanish uchun: @muhammadislomm

Bu maqola orqali Classic Architecture haqida yozmoqchiman. Bu arxitektura orqali o'zim qilgan va qilmoqchi bo'lgan barcha loyihalarimda foydalanaman. Ixtiyoriy Frameworkda foydalanish mumkin, React yoki Vue orqali bemalol foydalanishingiz mumkin.

Classic Architecture hali ham eng ko‘p qo‘llaniladigan va ishonchli yondashuvlardan biri hisoblanadi. Ushbu arxitektura yondashuvi loyihani ishlab chiqishda sodda va tartibli tuzilmani ta'minlaydi. Chunki bunday arxitektura odatda barcha komponentlarni bir joyda birlashtirishga asoslangan. Ko‘pchiligimiz ushbu yondashuv asosidagi loyihalarda ishlaganmiz.

Asosiy Afzalliklari

1. Sodda va tushunarli tuzilma
   Classic Architecture odatda oddiy loyiha tuzilishiga ega bo‘lib, yangi boshlovchilar va kichik jamoalar uchun tez o‘zlashtirilishi mumkin. Bu arxitektura kodni boshqarish va tushunishni osonlashtiradi.
2. Tezroq ishlab chiqish
   Barcha komponentlar bir joyda bo‘lganligi sababli, dasturiy ta'minotni ishlab chiqish jarayoni tezlashadi. Ayniqsa, kichik hajmdagi loyihalarda bu juda samarali.
3. Tezkor o‘zgarishlar
   Classic Architecture'da o‘zgarishlar kiritish oson, chunki barcha komponentlar bir-biriga yaqin bog‘langan.

Rasmda ko'rib turganizdek o'zim tuzgan real loyihaning arxitekturasi. Loyiha TypeScriptda qilinganligi sabab qo'shimcha folderlar qo'shish talab qilingan, loyihaning katta kichikligiga qarab, loyihadagi o'zgaruvchilarni saqlash va fakeDatalar uchun ham alohida folder ochilgan.

/assets bu qismida loyihadagi /icons, /fonts, /images folderlari tashkil qilingan.

/components bu folderda barcha o'zgaruvchi componentlar joylashgan.

/constants loyihadagi o'zgaruvchilarni shu yerda saqlab olingan. Masalan API uchun url, key, pagination_size, pagination_count va boshqa o'zgaruvchilarni shunday folder ichida saqlash mumkin.

/hooks har bir loyihada API bilan ishlaganida dasturchi tomonidan ko'p joylarda foydalanadigan funksiyalarni hook sifatida qilib olinadi. Menda ushbu folderda CRUD uchun ishlab chiqilgan funksiyalar mavjud.

/pages bu folderda loyihaning barcha sahifalar jamlanmasi.

/router public va private routelar joylashgan.

/types loyiha TypeScriptda qilinganligi sabab typelar uchun bu folder tashkil qilingan.

Men qilgan real projectdagi arxitektura shunday ko'rinishda, bu arxitekturada hamma components ishlab chiqilgan va ularni props shaklida boshqarish mumkin. Odatda yangi boshlagan dasturchilar folderlar joylashuvini qilishda qiynalishadi, shaxsan o'zimda bunday holat bo'lgan.

https://t.me/Muhammadislom_Dev

Map - bu JavaScript-da kalit-qiymat (key-value) juftlarini saqlash uchun ishlatiladigan ma'lumotlar tuzilmasidir. Map bilan ishlashning asosiy afzalliklari quyidagilardir:

1. Har qanday turdagi kalit (key): Obyektlar bilan ishlaganda, faqat string yoki symbol tipidagi qiymatlar kalit bo'lishi mumkin. Ammo Map har qanday turdagi kalitlardan foydalanish imkonini beradi. Masalan, string, number, yoki boshqa obyektni ham kalit sifatida ishlatish mumkin.
2. Qo'shimcha funksionallar: Map obyektlarga nisbatan qulayroq metodlarni taqdim etadi, masalan, size xossasi orqali o'lchamini aniqlash, iteratsiya qilish, va boshqalar.

const map = new Map();
// String tipidagi kalit
map.set('name', 'Muhammadislom');

// Number tipidagi kalit
map.set(42, 'SchoolNumber');

// Obyektni kalit sifatida
const keyObject = { id: 1 };
map.set(keyObject, 'Object Key');

Set - bu JavaScript-dagi ma'lumotlar tuzilmasi bo'lib, u takrorlanmaydigan (unique) qiymatlar to'plamini saqlash uchun ishlatiladi. Set obyektlardan farqli ravishda, kalit-qiymat juftlarini saqlamaydi, faqat qiymatlar kolleksiyasini saqlaydi.

Set'ning Asosiy Xususiyatlari

1. Takrorlanmas qiymatlar: Set ichida bir xil qiymat bir necha marta bo'lishi mumkin emas. Agar bir xil qiymat qo'shishga urinsangiz, u qo'shilmaydi.
2. Qiymatlar tartibi: Set ichida saqlangan qiymatlar qo'shilgan tartibda saqlanadi.
3. Kalitlar yo'q: Set'da kalitlar ishlatilmaydi, faqat qiymatlar mavjud.
4. Qiymat tipi: Har qanday qiymat tipi (number, string, object, va boshqalar) Set ichida saqlanishi mumkin.

const set = new Set();
set.add(1);       // Number
set.add('Hello World'); // String
set.add({ id: 1 }); // Object

// Takroriy qiymat qo'shilmaydi
set.add(1); // Bu qiymat e'tiborga olinmaydi

WeakMap - bu JavaScript-da key-value juftlarini saqlash uchun ishlatiladigan maxsus ma'lumotlar tuzilmasi. U oddiy Map ga o'xshab ishlaydi, ammo WeakMap o'ziga xos xususiyatlarga ega:

Albatta! Quyida WeakMap haqida tushunchani to'liqroq va batafsilroq yozib chiqaman:

WeakMap

WeakMap - bu JavaScript-da key-value juftlarini saqlash uchun ishlatiladigan maxsus ma'lumotlar tuzilmasi. U oddiy Map ga o'xshab ishlaydi, ammo WeakMap o'ziga xos xususiyatlarga ega:

WeakMap'ning Asosiy Xususiyatlari

1. Kalit faqat obyekt bo'lishi mumkin:
   WeakMap ichidagi har bir kalit (key) faqat obyekt (object) bo'lishi shart. Oddiy qiymatlar (string, number, va boshqalar) kalit sifatida ishlatilmaydi.
2. Garbage Collection bilan ishlash:
   WeakMap-da saqlangan obyektlar boshqa joydan murojaat qilinmasa, avtomatik ravishda garbage collection (xotira tozalash) jarayoniga kiritiladi. Bu esa xotirani samarali boshqarishga yordam beradi.
3. Iteration imkoniyati yo'q:
   WeakMap ichidagi ma'lumotlarni iteratsiya qilib bo'lmaydi. Chunki uning asosiy maqsadi xotirani boshqarishni osonlashtirish bo'lib, iteratsiya qilish garbage collection jarayoniga xalaqit berishi mumkin.
4. O’lchamni bilib bo’lmaydi:
   WeakMap ichida nechta element borligini aniqlash imkoniyati yo'q (size xossasi yo'q).

const weakMap = new WeakMap();
const key1 = { name: 'Object One' };
const key2 = { name: 'Object Two' };

weakMap.set(key1, 'Value for key one');
weakMap.set(key2, 'Value for key two');

WeakSet - bu JavaScript'dagi maxsus ma'lumotlar tuzilmasi bo'lib, u takrorlanmaydigan obyektlar to'plamini saqlash uchun ishlatiladi. Oddiy Set ga o'xshab ishlaydi, ammo WeakSet o'ziga xos xususiyatlarga ega.

WeakSet'ning Asosiy Xususiyatlari

1. Faqat obyekt qiymatlari:
   WeakSet ichida faqat obyektlar saqlanishi mumkin (number, string, yoki boshqa primitiv qiymatlar ishlatilinmaydi).
2. Takrorlanmas qiymatlar:
   WeakSet ichida bir xil obyektni ikki marta qo'shib ko'rmoqchi bo'lsangiz, u faqat bir marta saqlanadi.
3. Garbage Collection bilan ishlash:
   WeakSet ichidagi obyektlar boshqa joydan murojaat qilinmasa, ular avtomatik ravishda garbage collection (xotira tozalash) jarayoniga kiritiladi.
4. Iteration imkoniyati yo'q:
   WeakSet ichidagi obyektlarni iteratsiya qilib bo'lmaydi (forEach yoki for...of ishlamaydi).
5. O’lchamni bilish imkoni yo'q:
   WeakSet ichidagi elementlar sonini bilish uchun size xossasi mavjud emas.

const weakSet = new WeakSet();
const obj1 = { name: 'Object 1' };
const obj2 = { name: 'Object 2' };

weakSet.add(obj1);
weakSet.add(obj2);

// Takroriy obyekt qo'shilmaydi
weakSet.add(obj1); // Bu qiymat qayta qo'shilmaydi

Bu savol turi interviewni topshirish leveliga qarab chuqurroq kirishi mumkin interview oluvchi. Xato va kamchiliklari bo'lsa uzr so'rayman! Share qilinganida mualliflik huquqiga amal qilinsin!

Muhammadislom_Dev

State nima?

Frontendda state — bu dasturdagi ma'lumotlarning o'zgaruvchan holati. Masalan:

• Foydalanuvchining login holati (kirgan yoki chiqib ketgan).
• Korzinkadagi mahsulotlar ro'yxati.
• Formadagi foydalanuvchi tomonidan kiritilgan ma'lumotlar.

State-ni boshqarish to'g'ri ishlatilinmasa, dastur ishlashida muammolar yuzaga kelishi mumkin, masalan:

• Ma'lumotlar sinxronligi buzilishi.
• Kutilmagan xatoliklar.

State Management turlari

State boshqarishni ikki asosiy turga ajratish mumkin:

1. Local State

Bu komponent ichida saqlanadigan va boshqariladigan state. Odatda kichik loyihalar uchun yetarli bo‘ladi. Misol uchun, React’da useState va useReducer yordamida local state boshqariladi.

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Click</button>
    </div>
  );
}

2. Global State

Bu bir nechta komponentlar orasida ma'lumot almashinadigan state. Katta loyihalarda global state boshqarish uchun maxsus kutubxonalardan foydalaniladi.

Foydalanish hollari:

• Foydalanuvchi ma'lumotlarini boshqarish (masalan, profil yoki autentifikatsiya holati).

Global state boshqarish uchun mashhur kutubxonalar:

• Redux
• MobX
• Zustand
• React Context API

Shaxsiy tajriba

Frontend dasturchi sifatida 3 yilga yaqin tajribamdan kelib chiqib, shu paytgacha State management uchun Redux va React query foydalanganman. Ko'pgina loyihalarni o'zim boshlaganimda React querydan foydalanaman.

Redux, Redux toolkit bulardan foydalanmaysizmi degan savol bo'lishi mumkin?

Bulardan foydalanish loyihani qurayotkan insonga bog'liq agar u shu tehnologiyalar asosida boshlasa ishni, loyiha yakunlaganiga qadar shundan foydalanadi Frontend dasturchilar.

React query yordamida o'zim katta projectlar uchun hook sifatida yaratib olaman har bir Create, Update, Delete, Get uchun ulardan birini namuma sifatida ko'rsatib o'taman.

import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { toast } from 'react-toastify';
import { request } from 'services/request';

const deleteRequest = (url) => request.delete(url);

const useDeleteQuery = ({ listKeyId }) => {
  const queryClient = useQueryClient();
  const { t } = useTranslation();

  const { mutate, isError, error, isLoading } = useMutation(
    ({ url }: { url }) => deleteRequest(url),
    {
      onSuccess: (data) => {
        toast.success(data?.data?.message || t('SUCCESSFULLY DELETED'));

        if (listKeyId) {
          queryClient.invalidateQueries(listKeyId);
        }
      },
      onError: (error) => {
        toast.error(error?.response?.data?.error?.message || 'ERROR');
      }
    }
  );

  return {
    mutate,
    isError,
    error,
    isLoading
  };
};

export default useDeleteQuery;

Namunada ko'rganizdek Loyihadagi Delete function uchun alohida useDeleteQuery funksiyasi yozilgan va u orqali istalgan joyda, URL va KEY berish orqali foydalanish mumkin.

Shu bilan ushbu mavzudagi postni yakunlamoqchiman. Xato va kamchiliklar bo'lsa uzr va men ham sizdek shu sohadagi o'rganuvchi insonman.

Mualliflik huquqiga amal qilinsin!

t.me/Muhammadislom_Dev

Savol: JavaScriptda funksiyalarning qanday turlari mavjud? Deklaratsiya qilingan funksiya bilan ifoda qilingan funksiya (function expression) o'rtasidagi farq nima?

Javob: JavaScriptda asosiy ikki turdagi funksiyalar mavjud: deklaratsiya qilingan funksiyalar va ifoda qilingan funksiyalar.

• Deklaratsiya qilingan funksiya:

function sum(a, b) {
    return a + b;
}

Bu funksiya hoisting deb ataladigan jarayon orqali funksiya e'lon qilingandan oldin ham chaqirilishi mumkin.

• Ifoda qilingan funksiya (function expression):

const sum = function(a, b) {

return a + b;

Bu funksiya e'lon qilingandan keyin chaqirilishi mumkin. Ifoda qilingan funksiyalar hoisting qilinmaydi.

2. Arrow funksiyalari:

Savol: Arrow funksiyalari nima va ular qanday qo'llaniladi? Arrow funksiyalarining odatiy funksiyalardan asosiy farqlari nimalarda namoyon bo'ladi?

Javob: Arrow funksiyalari qisqa va konsiz sintaksisga ega funksiyalardir va this kalit so'ziga bo'lgan aloqani o'zgartiradi.

• Arrow funksiya:

const sum = (a, b) => a + b;Asosiy farqlar:

• this kalit so'zi o'zgarmaydi, ya'ni arrow funksiya yaratish vaqtida qiymatini saqlaydi.
• Arrow funksiyalari konstruktor sifatida ishlatilmaydi va new operatori bilan chaqirilmaydi.

3. Callback funksiyalari:

Savol: Callback funksiyalari nima va ular qanday ishlaydi? Biror misol bilan callback funksiyasini tushuntirib bera olasizmi?

Javob: Callback funksiyalari boshqa funksiya tugallangandan keyin chaqiriladigan funksiyalardir.

• Misol:

function fetchData(callback) {
   setTimeout(() => {
   callback('Data fetched');
   }, 2000);
}

function logData(data) {
    console.log(data);
}
fetchData(logData);

Bu yerda logData funksiya fetchData funksiyasiga callback sifatida o'tkaziladi va setTimeout tugagandan keyin chaqiriladi.

4. Asynchronous funksiyalari:

Savol: Asynchronous funksiyalari va promise'lar haqida tushuntirib bera olasizmi? Async/Await sintaksisini tushuntirib bera olasizmi va qachon qo'llaniladi?

Javob: Asynchronous funksiyalar boshqa kod bajarilishi davomida boshlanadigan jarayonlarni bajarishga imkon beradi va natija tayyor bo'lganda keyin davom etadi.

Promise:

const fetchData = new Promise((resolve, reject) => {
   setTimeout(() => {
   resolve('Data fetched');
   }, 2000);
});
fetchData.then(data => console.log(data));

Async/Await:

async function getData() {
   const data = await fetchData;
   console.log(data);
}
getData();

async kalit so'zi funksiyani asinxron holga keltiradi, await esa promise natijasini kutib turadi.

5. Higher-order funksiyalari:

Savol: Higher-order funksiyalari nima va ular qanday ishlaydi? Biror misol bilan higher-order funksiyasini tushuntirib bera olasizmi?

Javob: Higher-order funksiyalar boshqa funksiyalarni argument sifatida qabul qiladigan yoki funksiyani natija sifatida qaytaradigan funksiyalardir.

• Misol:

function createMultiplier(multiplier) {
        return function(x) {
        return x * multiplier;
   }
}
const double = createMultiplier(2);
console.log(double(5)); // 10

Bu yerda createMultiplier higher-order funksiyasi bo'lib, funksiya qaytaradi.

Asosiy xususiyatlari:

1. Ikki tomonlama aloqa: Ma'lumot server va mijoz o'rtasida bir vaqtda harakatlanishi mumkin.
2. Transport fallback: Agar WebSocket qo'llab-quvvatlanmasa, HTTP polling kabi alternativ transport vositalariga o'tadi.
3. Avtorizatsiya: Xavfsiz aloqani ta'minlash uchun autentifikatsiya mexanizmlarini qo'llab-quvvatlaydi.

Socket.IO Qanday Ishlaydi?

Socket.IO ikkita asosiy qismini o'z ichiga oladi:

• Server qismi: Bu server tomonida Node.js yordamida ishlaydi.
• Client qismi: Browser yoki JavaScript orqali ishlaydi.

Aloqa quyidagi tarzda amalga oshadi:

1. Mijoz ulanishi: Socket.IO avtomatik ravishda eng mos transport protokolini tanlaydi.
2. Ma'lumot uzatish: Ma'lumot JSON formatida server va mijoz o'rtasida ketadi.
3. Aloqani boshqarish: Ulanish uzilgan taqdirda, Socket.IO qayta ulanishni ta'minlaydi.

Socket.io orqali o'zim real loyihada foydalanilgan code orqali namuna ko'rsatib o'taman.

  import { io } from 'socket.io-client';
  useEffect(() => {
    const socket = io(socketEnv, {
      extraHeaders: {
        Authorization: `Bearer ${token}`
      }
    });

    socket.on('connect', () => {
      console.log('Connected.');
    });

    socket.on('message', (data) => {
      console.log(data);
    });
    socket.on('employee-check-in', (data) => {
      console.log(data);
    });

    socket.on('error', (data) => {
      console.log(data);
    });

    socket.on('disconnect', () => {
      console.log('Disconnect.');
    });

    return () => {
      socket.disconnect();
    };
  }, []);

Birinchi o'rinda socket.io sayti orqali install qilish kerak bo'ladi va uni import qilinadi. Socketda event tinglanadi ya'ni hodisani kuzatish desak ham bo'ladi. Namunada employee-check-in eventi tinglangan va u orqali siz keladigan data ni ko'ra olasiz.

Ko'pchilik Socket, Websocket haqida tushunmasligi mumkin bunga oddiy misol telegram va chat yozishmali ilovalarni va saytlarni misol keltirish mumkin.

Shu bilan Socket bo'yicha kichik bir maqolani yakunlayman. Nasib qilsa bu asosida amal ham qilmoqchiman.

Foydalanilgan resurslar: socket.io

Mualliflik huquqiga amal qilinsin!

Hozirgi kunda O'zbekiston bozorida IT sohasida dasturchilarga talab oshmoqda buni yangi kompaniyalar va chet el kompaniyalarining kirib kelish natijasida bo'lmoqda. Lekin shunga qaramasdan o'rganuvchilar va ishga topshiruvchilar ham juda ko'p. Aksariyat holatda ishga topshiruvchilarda to'g'ri resume va portfolio yaxshi holatda emasligi mavjud.

IT dagi birinchi ishni qanday topish mumkin?

To'g'ri resume tayyorlagan va portfolio mavjudligi sizni ishga topshirayotkanda suhbatga chaqirish imkonini oshiradi. To'g'ri bu gapni hamma ham aytadi lekin hamma ham amal qilmaydi. O'zimdagi shaxsiy tajribadan kelib chiqsam yangi boshlaganimda menda ham resume juda dabdala edi desam bo'ladi, hozir o'sha resumeni ko'rsam kulgim keladi. Agarda sizning tanishingiz sizning sohangizda bo'lsa u bilan yaxshi muloqotni yo'lga qo'yishni tavsiya qilaman. Atrofingizdagi yaqinlaringiz bilan ham yaxshi networking qilish bu ishga kirish imkoniyatingizni bir muncha oshiradi.

HR ga yozganimda xabarimga javob bermadi yoki o'qimadi ham?

Buni hamma boshdan o'tkazgan vaqti kelsa o'zimda ham hozir shunday bo'ladi. Bunga o'zimdagi yechimni taklif qilaman bu orqali oz bo'lsa-da javob olish imkoniyati oshadi.

Siz yuborayotkan resumening nomi shunday ko'rinishda bo'lgani ma'qul sababi siz topshirayotkan kompaniya bir vaqtning o'zida 3-4 xil yo'nalishdagi vakansiya e'lon qilgan bo'lishi mumkin va bu orqali siz HR ga tushunarli qilasiz va o'zingizni hurmat qilish darajangizni ham belgilab beradi bunday kichik ish.

Shunga o'xshash ko'rinishda HR ga habar yuborgan yaxshi, juda ko'pchilik ishga topshirganida HR ga shunchaki resume o'zini yuboradi hech qanday "Salom" ham yozmaydi, bunday inson albatta javob olmaydi.

IT va umuman boshqa sohalarda birinchi ishni topish uchun shularga amal qilinsa suhbat uchun imkon topiladi. Suhbatdagi holat esa u kandinantning tajribasiga bog'liq vaziyat.

IT dagi daromadga kelsak....

Agarda siz ingliz tili yoki rus tili bilsangiz freelance saytlar orqali ish olib daromad qila olasiz. Freelance saytlardan kwork.ru va upwork.com shu saytlar orqali ish olib daromad qilsa bo'ladi. O'zbekistonda freelance asosida ishlaydigan tanishlariz bo'lsa ular bilan birgalikda ishlab tajriba orttirib olsa ham bo'ladi. Birinchi ishga joylashish va daromad qilish uchun albatta tajriba juda muhim.

O'zimdagi tajriba

Hozirda Datagaze LLC kompaniyasida Frontend (Reactjs, Nextjs) dasturchi sifatida ishlab kelmoqdaman. Umumiy tajribam davomida freelance asosida 30 ga yaqin loyihada ishlaganman va ularning barchasi o'z egalariga topshirilgan. Hozirda ham freelance asosida o'zim loyiha olib ishlab kelaman. Shu bilan ushbu postni yakunlamoqchiman.

E'tiboringiz uchun rahmat!

Xato va kamchiliklar bo'lsa uzr so'rayman va forward qilinganida iltimos mualliflik huquqiga amal qilinsin.

Telegram blog manzili: Muhammadislom_Dev