Clean code - bu shunday kodki, u o'qishga, tushunishga va saqlashga oson. Buning uchun u kodni o'qishni, test qilishni osonlatadigan, kamroq xatoga moyil qiladigan "Software design principles" deb ataluvchi tamoyillarga ergashish kerak bo'ladi. Quyida "clean code" ga erishish uchun muhim tavsiyalarni keltirib o'taman:

• Clarity(aniqlik) - kodni boshqalar o'qishga va tushunishga qiynalmaydigan qilib yozish.
• Simplicity(soddalik) - kod iloji boricha sodda va ortiqcha murakkablikdan holi bo'lishi kerak.
• Comments(izohlar) - bir qarashda tushunib bo'lmaydigan, murakkab kodlar uchun muxtasar izoh bo'lishi kerak.
• Naming(nomlash) - o'zgaruvchilar, funksiyalar va class larga ma'noli va ifodali nom qo'yish. Ma'noni anglatuvchi nom qo'yish, nima uchunligi haqida comment yozgandan yaxshiroq.
• Formatting(tartiblash) - kodning o'qishlik darajasini oshirish uchun uni tartibga solish.
• Functionality(funksionalligi) - kod kichik va yagona maqsadga ega bo'lgan funksiya va class larga ajratilgan bo'lishi kerak.
• Error handling(xatolar uchun holat) - kod ehtimoliy xatolarni ushlay olishi va bunday vaziyatlar uchun ham aniq ko'rsatmalarga ega bo'lishi kerak.
• Testing(testlash) - kod test qilishga oson va yuqori test natijalariga ega bo'lish kerak.
• Reusability(qayta ishlatilish) - kod takroriy ishlatilishga oson qilib yozilishi kerak.
• Performance(ishlashi) - kodning samarasi va tezkorligi ahamiyatli bo'lishi kerak.

Bu kabi yo'riqnomalarga amal qilish huddiki vaqt olayotganday tuyuliladi, ammo bularga amal qilishni boshlasangiz, kelajakdagi jamoaviy ishlarda ancha vaqt tejashga yordam beradi. Bundan tashqari kodimizning sifatini oshirishga yordam beruvchi bir qancha dizayn tamoyillari mavjud. SOLID, KISS, DRY kabi tamoyillarni allaqachon eshitgan bo'lsangiz ajab emas. Agar bularning barchasi haqida shu maqolada yozadigan bo'lsam, o'qishga odam erinib qoladi. Shu sabab bular va boshqa foydali tamoyillar haqida keyingi maqolada yozaman.

Kodlarni mashina tushunadigan tilga o'tkazishning 2ta metodi mavjud. AOT(ahead-of-time) va JIT(just-in-time).

AOT - dasturlarning ishga tushirilishidan oldin mashina tiliga o'tkazib olish. Static compilation ham deb yuritiladi.

JIT - dasturning runtime muhitida mashina tiliga o'girish. Dynamic compilation ham deb yuritiladi.

AOT compilation dan foydalangan dasturlar allaqachon mashina tiliga o'tkazib bo'lingani sababli tezroq ishga tushadi, kamroq xotira sarf qiladi va generatsiya qilingan kodlar xavfsizlik tomondan ham ustunroq bo'ladi. Lekin ular testing uchun noqulay va har gal o'zgartirish kiritilganda compilation jarayoni vaqtimizni oladi. AOT compilationni hamma tillar va hamma platformalar qo'llab quvvatlamasligini ham unutmasligimiz kerak. Quyida AOT compilationni qo'llab quvvatlaydigan ba'zi tillar, texnalogiyalar va platformalarni keltirib o'taman.

• Java: Java tilining AOTJC(ahead of time java compiler) nomli AOT compileri mavjud.
• .Net: .Netda Ngen(Native Image Generator) nomli compiler mavjud.
• Angular: Ha, Angularning ham sifatli javascript kodga aylantirib beradigan AOT compileri mavjud.
• Android: Androidda Java dasturlari uchun AOT comiplation mavjud.
• IOS: IOSda .Net dasturlari uchun AOT comiplation mavjud.
• WebAssembly: har qanday dasturlash tili uchun AOT compilationni qo'llab quvvatlaydi.

