Frontend

Ilk React loyihamni boshlashda yoʻl qoʻygan 5 xatoyim

Yangi dasturlash tili yoki freymvorkni oʻrganish qanday ekanini bilasizmi? Baʼzida sizga bu masalada yordam beradigan ajoyib qoʻllanmalar boʻladi. Ammo eng yaxshi qoʻllanma ham sohaga oid barcha narsani qamrab ololmaydi. Yangi narsa bilan ishlash jarayonida esa yechimi qogʻozga tushirilmagan muammoni topishingiz esa shubhasiz.

Birinchi marta React loyiha yaratganimda men ham xuddi shu holga duch kelgandim. Holbuki, React ajoyib qoʻllanmalarga ega freymvorklardan biri, ayniqsa, hozirgi beta qoʻllanmalar bilan. Shunday boʻlsa-da, oʻz yoʻlimni topguncha qiynalgandim. Oʻsha loyihadan keyin ancha vaqt oʻtgan boʻlsa-da, olgan saboqlarim hamon yodimda. React bilan qanday ishlash haqida amaliy qoʻllanmalar juda koʻp boʻlsa ham, undan birinchi marta foydalanganimda, nimalarni bilishni xohlaganimni aytib oʻtmoqchiman.

Bu maqola ham React bilan ishlaganimda yoʻl qoʻygan ilk xatolarim haqida. Umid qilamanki, ular Reactʼni oʻrganish jarayonining silliq kechishiga yordam beradi.

Loyihani boshlash uchun create-react-appʼdan foydalanish

Create React App (CRA) yangi React loyiha yaratishda yordam beradigan vosita. U koʻplab React loyihalar uchun eng yaxshi konfiguratsiya variantlari bilan dasturlash muhitini yaratadi. Bu esa nimanidir mustaqil tarzda sozlashga vaqt sarflamasligingizni bildiradi.

Yangi dasturchi sifatida bu menga ish boshlashning ajoyib usuli boʻlib koʻrindi. Hech narsani sozlamaysiz! Shunchaki kod yozishni boshlaysiz!

CRA bu uchun ikki mashhur paket – Webpack va Babelʼdan foydalanadi. Webpack bu — loyihangizdagi JavaScript, CSS va rasmlar kabi resurslarni optimallashtiradigan veb toʻplam. Babel esa JavaScriptʼning baʼzi brauzerlar qoʻllab-quvvatlamaydigan funksiyalarini ishlatishingizni taʼminlaydigan vosita.

Har ikkisi ham yaxshi instrumentlar. Ammo bu vazifani yanada yaxshiroq bajaradigan boshqa vositalar, jumladan, Vite hamda Speedy Web Compiler (SWC) ham mavjud.

Bu yangi va rivojlangan muqobillar Webpack hamda Babelʼga nisbatan tezroq hamda osonroq sozlanadi. Bu esa create-react-appʼda murakkab boʻlgan konfiguratsiyani sozlashni osonlashtiradi.

Yangi React loyiha yaratayotganda bu ikki vositadan foydalanish uchun sizda 12 va undan yuqoriroq versiyadagi Node oʻrnatilganiga ishonch hosil qiling, keyin quyidagi buyruqni ishga tushiring.

npm create vite

Sizdan loyiha uchun nom berish soʻraladi. Nom berganingizdan soʻng freymvorklar roʻyxatidan Reactʼni tanlang, keyin esa JavaScript + SWC yoki TypeScript + SWCʼlardan birini tanlashingiz mumkin.

Shundan keyin loyihangizning cd katalogini oʻzgartirasiz va quyidagi buyruqni ishga tushirasiz:

npm i && npm run dev

Bu sizning saytingiz uchun localhost:5173 URL bilan dasturlash serverini ishga tushiradi.

Hammasi mana shunday oddiy.

Standart qiymatlar uchun defaultPropsʼdan foydalanish

React komponentlari orasida maʼlumotlarni proplar orqali oʻtkazsa boʻladi. Ular komponentlarga HTML elementidagi atributlar kabi qoʻshiladi. Shuningdek, prop obyektidan argument sifatida uzatilgan mos qiymatlarni qabul qilib, komponentning tavsifi uchun qoʻllanadi.

// App.jsx
export default function App() {
  return <Card title="Hello" description="world" />
}

// Card.jsx
function Card(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

export default Card;

Agar prop uchun qachondir standart qiymat soʻraladigan boʻlsa, bu oʻrinda defaultProp xususiyatidan foydalansangiz boʻladi:

// Card.jsx
function Card(props) {
  // ...
}

Card.defaultProps = {
  title: 'Default title',
  description: 'Desc',
};

export default Card;

Zamonaviy JavaScript tilida proplar obyektini buzish va funksiya argumentida standart qiymat nomini biriktirish mumkin.

// Card.jsx
function Card({title = "Default title", description= "Desc"}) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  )
}

export default Card;

Bu ancha foydaliroq boʻladi, chunki zamonaviy brauzerlar hech qanday qoʻshimcha transformatsiyalarsiz ham kodni oʻqiy oladi.

Afsuski, defaultProps brauzer tomonidan oʻqilishi uchun baʼzi oʻzgartirishlar kerak boʻladi. Chunki JSX (JavaScript XML) toʻgridan-toʻgri qoʻllab-quvvatlanmaydi. Bu esa koʻplab defaultPropsʼdan foydalanilgan ilovaning ishlashiga salbiy taʼsir oʻtkazishi mumkin.

propTypesʼdan foydalanmang

