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

Интернетэд суурилсан технологи програм бүтээх ажилд зонхилох байр суурийг эзлэх болоод байгааг хүн бүр мэднэ. Учир нь интернет өнөөдөр асар хурдацтай хөгжин компьютер, гар утас, пад зэрэг электрон төхөөрөмжүүдээс гадна телевиз, суурин утас, гэр ахуйн ухаалаг төхөөрөмжүүд гээд интернетэд холбогдож болох бүхий л техник хэрэгсэл интернетээр дамжин мэдээлэл солилцон, ажил үүргийг гүйцэтгэх болсонтой холбоотой. Эдгээр төхөөрөмжүүдийн хүчин чадал өдрөөс өдөрт нэмэгдэн програм хангамжийн хэрэглэгч талын хэсгийг илүү том, бие даан ажиллах боломжийг бүрдүүлсэн. Ингэснээр сервер талын ажлын ачааллыг буулгах, сервер хэрэглэгчдийн хооронд солилцох мэдээллийг хэмжээ багасах, програмыг ашиглахад энгийн болох гээд олон давуу гарч ирсэн. Хэрэглэгч талын програмын үндсэн хэл бол өнөөгийн байдлаар javascript хэл бөгөөд интернетэд суурилсан програм боловсруулагчдын заавал сурч эзэмшсэн байх програмчлалын хэл тул сайтад VueJs фреймворкийн хичээлүүдийг цувралаар оруулж байгаа билээ. Хичээлээр VueJs -ийн директивээр төрөл бүрийн элементүүдийн жагсаалт үүсгэхийг сурна.

Сангийн албан ёсны сайтын нүүр хуудас дахь Get Started товчоор шилжилт хийвэл React -ийн материалууд /Docs/ хэсэгт шилжинэ.

Getting Started хэсэгт React -ийг ажиллуулах аргуудын мэдээлэл бий. Жишээ нь CodePen, CodeSandbox гэх мэт онлайн сервисүүд дээр турших, веб сайтад санг нэмэх, React app үүсгэх гэх мэтээр.

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

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