Endi esa JIT haqida gaplashamiz. U qanday qilib interpreter dasturlarni tezlashtirib bera oladi? Ma'lumki interpreterlar dasturlarni bytcodega o'girib ishga tushiradi. bytecode mashinalarning ona tili bo'lmagani uchun ham to'gridan to'g'ri ishga tushirilmaydi va ishga tushirilishi uchun intertpreterlarga muxtoj. Bu esa sekinlikka sabab bo'ladi. Ho'sh unda runtime jarayonida bytecodeni mashina tiliga o'girsakchi? Shunda protsessor tomonidan hech qanday interpreterga muxtoj bo'lmasdan to'g'ridan to'g'ri ishga tushardi? Bu dasturlarni tezlata oladimi? Albatta tezlata oladi. Lekin baribir AOT ga nisbatan sekinroq ishlaydi.

AOT kabi JITni ham hamma dasturlash tillari va platformalar qo'llab quvvatlayvermaydi. Quyida JITni qo'llab quvvatlovchi ba'zi tillar va platformalarni keltirib o'taman:

• Java: Java tilining HotSpot Virtual Machine (JVM) nomli JIT compileri mavjud.
• C#: C# ning Common Language Runtime (CLR) nomli JIT compileri mavjud.
• JavaScript: JavaScriptdagi JIT compiler bu v8 engine.
• Python: Numba nomli JIT compiler.
• Android: Androidda Java dasturlari uchun JIT comiplation mavjud.
• IOS: IOSda C# dasturlari uchun JIT compilation mavjud.
• Web browsers: Ko'p web browser lar JavaScript dasturlari uchun JIT compilationni qo'llab quvvatlaydi.

Ba'zida hamma kodlarni mashina kodiga o'tkazish dasturning startup vaqtini kechiktiradi shu sabab ko'p JIT compilerlar eng muhim qismlarnigini mashina tiliga o'tkazadi. Java tilini olaylik. JVM, masalan biror funksiyaning bytecode ini analiz qiladi va necha marotaba ishlatilganini hisoblaydi. Agar belgilangan miqdordan oshadigan bo'lsa uni CPU to'g'ridan to'gri ishga tushira oladigan mashina kodiga o'tkazib oladi va uni xotirada saqlaydi. Keyingi safar shu funksiya yana qayta chaqirilganda aynan o'sha mashinakodini ishga tushiradi va bu dasturni ancha tezlashtiradi. Agar mashina kodiga o'tkizilmay ishga tushirilganda har safar funksiya qayta chaqirilganda uning bytecode ini qayta qayta qatorma-qator yangittan ishga tushirgan bo'lar edi.

Xulosa qilib aytganda, AOT compilation lar JIT compilation larga qaraganda tezroq startup vaqtiga ega, lekin performance jihatdan JIT tezroq bo'la oladi. Chunki JIT runtime vaqtida dynamic ma'lumotlarga asoslanib yaxshiroq kod generatsiya qila oladi. Xavfsizlik tomondan esa AOT static ma'lumotlarni yaxshiroq analiz qila olgani uchun ustunlikka ega. Agar sizga tezroq ishga tushadigan, kamroq xotira istemol qiladigan, ko'proq xafsiz bo'lgan dasturlar kerak bo'lsa AOT compilation yaxshi tanlov. Lekin sizga performace tomondan yaxshi, portativ dasturlar kerak bo'lsa JIT compilationdan foydalaning.

Tasavvur qiling siznikiga olmoniyalik(germaniya) mehmon keldi lekin siz nemis tilini bilmaysiz va tarjimon yollaysiz. Siz tarjimonga barcha gapingizni aytasiz, u esa oxirida ularni nemis tiliga tarjima qiladi. Buni compiled tillarga qiyoslasak bo'ladi. Agar tarjimon har bitta gapingizni birma bir tarjima qilsa buni interpreted tillarga qiyoslasak bo'ladi.

Compiled tillar interpreted tillarga qaraganda tezroq hisoblanadi. Compiled tillar yana dasturchiga memoryni va cpu ishlashini nazorat qilish imkonini beradi. Compiled tillarga misol qilib C, C++, Haskell, Rust va Go larni aytishimiz mumkin. Compiled tillarda buyruqlarni ishga tushirish uchun avval ularni compile(build) qilib olish kerak ya'ni machine codega o'girib olish. Bu esa har safar biror o'zgartirish kiritganingizda qayta rebuild qilish kerakligini anglatadi.