Reactʼda propTypes xususiyatidan komponentga uning prop (xususiyat)lariga mos turdagi maʼlumotlar yetkazilishini tekshirishda foydalanish mumkin. U orqali string, son, obyekt va shu kabi har bir prop uchun qoʻllaniladigan maʼlumot turini belgilasa boʻladi. Shuningdek, prop ishlatishga ehtiyoj bor-yoʻqligini ham aniqlash imkoni mavjud.

Shu tariqa agar komponentga notoʻgʻri turdagi maʼlumot uzatilgan boʻlsa yoki talab qilingan prop koʻrsatilmagan boʻlsa, React xatolik chiqarib beradi.

// Card.jsx
import { PropTypes } from "prop-types";

function Card(props) {
  // ...
}

Card.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string,
};

export default Card;

TypeScript komponentlarga uzatiladigan maʼlumot turlarining xavfsizlik darajasini taʼminlab beradi. Albatta, endi boshlagan vaqtimda propTypes yaxshi gʻoya boʻlgan. Ammo endi TypeScript turlar xavfsizligini taʼminlashda eng yaxshi yechimga aylangan ekan, boshqa har qanday narsa oʻrnida undan foydalanishni qatʼiy tavsiya qilaman.

// Card.tsx
interface CardProps {
  title: string,
  description?: string,
}

export default function Card(props: CardProps) {
  // ...
}

TypeScript – turlarni statik tekshirish hisobiga JavaScript asosida yaratilgan dasturlash tili. TypeScript koʻproq ehtimoliy xatoliklarni aniqlash va dasturlash jarayonini yaxshilay oladigan kuchli turlar tizimini taqdim qiladi.

Class (sinf) komponentlaridan foydalanish

TL;DR: komponentlarni funksiyalar kabi yozing

Reactʼda class (sinf) komponentlari JavaScript sinflaridan foydalanish orqali yaratiladi. Ularning tuzilmasi koʻproq obyektga yoʻnaltirilgan boʻladi, shuningdek, this kalit soʻzi va hayotiy bosqichlar (lifecycle) metodlari kabi qoʻshimcha xususiyatlardan foydalanish imkonini beradi.

// Card.jsx
class Card extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </div>
    )
  }
}

export default Card;

Men komponentlarni funksiyalar bilan emas, sinflar bilan yozishni maʼqul koʻraman. Ammo yangi mutaxassislar JavaScript sinflarini tushunishga qiynaladi, bu esa chalkashliklarga olib kelishi mumkin. Buning oʻrniga komponentlarni funksiyalar kabi yozishni maslahat bergan boʻlardim:

// Card.jsx
function Card(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

export default Card;

Funksional komponentlar JSXʼni qaytaradigan JavaScript funksiyalari sanaladi. Ularni oʻqish ancha osonroq, bundan tashqari, sinf komponentlariga nisbatan ancha samarador qiladigan this kalit soʻzi va lifecycle metodlari kabi qoʻshimcha xususiyatlarga ega boʻlmaydi.

Funksional komponentlar ham hook (ilmoq)lardan foydalanish afzalligiga ega. React Hooks sizga state va boshqa React funksiyalaridan sinf komponentlarini yozmagan holda foydalanish imkonini beradi. Bu esa kodingizni oʻqishni, qoʻllab-quvvatlashni hamda undan qayta foydalanishni qulaylashtiradi.

Zarurat boʻlmaganda ham Reactʼni import qilish

2020-yilda React 17 reliz qilingandan buyon har yangi komponent yaratilganda Reactni faylning boshiga import qilishning hojati boʻlmay qoldi.

import React from 'react'; // Zarur emas!
export default function Card() {}

Ammo React 17 gacha shunday qilishga majbur edik, chunki JSX transformer (JSXʼni odatiy JavaScriptʼga aylantiradigan) faqat React import qilinganda ishlaydigan React.createElement metodidan foydalanardi. Oʻshandan keyin JSXʼni createElement metodisiz oʻzgartiradigan yangi transformer yaratildi.

Ammo kutubxonadan zarur boʻladigan hook, fragment yoki har qanday funksiya va komponentlardan foydalanish uchun Reactʼni baribir import qilishga majbur boʻlasiz.

import { useState } from 'react';

export default function Card() {
  const [count, setCount] = useState(0);
  // ...
}

Bular men yoʻl qoʻygan ilk xatolar edi!

Ehtimol, baʼzi oʻrinlarda yaxshiroq amaliy yechimlar keyinroq paydo boʻlgani uchun bu holatni “xato” deyish juda keskin taʼrif boʻlar. Bundan tashqari, nimanidir bajarishning baʼzi “eski” usullari hamon loyiha va qoʻllanmalarda faol ishlatilayotgan koʻplab hollarga guvoh boʻlyapman.

Toʻgʻrisini aytganda, ish boshlaganimda beshtadan koʻproq xatolarga yoʻl qoʻygan boʻlishim mumkin. Har safar yangi instrumentdan foydalanayotganda bu shunchaki yoqib-oʻchirish tugmachasini bosish emas, balki undan samarali foydalanishni oʻrganish jarayoniga oʻxshardi. Ammo yuqoridagilar yillar oʻtsa ham oʻzim bilan olib yurgan narsalar edi!

Agar Reactʼdan anchadan beri foydalanayotgan boʻlsangiz, ish boshlashdan avval nimalarni bilishni xohlagan boʻlardingiz? Boshqalarga xuddi shunday muammolarning oldini olishda yordam beradigan kolleksiya yigʻsak, ajoyib ish boʻlardi.

Manba: 5 Mistakes I Made When Starting My First React Project

#javascript
#react
Mohirdev Telegram

Telegram kanalimizga obuna bo’lishni unutmang

Obuna bo'lish
CSS-Tricks

CSS-Tricks