Өмнөх хичээлүүдэд бид Python -ий өөрийнх нь буюу интерпретаторт багтсан обьект, арга, функцуудийг ашигласан. Гэхдээ бодит практикт хязгааргүй олон тооны асуудлууд байдгийг програмчлалын хэлүүд өөрийн суурь бүтэцдээ багтаах боломжгүй гэдэг нь ойлгомжтой. Python -нд эдгээр олон асуудлуудыг шийдсэн маш олон тооны сангууд байдагийг ашиглах боломжтой.

Html хэвийн элементүүдэд хэвжүүлэлтийн стилийг шууд буюу inline /элементийн тодорхойлолтын мөрөнд/ зааж болдог. Үүнийг React компонентийн хэвийн элементүүдэд хэрхэн өгөхийг App компонентийн

class App extends Component {
  render() {
    return (
      <div>
        <h1>
          Hello world!
        </h1>
      </div>
    )
  }
}

кодоор харцгаая.

Python хэлний үндсэн ухагдхуунуудтай танилцсан тул дадлага болгон 3х3 талбайтай X-O буюу икс-окс тоглоомын кодийг бичье. Суралцах хамгийн шалгарсан аргыг практик гэдэг. Иймээс хичээлүүдээс олон авсан мэдлэгдээ суурилан энгийн програмын кодийг бичиж байгаарай.
Програмийн кодоос та ажиллагааны логикийг өөрөө ойлгох гэж үзээрэй. Асуудал үүсвэл кодийн тайлбарыг үзээрэй.

Jsx нь html -тэй төстэй харагдах ч ердийн javascript бичлэг болох, хэрхэн ажилладагийг JSX хичээлээс мэдсэн тул Jsx -ээр хуудасны тэмдэглээг хийхэд ямар хязгаарлалт үйлчилдэг талаар авч үзье.

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>
          Hello world!
        </h1>
      </div>
    )
  }
}

Хичээлээр dunder method буюу "шидэт арга" -ын талаар авч үзье. dunder гэдэг нь хоёр доогуур зураас бөгөөд эдгээр тэмдэгтээр тэмдэглэгдсэн аргуудыг "шидэт арга" буюу тусгай арга гэж нэрлэдэг. Ийм аргуудыг хэрэглэгчийн кодод дахин тодорхойлон ажиллагааны логикийг өөрчлөх боломж байдаг. Асуудлыг дараах

жишээгээр авч үзье.

Энэ хичээлээс эхлэн react ашигладаг jsx бичлэгийн дүрмийн талаар дэлгэрүүлэн авч үзнэ. Өмнөх хичээлүүдэд хуудасны хэвийн тэмдэглэгээний jsx бичлэгийн дүрмийн үндсэн ойлголтуудыг үзсэн. Энэ удаад jsx гэж юу болох, хэрхэн ажилладагийг react програм үүсгэх хичээлд үүсгэсэн төслийн кодоор авч үзье. Бидний үүсгэсэн төслийн оролтын index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

файлд ReactDOM обьектын render аргад App нэрээр импортлон авсан App компонентийг эхний параметрээр дамжуулж байгаа.

Обьект хандалгат програмчлалын технологид нэг ба түүнээс дээш абстракт аргуудыг агуулсан классийг абстракт класс гэж нэрлэдэг. Абстракт арга гэдэг нь абстракт класст тодорхойлогдсон боловч удамшиж буй классууд заавал хэрэгжүүлэлтийг тодорхойлох ёстой тусгай декораттороор тэмдэглэсэн аргууд юм. Python абстракт классуудийг дэмжих дотоод механизмгүй бөгөөд энэ зорилгод abc (Abstract Base Class) тусгай модулийг ашигладаг. Абстракт классийн жишээг харцгаая.

react програм үүсгэх хичээлд create-react-app хэрэгслээр үүсгэсэн шинэ төслийг бүтэцтэй танилцая. Хичээлийн кодийн засварт би VSCode -ийг ашиглах бөгөөд D дискний projects хавтас дахь react хавтаст үүсгэсэн react-less хавтасыг код засварлагч дээр нээе.

Төслийн хавтас доторх үндсэн файлуудаас package.json бол маш чухал файл.

Өмнөх Компонент гэж юу болох хичээлд бид react дээр програмийн кодийг бичихдээ react -ийг index.html файлд оруулан ирэн шууд ашигласан. Програмийн кодийг нэг файлд бүгдийг бичих, кодийг шалгах ажиллагаа, jsx -ийн компиляцийг хийхдээ babel санг нэмэлтээр оруулан ирэх зэрэг нь тийм сайн практик биш тул програм үүсгэх ажиллагааг автоматжуулсан хэрэгслийг react -ийг бүтээгчид боловсруулсан. Дурын хайлтын /жишээ нь google/ системээр create react app мөрийг хайлгавал хэрэгслийг эхний мөрүүдэд олон ирнэ.

Хичээлээр олон удамшилтын онцгой төрөл болох миксиний талаар авч үзнэ. Миксинд дүрмийн ямар нэгэн өөр бичилт байхгүй ч утгын талаасаа онцгой учиртай. Хамгийн гол онцлог нь миксинийг тодорхой классуудын шатлалын суурь класс байдлаар зохиодоггүйд оршино. Өөрөөр хэлбэл тэдгээрийг дурын класстай хольж болдог. Үүнийг машин классийн жишээгээр авч үзье.