Quyida C tilidagi code va uning machine code varianti keltirilgan.

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    return 0;
}

section .data
    message db 'Hello, World!', 0

section .text
    global _start

_start:
    ; write the message to stdout
    mov eax, 4
    mov ebx, 1
    mov ecx, message
    mov edx, 13
    int 0x80

    ; exit the program
    mov eax, 1
    xor ebx, ebx
    int 0x80

Interpreted tillarda esa buyruqlar qatorma qator ishga tushiriladi. Biror bir qatorga o'zgartirish kiritmoqchi bo'lsangiz uni shunchaki modify qilishingiz, keraksiz narsalarni o'chirib, kerakli narsalarni qo'shishingiz kifoya. Har bir qator executable code ya'ni bytecode ga o'tkazib olinadi va ishga tushiriladi. Bytecode machine code dan farq qiladi. Machine code CPU ning native tili. Bytecode CPU tomonidan to'g'ridan to'g'ri ishga tushirilmagani uchun ham sekinroq ishlaydi.

Javascript varianti:

console.log("Hello, World!");

V8 engine tomonidan o'girilgan bytecode:

0000  H8Gd  0 0x00000000
0002  S8Kz  0 "Hello, World!"
0005  C1WC  0 0 1
0008  C8Yp  0 0 1

Interpreted tillar compile tillarga qaraganda sekinroq lekin just-in-time compilation(bu haqida keyinroq yozaman) orqali interpreted tillarni performance ini oshirish mumkin. Ko'p interpreted tillar dynamic typingni qo'llab quvvatlaydi va kamroq source size ga ham ega. Lekin memory usage ga kelganda ular ko'proq joy egallaydi. Sabab ular kodni qatorma qator ishga tushurgani uchun dastur haqida ko'proq ma'lumotni ushlab turishi kerak.

Ba'zi dasturlash tillari ham compiled ham interpreted bo'lishi mumkin. Bunga misol qilib Python tilini olishimiz mumkin. Python tili interpreted til deb yuritilishiga qaramay, uning compilation stepi ham mavjud. Ya'ni CPythonga o'xshagan implementation lar interpretation va compilationni birgalikda ishlatadi. Source esa birinchi bytecode ga compile bo'lib keyin interpreter tomonidan ishga tushiriladi. Rust compiled til bo'lishiga qaramay, u ham ikkalasini kombinatsiyada ishlata oladi. Rust compilerning kodlarni to'g'ridan to'g'ri ishga tushuruvchi interpreteri mavjud. Bu testing va debugging uchun qulay. Ammo rust interpreter til sifatida shakllanatirilmagan va interpreter unchalik tez emas. Bundan tashqari, interpreter rust tilining hamma xususiyatlarini qo'llab quvvatlamaydi. Shu sabablardan rust kodini interpreter orqali ishga tushirishdan ko'ra machine kodga o'girishni maslahat beraman.

Topshiriq: JavaScript undefined data type ini bytecode ga o'girilgandagi holatini izohlarda qoldiring.

Dasturlashda reflection - bu dasturning o'zgaruvchilarni, object property va methodlarini boshqarish qobilyati. Ho'sh javascriptda reflection bormi? ES6 gacha javascriptda reflection deb atasak bo'ladigan methodlar bo'lishiga qaramay reflection mavjud emas deyilar edi. Aslida esa Object.getOwnPropertyDescriptor(), Object.keys(), Array.isArray() bular klassik reflection xususiyatlardir.

Reflect

ES6 bizga method va contstructor objectlarini chaqirish, propertylarn get va set qilish, ularni boshqarish imkonini beruvchi yangi Reflect global objectini taqdim etdi. Reflect constructor emas, shu sabab uni new bilan chaqirib bo'lmaydi va o'zini function sifatida ham ishlata olmaymiz. Reflect ning JSON va Math kabi hamma propertylari static hisoblanadi.

Odatda biz constructorni chaqirish uchun quyidagi yo'ldan foydalanamiz.

 const myInstance = new Model(args)

