React hooklari bilan tanishuv | Hooks qo'llanma 1

React dasturlarni tez bitirish uchun ishlatishingiz mumkin bo'lgan React hooklari va frameworklari vasfi.

React componentlar

React "component-based" hisoblanadi, ya'ni hamma narsa component. Componentlar "reusable", website ni qurish jarayonida qayta ishlatilinadigan bo'lgani uchun code imiz o'qishga oson va tozaroq(sifatliroq) bo'ladi. Componentlar jsx(HTML ga o'xshash javascript sintaksist) qaytaradigan javascript funksiyalar hisoblanadi. Oddiy component quyidagicha bo'ladi:

import React from "react"

const OddiyComponent= () => {
		return <button>A'zo bo'lish</button>;
}

export default OddiyComponent

Componentlar haqida keyingi maqolalarda batafsil yana gaplashamiz:)

React Hooks

React hooklari react dasturimizni yanada oddiyroq qilib beradi. Bir necha qator code bilan functional componentlarning state, lifecycle va boshqa xususiyatlarini boshqarish imkoniyatiga ega bo'lishimiz mumkin. Misol uchun, useState hookini import qilib, componentning state ini nazorat qilishimiz mumkin.

const [state, setState] = useState("Oddiy state")

Va yana useEffect orqali componentimizning lifecycle ini boshqarishimiz mumkin. Bu hook "Class component"lardagi componentDidMount, componentWillUpdate va componentWillUnmount ni o'rnini bosadi.

useEffect(() => {
    // code
}, [])

Reactda boshqa hooklar ham bor, hattoki siz o'zingizning hook ingizni yaratishingiz mumkin. Hooklar haqida batafsil keyingi maqolalarda gaplashamiz.

Frameworks

Dasturingizni tez bitirib, deploy qilishda ishlatishingiz mumkin bo'lgan bir qancha react frameworklari ham mavjud.

Gatsby React uchun framework, static content-oriented website lar yaratishimizga yordam beradi. U sizning o'rningizga hamma configuration larni o'z zimmasiga oladi. Gatsby yordamida murakkab saytlar yaratishimiz ham mumkin. Gatsby bilan website yaratishga keyingi maqolalarda to'xtalib o'tamiz.

Static content websitelar - Bunday websitelarda barcha foydalanuvchilar uchun content bir xil bo'ladi. Blog va portfolio site larni misol qilishimiz mumkin. Dynamic content websitelar - foydalanuvchidan kelib chiqib turli natijalar ko'rsatadi. Netflix, Facebook kabilarni misol sifatida aytsak bo'ladi.

Nextjs navbatdagi React frameworki. U yordamida "Server side rendered" website lar yaratishimiz mumkin. Nextjs bilan bu yerda yaxshiroq tanishib chiqisangiz bo'ladi.

Packages

React uchun juda ko'p packagelar mavjud. Maqsadizdan kelib chiqib ularni ishlata olasiz. Navigation, routing, UI components, animation, forms va boshqa ishlar uchun packagelarni npmjs.com saytidan topsangiz bo'ladi. Packagelarda code lar allaqachon siz uchun yozilgan bo'ladi va siz ularni import qilib bemalol ishlata olasiz. Ba'zi foydali packagelar.

React Toastify, React dasturlarda custom alertlarni ko'rsatish uchun.

React Helmet, Helmet orqali dasturingizning "Document Head"iga o'zgartirish kirita olasiz.

React Lazyload, componentlarni "lazy" yuklash uchun va performanceni oshirish uchun.