Цэсийг нээх хаах ажиллагааг хариуцах компонентийг боловсруулсан тул энэ хичээлээр програмийн удирдах цэсийг хийе. Үүний тулд төслийн components хавтасны Navigation хавтаст цэсний компонентийн Drawer хавтасыг үүсгээд түүнд Drawer.js, Links.js, Drawer.module.css файлуудыг үүсгэн өгье. Drawer.js файлд

import classes from "./Drawer.module.css";
import {links} from "./Links"

const Drawer = (props) => {
  const renderLinks = () => {
    return links.map((link, index) => {
      return (
        <li key={index}>
          <a href="/#">Link {link}</a>
        </li>
      );
    });
  }
    
  return (
    <nav className={classes.Drawer}>
      <ul>{renderLinks()}</ul>
    </nav>
  ) 
}

export default Drawer;

код бүхий компонентийг үүсгэе.

Давталт (Iterator) паттерн нийлмэл обьектын бүх элементүүдэд тэдгээрийн дотоод бүтцийг задлахгүйгээр хандах абстракт интерфейсийг тодорхойлдог. C# хэл дээр програм зохиогчид массив эсхүл коллекцийн обьектуудыг татан авдаг foreach циклтэй ажиллаж үзсэн байх. Энэ үед коллекцийн нийлмэл классуудад өөрийн бүтэц ба төлвөөрөө ялгаатай олонлог оршиж байдаг. Коллекцийг foreach -р гүйлгэн обьектуудыг авах боломжийг олгож байгаа түлхүүр хэрэгсэл бол давталт хэв буюу энгийнээр хэлбэл IEnumerable , IEnumerator хоёр интерфейс юм.

Тодорхой нөхцөлд жишээ нь тоог тэгд хуваах гэх мэт тохиолдолд систем өөрөө онцгой нөхцлийн генерацийг хийдэг. Гэхдээ C# хэл throw оператороор онцгой нөхцлийг гараар үүсгэх боломжийг олгодог. Өөрөөр хэлбэл throw оператороор бид өөрсдөө онцгой нөхцлийг үүсгэн түүнийг програмийн ажиллагааны үед дуудаж болно гэсэн үг.

Програмийг удирдах цэсийг нээх болон хаах ажиллагааг хариуцах компонентийг боловсруулъя. Үүний тулд төслийн components хавтаст Navigation хавтасыг үүсгээд түүн дотор цэсний шилжилтийн компонентийн MenuToggle хавтасыг үүсгээрэй. Компонентийн хавтаст

import React from "react";
import classes from "./MenuToggle.module.css";

const MenuToggle = (props) => {
  const cls = [classes.MenuToggle, "fa"];
  if (props.isOpen) {
    cls.push("fa-times");
    cls.push(classes.open);
  } else {
    cls.push("fa-bars");
  }

  return <i className={cls.join(" ")} onClick={props.onToggle} />;
};

export default MenuToggle;

Шаблоны арга (Template Method) хэв дэд классуудад алгоритмын бүтцийг өөрчлөхгүйгээр зарим алхамуудыг дахин тодорхойлох боломж олгосон ерөнхий алгоритмыг тодорхойлдог.

Хэвийг хаана ашиглах

• Цаашид дэд классуудад алгоритмын бүтцийг өөрчлөхгүйгээр түүний зарим шатуудыг дахин тодорхойлох төлөвлөгөөтэй байх үед
• Төстэй алгоритмыг хэрэгжүүлж буй классуудад кодын давхардал үүсэхэд. Ерөнхий кодыг хэвийн аргад гарснаар дэд классуудад түүний давхардалыг бууруулна.

Бүх онцгой нөхцлүүдийн суурь бол Exception төрөл. Төрөлд онцгой нөхцлийн талаарх мэдээллийг авч болох хэдэн шинжийг тодорхойлсон байдаг. Үүнд:

• InnerException - үүссэн онцгой нөхцлийн шалтгаан болсон онцгой нөхцлийн тухай мэдээллийг хадгална.
• Message - алдааны мэдээллийг хадгална
• Source - онцгой нөхцлийг дуудсан обьект эсхүл багцын нэрийг хадгална
• StackTrace - онцгой нөхцлийг үүсгэхэд хүргэсэн дуудалтын стекийг мөр илэрхийллээр буцаана
• TargetSite - онцгой нөхцөл дуудагдсан аргыг буцаана

Сорилгын үр дүнгийн QuizResult компонентод сорилгыг дахин эхлүүлэх товч байгаа. react -ийг зохиогчид  програмийг компонент дээр суурилан хийх аргачлалыг уриалдаг учраас сорилгыг дахин эхлүүлэх товчийг тусд нь компонент байдлаар боловсруулъя. Үүний тулд төслийн components хавтаст UI нэртэй хавтасыг үүсгээд түүнд Button хавтасыг үүсгэе. UI гэдэг нь /user interface/ буюу хэрэглэгч талын дэлгэцийн төрөл бүрийн элементүүдийг үзүүлэх компонентуудыг агуулах юм. Button хавтас бол дэлгэц дээр үзүүлэх товчны компонентийн хавтас бөгөөд түүнд Button.js, Button.module.css үүсгэн өгөөрэй.

Команд (Command) хэв тодорхой үйлдэл гүйцэтгэх шаардлагыг тусдаа обьект хэлбэрээр хайрцаглах боломжийг олгодог. Үйлдэл гүйцэтгэх энэхүү шаардлагын обьектыг команд гэж нэрлэдэг. Ингэхдээ үйлдэл гүйцэтгэх шаардлагыг агуулсан обьектууд үйлдлийг гүйцэтгэх обьектуудаас салангид байдаг. Командуудад холбогдолтой мэдээллийг параметр хэлбэрээр дамжуулахын дээр тэдгээрийг дараалалд оруулах, дарааллаас хасаж болно.

catch блокийн тодорхойлолт

Онцгой нөхцлийн боловсруулалтыг хариуцах catch блок

catch
{
    // гүйцэтгэх үйлдлүүд
}

хэлбэртэй байна. Дээрх хэлбэрийн catch блок try блокт үүссэн бүх онцгой нөхцлийн боловсруулалтыг хийнэ. Харин онцгой нөхцлийн төрөлд тохирох боловсруулалтыг хийх catch блок

catch (онцгой_нөхцлийн_төрөл)
{
    // гүйцэтгэх үйлдлүүд
}

хэлбэрээр тодорхойлогдоно.

Хичээлээр Үр дүнгийн компонент хичээлээр хийсэн компонентод динамик ажиллагааг хэрэгжүүлве. Өөрөөр хэлбэл сорилгын үр дүнг динамикаар үзүүлэх юм. Үүний тулд Quiz компонентод

const [results, setResults] = useState({})

сорилгын үр дүнгийн results төлвийг нэмэн өгье. results обьект үр дүнг {[асуултын_id]: хариултын_төлөв} хэлбэрээр агуулна. Өөрөөр хэлбэл хариултын төлөв талбарт хариулт зөв бол right буруу бол wrong утгыг агуулах юм.