Reflect api orqali esa constructorlar quyidagi kabi chaqiriladi.

const myInstance = Reflect.constructor(Model,args)

quyida esa Reflectning ba'zi bir methodlarini ko'rib chiqamiz.

// delete object.property

Reflect.deleteProperty(object,"property")

//  object.property && array[index]

Reflect.get(object,"property")
Reflect.get(array,index)

//  object.property = value && array[index] = value

Reflect.set(object,"property",value)
Reflect.set(array,index,value)

// Object.keys(obj)

Reflect.ownKeys(obj) //Object.keys dan farqi bu symbollarni ham qaytaradi

Reflect ning boshqa static metholarini bu link orqali o'rganib chiqishingiz mumkin. Reflect asosan Proxy handlerning traplarida ishlatiladi va ishimizni oson qiladi.

const userProxy = new Proxy(user, {
  set(target,property,val){
    if(isAdmin){
      Reflect.set(target,property,value)
    }else{
      throw new Error("Ruxsat mavjud emas!")
    }
  }
})

const user = {
  name: "Hojiakbar",
  age: 20
}

Agar biz shu objectdan proxy yaratadigan bo'lsak, bu object ning get, set, delete va boshqa fundamental amallarni qaytadan yozishimiz yoki o'zgartirishimiz mumkin.

// Proxy sintaksisi - new Proxy(targetObject,handler)

const userProxy = new Proxy(user,{
  get(targetObject,property){
    if(property in targetObject){
      return targetObject[property]
    }
    return "Property mavjud emas"
  }
})

console.log(userProxy.fullname) // "Property mavjud emas"

Odatda biz objectda mavjud bo'lmagan property qiymatini olishga harakat qilsak undefined qaytadi, lekin biz get amalini o'zgartirish orqali undefined o'rniga o'zimiz berib yuborgan stringni qaytaradigan qildik.

Huddi shu kabi age propertysiga qiymat berayotganda validatsiyadan o'tkazadigan qilib ko'ramiz.

const userProxy = new Proxy(user,{
  set(targetObject,property,value){
    if(property === "age"){
      if(typeof value !== "number"){
        throw new Error("Age number turda bo'lishi kerak!")
      }
      if(value <= 18){
        throw new Error("Age 18 yoshdan katta bo'lishi kerak!")
      }
    }
    targetObject[property] = value
  }
})
userProxy.age = 17 //Error: "Age 18 yoshdan katta bo'lishi kerak!"
userProxy.age = 21

console.log(userProxy.age) //21
console.log(user.age) //21

Tepadagi misolda agar property age bo'ladigan bo'lsa unga o'rnatilayotgan qiymat 18dan yuqori va number formatda bo'lishi kerakligini yozdik va proxy orqali user objectiga o'zgartirish kiritar ekanmiz handlerimiz validatsiyadan o'tkazib oladi.

Bu rasmda proxy aslida qanday ishlashi ko'rsatib o'tilgan.

Boshqa fundamental amallarni qanday o'zgartirish yoki qayta yozish mumkinligini bu link orqali ko'rib chiqishingiz mumkin.

Generator functionlar bizga funksiyaning ixtiyoriy joyida to'xtatib qo'yish va uni yana davom ettirishni nazorat qilish imkoni beradi. Ular odatiy functionlar kabi e'lon qilinadi faqatgina function keywordidan keyin *(yulduzcha) qo'yish kerak.

function* myGenerator(){
  console.log("Bu mening generator funksiyadan yuborgan xabarim!")
}

Agar biz myGenerator funksiyasini chaqirsak, u odatiy function lar kabi birdaniga ishga tushmaydi, balki u bizga iterable generator object qaytaradi.

Bizning generator funksiyamiz endi iterable object ekan biz uning ichidagi kodlarini next() methodi orqali ishga tushiramiz. U esa bizga value va done dan iborat object qaytaradi.

