react програмд олон хуудас үүсгэн удирдахын тулд react -ийн бүрэлдхүүнд ордоггүй ч түүнтэй нягт холбоотой ажилладаг нэмэлт пакетийг суулгах хэрэгтэй. Үүний тулд VSCode -ийн терминалийн цонхыг нээгээд

npm i react-router-dom

командыг өгнө. Пакетийг facebook боловсруулаагүй ч react програмд олон хуудас үүсгэн удирдахад хамгийн өргөнөөр ашигладаг. Төсөлд пакетийг ашиглахын тулд төслийн кодийг тусгай компонентод багцлан react програмд react-router пакетийг ашиглаж байгааг мэдэгдэх юм.

Хөрвүүлэгч (Interpreter) хэв нь тодорхой хэлний дүрмийг илэрхийлэн энэ хэлний өгүүлбэр хөрвүүлэгчийг /орчуулагч/ тодорхойлдог.

Хэвийг UML диаграмаар дараах байдлаар тодорхойлно.

Делегат нь аргыг заасан обьектоор илэрхийлэгдэнэ. Өөрөөр хэлбэл делегат гэдэг нь аргын заагч бөгөөд түүгээр тухайн аргыг дуудаж болно.

Делегатийн тодорхойлолт

Делегатийг зарлахдаа delegate түлхүүр үгийг ашиглах ба түүний араас буцаах төрөл, нэр, параметрүүд байрлана. Жишээ нь

delegate void Message();

Message делегатийн буцаах төрөл void (өөрөөр хэлбэл юу ч буцаахгүй) бөгөөд ямарч параметрийг авахгүй. Энэ нь Message делегат ямарч параметр авдаггүй бөгөөд юу ч буцаадаггүй дурын аргыг зааж болно гэсэн үг.
Message делегатийн хэрэглэгээг

Message mes;            // 2. делегатийн хувьсагчийг үүсгэх
mes = Hello;            // 3. хувьсагчид аргын хаягийг олгох
mes();                  // 4. аргыг дуудах

void Hello() => Console.WriteLine("Hello World");
delegate void Message(); // 1. делегатийг зарлах

үзүүлсэн дээрх кодийг авч үзье.

Энэ хичээлээс эхлэн олон хуудастай төслийг үүсгэн хуудас хооронд шууд буюу дахин ачаалалтгүйгээр шилжин удирдах боломжийн талаар үзэх болно. Өөрөөр хэлбэл SPA нэг хуудаст програмийг зохиож сурах юм. Хичээлд зориулан шинэ төслийг үүсгэхдээ react програм үүсгэх хичээлийнхээс арай өөрөөр шууд VSCode засварлагчаас үүсгэх аргыг ашиглая. Аргууд хооронд ялгаа бага тул онцын асуудал үүсэх учиргүй. Эхлээд төслүүдээ хадгалж буй хавтаст react-router хавтасыг үүгээд VSCode засварлагчаар үүсгэсэн хавтасаа нээн өгөөд терминалын цонхыг нээгээд

npx create-react-app . командыг өгөөрэй.

Төлөв байдлын үүргийн гинж (Chain of responsibility) загварчлалын хэв шаардлагыг хэд хэдэн обьектууд боловсруулах боломжийг олгодог тул шаардлагын дамжуулагч хүлээн авагчтай хатуу уяа /холбоо/ үүсэхээс сэргийлдэг. Боломжит бүх боловсруулагчид гинж үүсгэн аль нэг обьект шаардлагыг боловсруулах хүртэл шаардлага өөрөө энэ гинжээр дамжина. Шаардлагыг хүлээн авсан обьект нэг бол шаардлагыг боловсруулна эсхүл шаардлагыг гүйцэтгүүлэхээр дараагийн обьектод шилжүүлдэг.

Онцгой нөхцлийг дуудсан кодийг try блок эсхүл онцгой нөхцлийг боловсруулах catch блокгүй try..catch бүтцэд байршуулсан бол систем тохирох боловсруулагчийг дуудалтын стект хайна. Жишээ нь

try
{
    TestClass.Method1();
}
catch (DivideByZeroException ex)
{
    Console.WriteLine($"Main арга дахь catch : {ex.Message}");
}
finally
{
    Console.WriteLine("Main арга дахь finally блок");
}
Console.WriteLine("Main аргын төгсгөл");
 
class TestClass
{
    public static void Method1()
    {
        try
        {
            Method2();
        }
        catch (IndexOutOfRangeException ex)
        {
            Console.WriteLine($"Method1 аргын catch: {ex.Message}");
        }
        finally
        {
            Console.WriteLine("Method1 аргын finally блок");
        }
        Console.WriteLine("Method1 аргын төгсгөл");
    }
    static void Method2()
    {
        try
        {
            int x = 8;
            int y = x / 0;
        }
        finally
        {
            Console.WriteLine("Method2 аргын finally блок");
        }
        Console.WriteLine("Method2 аргын төгсгөл");
    }
}

кодийг авч үзье.

Програмийн цэсийн хэрэгжүүлэлтийн компонентийг хийсний дараа хуудсаа нээгээд fa-bars икон дээр дарахад

дээрх байдлаар харагдаж байгаа. Харин цэсийг эргэн харагдахгүй болгох ажиллагааг fa-times буюу x дүрс хариуцаж байгаа. Цэсийг хаах ажиллагаа fa-times буюу x дүрс дээр дарах үйл явцын боловсруулагчаас гадна цэсний гадна талд дарахад хийгддэг байвал ашиглалтын талаасаа илүү эвтэйхэн гэдэг нь ойлгомжтой.

Төлөв (State) бол дотоод нөхцлөөс хамааран обьект өөрийн төлөв байдлыг өөрчлөх боломж олгодог загварчлалын хэв.

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

• Програмын явцад обьектын төлөв байдал түүний нөхцөл байдлаас хамааран динамикаар өөрчлөгдөж болох үед
• Обьектын аргын кодод олон тооны нөхцөлт бүтцийг ашигласан байхад тэдгээрийн сонголт обьектын тухайн үеийн төлвөөс хамаарах үед

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

try
{
    Person person = new Person { Name = "Tom", Age = 17 };
}
catch (Exception ex)
{
    Console.WriteLine($"Алдаа: {ex.Message}");
}
 
class Person
{
    private int age;
    public string Name { get; set; } = "";
    public int Age
    {
        get => age;
        set
        {
            if (value < 18)
                throw new Exception("18 нас хүрээгүй бол бүртгэл хаалттай");
            else
                age = value;
        }
    }
}

Person классийн age шинжид утга олгохдоо шалгалт хийн нас 18 -аас бага бол онцгой нөхцлийг үүсгэнэ.

Цэсийг нээх хаах ажиллагааг хариуцах компонентийг боловсруулсан тул энэ хичээлээр програмийн удирдах цэсийг хийе. Үүний тулд төслийн 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;

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