Maqola rejasi
Ko’pchilik JavaScriptni yetarlicha o’rganmay turib Reactga (yoki boshqa js frameworklariga) o’tishayotganini guvoohi bo’lyapmiz. Bu to’g’ri emas.
Agar siz JavaScriptdan yetarlicha bilimga ega bo’lmay turib Reactga o’tsangiz, o’rganish davomida tez-tez JSga qaytishingizga to’g’ri keladi. Bu esa o’rganish jarayonini uzoqlashtiradi, ko’plab chalkashliklarga olib keladi.
Reactdani boshlash uchun jsdan qanchalik bilish muhim ekanligini koʻrib chiqamiz
![react](https://alicode.uz/wp-content/uploads/2024/02/image-4-1024x576.png)
Bular:
➊ Basics
➋ Array.prototype Methods
➌ Array Destructuring
➍ Array Spread
➎ Object Destructuring
➏ Object Spread
➐ Template Literals
➑ ES Modules
Basics:
Basics
❍ Variable Declaration
❍ Variable Scope
❍ Variable Hoisting
❍ Functions
❍ Arrow Functions
❍ Callback Functions
❍ Closure
❍ Basic Operators
❍ Array Literals
❍ Object Literals
❍ if, if…else
❍ for, for…in, for…of, while, do…while
Array metodlar
❍ forEach()
❍ map()
❍ reduce()
❍ flat()
❍ flatMap()
❍ find()
❍ filter()
❍ slice()
❍ splice()
❍ push()
❍ pop()
❍ shift()
❍ unshift()
❍ some()
❍ every()
Array Destructuring
U tez-tez hooclarda ishlatiladi, xususan useState() hoocida
Masalan:
⇥ const [fruits, setFruits] = useState([]);
Array Spread
Foydalanish holatlari juda ko’p. Biz arrayni nusxa ko’chiradigan joylarimizdan biri bu statedan elementni qo’shish/yangilash/o’chirishdir.
⇥ let newArray = [itemToAdd, …oldArray]
Object Destructuring
Propertylar bizning funktsiya komponentimizga ob’ekt parametri sifatida uzatiladi.
Biz uni buzishimiz va faqat biz foydalanmoqchi bo’lgan xususiyatlarni belgilashimiz mumkin.
Masalan:
function MyComponent({name, address}) {
}
Object Spread
Biz obyektni child componentiga o’tkazish uchun spread operatordan foydalanshimiz mumkin.
Masalan:
function MyComponent({name, address, …rest}) {
return
}
ES Modullar
❍ import
❍ import {}
❍ export
❍ export default
O’rganish usuli barchada turli bo’ladi. JS bilimiga ega boʻlish majburiy boʻlmasa-da, siz bir vaqtning oʻzida React va JSni ham oʻrganishingiz mumkin. Ammo oson bo’lishi uchun React sayohatingizni boshlashdan oldin JS bo’yicha asosiy bilimlarga ega bo’lishingiz tavsiya etiladi.
O’qishni tavsiya qilamiz: Node.js-da Telegram Bot Yaratish: Kuchli va Sodda Kodlash