yield keywordi orqali biz funksiyani to'xtatib qo'yishimiz va qiymat qaytarishimiz mumkin(agar qiymat bo'lmasa undefined qaytadi).

Har safar next() methodini chaqirganimizda yield gacha bo'lgan kodlar ishga tushadi va o'sha joyda to'xtab qoladi. Keyingi nextda esa to'xtagan joydan navbatdagi yieldgacha bo'lgan kodlar ishga tushadi.

next methodining optional(ya'ni ixtiyoriy) bo'lgan atributi bor va bu orqali biz functionimizga qiymat berib yuboramiz. Buni quyidagicha amalga oshirak bo'ladi

yield qiymat qaytargani va faqat ungacha bo'lgan code lar ishga tushgani uchun biz newValue ning qiymatini 2 chi next chaqirishimizda berib yuborishimiz kerak.

ko'rib turganingiz kabi birinchi nextga qiymat berib yuborganimiz bilan u qiymat newValuening qiymatiga tenglashmaydi

yieldni ham generatorga aylantirish mumkinmi? Mumkin. buning uchun uning oxiriga *(yulduzcha) qo'ysangiz kifoya. yield orqali qaytargan qiymatimiz ham iteratsiya bolib ketadi.

yield* [1,2,3,4]

Tanishtiruv

ES2020 bizga 2ta so'roq belgisi(??) bilan ifodalanadigan Nullish Coalescing Operatorini tanishtirdi. U 2ta qiymat qabul qiluvchi mantiqiy operator.

value1 ?? value2

nullish coalescing operatori qachonki birinchi qiymat(value1) null yoki undefined ga teng bo'lsagina, ikkinchi qiymatni(value2)ni qaytaradi. Texnik jihatdan u quyidagi kodga ekvivalent bo'la oladi.

const result = value1;

if([null,undefined].includes(result)){
  result = value2
}

Quyida nullish coalescing operatoriga 2ta misol keltiramiz.

const name = null ?? "Hojiakbar"
console.log(name) //Hojiakbar

const age= undefined ?? 20
console.log(age) //20

Nima uchun nullish coalescing operatori

Ko'pincha default value(qiymat)ni variable(o'zgaruvchi)ga olish uchun mantiqiy OR(||) operatoridan foydalanamiz.

let count;
let result = count || 1;
console.log(result) //1

Bu holatda count o'zgaruvchisi undefined qiymatiga teng va mantiqiy OR operatori uni false sifatida tushunib 1 qiymatini qaytaradi. Ammo, bu operatorning kamchiligi agar count 0 yoki " "(bo'sh string)ga teng bo'lsa ham bu qiymatlarni false deya tushunib yana 1ni qaytaradi.

let count = 0;
let result = count || 1;
console.log(result) //1

let count = "";
let result = count || 1;
console.log(result) //1

nullish coalescing operatori bunday muammodan qochishda yordam beradi, chunki u ikkinchi qiymatni birinchi qiymat faqatgina null yoki undefined bo'lsagina qaytaradi.

AND(&&) va OR(||) operatorlari bilan ishlatish

Agar siz nullish coalescing operatorini mantiqiy OR yoki AND operatorlari bilan to'g'ridan to'g'ri ishlatsangiz SyntaxError yuzaga keladi.

const result = null || undefined ?? "OK"; //SyntaxError

Bunday errordan qochish uchun chapdagi ifoda(expression)ni qavslar bilan o'rash kerak.

const result = (null || undefined) ?? "OK"; 
console.log(result) //OK

Reactda shartli ko'rsatish yordamida dinamik dasturlar yasashimiz qulay va oson. Shartli ko'rsatish bu biror shartga ko'ra turli UI element yoki componentlarni ko'rsatish.

CodeSandbox link

Bu darsdagi to'liq kodni quyidan topa olasiz: https://codesandbox.io/s/conditional-rendering-react-l578jj

Mantiqiy AND(Va) operatori

Mantiqiy AND(&&) operatori ba'zi shartlarga ko'ra turli UI larni ko'rsatish uchun ishlatilina oladi. Aytaylik biz biror xabar masalan "You have 1 new notification" ni xabar 1ta yoki undan ko'p bo'lsa ko'rsatamiz. Birinchi navbatda NotificationCard componentini yaratamiz. Bu oddiy local state ga bog'liq matn bo'ladi.

import React, { useState } from "react";

const NotificationCard = () => {
    const [notificationNumber, setNotificationNumber] = useState(1)

    return (
        <div>
            <p>You have {notificationNumber} new notification </p>
        </div>
    );
};

export default NotificationCard;

Keyin biz bu componentga mantiqiy AND(&&) operatorini ishlatib shart qo'shamiz. notificationNumber 1ga teng yoki katta bo'lsagina matnni ko'rsat degan.

<div>
  {notificationNumber >= 1 &&
    <p>You have {notificationNumber} new notification</p>}
</div>

notificationNumber boshlang'ich qiymatini 0ga o'zgartirib ko'ring va matn yo'qolganini ko'rasiz.

const [notificationNumber, setNotificationNumber] = useState(0)

If...else shartli operator

If...else operatori yordamida shartlarni belgilashimiz va uning true yoki false ekanligiga qarab biror narsa qilishimiz mumkin. Quyidagi misolda biz isLoggedIn ning qiymatiga qarab Logout yoki Login buttonlarini ko'rsatamiz.

import React, { useState } from "react";

const SignInButton = () => {
    const [isLoggedIn, setIsLoggedIn] = useState(true);

    if (isLoggedIn) {
        return <button>Logout</button>;
    } else {
        // Agar foydalanuvchi ro'yxatdan o'tmagan bo'lsa
        return <button>Login</button>;
    }
};

export default SignInButton;

isLoggedIn ning boshlang'ich qiymatini falsega oz'gartirib ko'ring va Logout buttoni emas Login buttonini ko'ring.

const [isLoggedIn, setIsLoggedIn] = useState(false)

Eslatma: If...else shartli operatori faqat returnning tashqarisida ishlaydi. Return ning ichida esa ternary operatoridan foydalanamiz.

Ternary Operatoridan foydalanish

if...else statement ining muqobili bu ternary operatori hisoblanadi. Biz tepadagi kabi misoldan foydalanamiz, lekin bu safar ternary bilan shartli ko'rsatishni bajaramiz.

const SignInButton = () => {
    const [isLoggedIn, setIsLoggedIn] = useState(true);

    return (
        <div>
            {isLoggedIn ? <button>Logout</button> : <button>Login</button>}
        </div>
        );
}

export default SignInButton

Natija if...else bilan bir xil faqat kod toza va o'qishga juda oson.

Props bu propertiesning qisqartmasi va componentlar orasida ma'lumot almashinuvi uchun ishlatiladi. Ona componentdan bola componentlarga ma'lumot yuborish props orqali amalga oshiriladi.

CodeSandbox link

Bu darsdagi to'liq kodni quyidan topa olasiz: https://codesandbox.io/s/react-props-1ux0vf

Ona va bola componentlar

Ona va bola componentlar orasidagi farq nima?

Aytaylik bizda Card componenti mavjud. Cardning ichida esa bizda button bor. Button Card componentning ichida bo'lgani uchun, biz buttonni bola component, Cardni esa ona component deya nomlaymiz.

Ona component yaratish

Ishimizni Ona component ya'ni Card yaratishdan boshlaymiz

import React from "react";
import styled from "styled-components";

const MyCard = () => {
    return <Wrapper>Button aktiv bo'lishi kerak</Wrapper>;
};

export default MyCard;

const Wrapper = styled.div`
    background: #ff884b; 
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.6); 
    border-radius: 30px; 
    padding: 20px; 
    max-width: 300px; 
    width: 100%; 
    display: grid; 
    gap: 30px; 
    justify-items: center; 
    align-items: center; 
    font-family: Segoe UI, sans-serif; 
    margin-left: auto; 
    margin-right: auto;
`;

Bola component yaratish

Navbat, Cardning bola componentini yaratishga keldi, button componentni. Button argument sifatida props qabul qiladi. Style berilgan buttonga isActive nomli prop berib yuboramiz va shu propga qarab uning background colorini o'zgartiramiz.

import React from "react";

const MyButton = (props) => { 
    return (
      <button style={{ 
        background: `${ 
           props.isActive 
             ? "linear-gradient(91.4deg, #2fb8ff 0%, #9eecd9 100%)" 
             : "grey" }`, 
        border: "none", 
        padding: "10px 15px", 
        borderRadius: "12px" 
       }} > 
         Click me! 
       </button>
     )
};

export default MyButton;

Buttonni bola component sifatida qo'shish

Biz Card fayliga kirib Button componentini yuqorida import qilib olamiz.

import MyButton from "./Button";

MyButton componentini MyCard componentining return qismida ishlatamiz. MyButtonga isActive propsni berish ham esdan chiqmasligi zarur.

const MyCard = () => {
    return (
        <Wrapper>
            Button aktiv bo'lishi kerak
            <MyButton isActive={true} /> 
            {/*isActive propsni berish esdan chiqmasin*/}
        </Wrapper>
    );
};

Endi siz isActivening valuesini o'zgartirsangiz buttonning backgroundi ham o'zgaradi.

Stylelar bilan yakuniy kod

Card componenti

import React from "react";
import styled from "styled-components";
import MyButton from "./Button";

const MyCard = () => {
    return (
        <Wrapper>
            Button aktiv bo'lishi kerak
            <MyButton isActive={true} /> 
            {/*isActive propsni berish esdan chiqmasin*/}
        </Wrapper>
    );
};

const Wrapper = styled.div`
    background: #ff884b; 
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.6); 
    border-radius: 30px; 
    padding: 20px; 
    max-width: 300px; 
    width: 100%; 
    display: grid; 
    gap: 30px; 
    justify-items: center; 
    align-items: center; 
    font-family: Segoe UI, sans-serif; 
    margin-left: auto; 
    margin-right: auto;
`;

Button komponent

import React from "react";

const MyButton = (props) => { 
    return (
      <button style={{ 
        background: `${ 
           props.isActive 
             ? "linear-gradient(91.4deg, #2fb8ff 0%, #9eecd9 100%)" 
             : "grey" }`, 
        border: "none", 
        padding: "10px 15px", 
        borderRadius: "12px" 
       }} > 
         Click me! 
       </button>
     )
};

export default MyButton;

useRef Vanilla JavaScriptdagi getElementById, getElementByClassName yoki querySelectors larni o'rnini bosuvchi ko'p ishlatiladigan hooklardan biri. Boshqa so'z bilan aytganda, dasturingizdagi elementni belgilab olish va uni qachon hohlasangiz chaqirish imkonini beradi. Bu bo'limda useRefniqanday ishlatishni o'rganamiz.

CodeSandbox link

Bu darsdagi to'liq kodni quyidan topa olasiz: https://codesandbox.io/s/react-useref-tvebmc

Componentingiz yarating

Button va Inputdan iborat componentni yaratamiz va button bosilganda, inputdagi qiymat/value xabar(alert) sifatida chiqadi.

import React from "react";

const MyButton = () => {
    return (
       <>
         <input type="text" />
         <button onClick={() => alert("")}>
           Bosing
         </button>
       </>
    );
};

export default MyButton;

Import hook

Faylning yuqori qismida React kutubxonasidan useRef hookini import qilib olamiz.

import React, { useRef } from "react"

ref yaratish

useRef hooki yordamida ref yartamiz. Qavslar ichida boshlang'ich qiymat beramiz. Odatda bu null yoki undefined bo'ladi.

const ref = useRef(null)

Keyin esa bu refni input elementimizga beramiz.

<input type="text" ref={ref} />

useRef doimo ayni damdagi objectni qaytaradi va haqiqiy HTML elementini olishimiz uchun biz ref.current ni ishga solamiz. Button bosilganda inputning valuesi alert sifatida chiqishini uchun quyidagicha amalga oshiramiz.

<>
  <input type="text" ref={ref} />
  <button onClick={() => alert(ref.current.value)}>
    Bosing
   </button>    
</>

Stylelar bilan yakuniy kod

import React, { useRef} from "react";
import styled from "styled-components";

const MyButton = () => {
    const ref = useRef(null);

    return (
        <>
          <input type="text" ref={ref} />
          <Button onClick={() => alert(ref.current.value)}>
            Bosing
          </Button>    
        </>
    );
};

export default MyButton;

const Button = styled.button`
    background: linear-gradient(91.4deg, #2fb8ff 0%, #9eecd9 100%);
    padding: 2px 25px;
    border: none;
    border-radius: 30px;
    color: #fff;
    font-weight: bold;
    font-family: Segoe UI, sans-serif;
    cursor: pointer;

    :focus {
        outline: none;
    }
`;