ICSI301 Төсөл 4: ReactJS хуудас үүсгэх нь

Тохиргоо

Та өөрийн систем дээрээ Node.js болон npm модуль менежерийг суулгасан байх ёстой. Хэрэв үгүй бол, суулгах зааврыг дагаж одоо суулгаарай.

project4 нэрээр хавтас үүсгэж энэ файлыг дотор нь задалж хуулаарай. Энэ zip файл энэ даалгаварт ашиглах гарааны файлуудыг агуулж байгаа.

Энэ даалгаварт нэлээдгүй node модулиуд (жишээ нь, Webpack, Babel, ESLint) шаардлагатай. Эдгээр багаж ReactJS веб апп босгох (build), мөн веб аппыг веб хөтчид өгч үйчлэх энгийн Node.js веб сервер (ExpressJS) үүсгэхэд хэрэг болно. Эдгээр модулийг project4 хавтас дотроос дараах командыг ажиллуулж суулгана:

npm install

Бид npm командыг янз бүрийн багажууд татаж авахад хэрэглэдэг. package.json файлын "scripts" шинжид харагдаж байгаа шиг дараах командуудыг ажиллуулах боломжтой:

• npm run build - Webpack багажийг webpack.config.js файлд байгаа тохиргоогоор ажиллуулж төсөлд байгаа бүх JSX файлуудыг багцалж compiled хавтас дотор нэг ширхэг ЖаваСкрипт багц (bundle) файл үүсгэнэ.
• npm run build:w - npm run build командтай адил, гэхдээ --watch горимоор Webpack багажийг ажиллуулна. Ингэснээр React компонентийг хянах, хэрэв тэдгээрийн аль нэгийг нь өөрчилбөл дахин шинэчилж үүсгэдэг. Энэ нь хөгжүүлэлтийн үед хэрэгтэй байдаг бөгөөд өөрчлөгдсөн компонентоор шинээр багц үүсгэж веб хөтчийг дахин ачаалдаг (refresh). Үгүй бол та өөрчлөлт бүрийн дараа npm run build командыг үргэлж дуудаж ажиллуулж байх шаардлагатай болно. Ямар нэг юм хуучирсан тухай санамж [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] гарч болзошгүй, үүнийг алгасахад аюулгүй.
• npm run lint - ESLint багажийг төслийн бүх ЖаваСкрипт файлд ажиллуулна. Даалгавраар илгээх таны код чинь ESLint програмыг ямар нэг санамжгүйгээр (warnings) давсан байх ёстой.

Бүх даалгаварыг гүйцэтгэсэн кодууд project4 хавтас дотор байх ёстой.

Энэ төсөлд веб аппыг хөгжүүлэхэд түгээмэл болсон ReactJS фрэймвөркийг ашиглана. Энэ төслийн зорилго бол таныг ReactJS-д хурдан суралцаж ICSI301 хичээлийн дараагийн төслүүдээр хийх веб аппыг хөгжүүлэхэд бэлэн болгох юм.

Бид веб аппдаа HTTP протоколоор хандахын тулд энгийн Node.js сервер ашиглана. Үүнийг project4 хавтас дотроос дараах командаар асаана:

node webServer.js

project4 хавтас доторх бүх файлуудад http://localhost:3000 гэж эхлэх URL хаягаар хандана. http://localhost:3000 линк дээр давхарлагдахгүй өөрийнхөө серверийг ажиллаж байгаа эсэхийг шалгаж болно. Энэ нь index.html файлыг таны веб хөтчид өгөх болно.

Та хөгжүүлэлтийн орчноо webpack багажийг watch горимоор тохируулахыг зөвлөж байна. Энэ нь та node веб сервер (node webServer.js) болон webpack (npm run build:w) програмыг төслөө босгох болон туршихдаа ашиглаарай. Та тус тусад командын мөрөөр ажиллуулж болно. Ингэвэл Babel багажаар илрүүлсэн алдаа, түүний мэдэгдэл зэргийг webpack програмын гаралтад харуулдаг учраас хэрэгтэй байх болно.

Хэрэв та MacOS зэрэг юникс-төст үйлдлийн системд ажиллаж байгаа бол команд нь:

node webServer.js & npm run build:w

Виндоус үйлдлийн систем дээр веб серверийг ард нь, webpack-ийг наана нь ажиллуулахад Виндоусын хоёр команд нь:

start /B node webServer.js
npm run build:w

taskkill /IM node.exe /F

Эхлэл

Энэ төслөөр таныг хичээлээр танилцсан model, view, controller (модель, харагдац, удирдлага) үлгэр загварыг ашиглах хэрэгтэй. Энэ загварын дагуу кодыг зохион байгуулах олон янзын арга бий. Бид нэгийг нь жишээ болгож ReactJS-ийн зарим үндсэн онцлог, мөн файл системд дэх байршлын зохиомж, модуль загвар зэргийг харуулж байна. Энэ үлгэр загварыг та дараагийн төслөөр хэрэгжүүлж яваарай.

Та энэ жишээг веб хөтөч дээрээ http://localhost:3000/getting-started.html URL хаягаар эхлүүлэн харж болно. Энэ хуудас нь ReactJS-ийг бодитоор ажиллуулж буй жишээ юм. getting-started.html хуудсанд байгаа HTML нь ReactJS аппыг зурж харуулахад зориулж нэг <div> элементийг , аппын ЖаваСкрипт багцыг compiled/gettingStarted.bundle.js холбож ажиллуулахад хэрэгтэй нэг script элементийг агуулж байгаа. webpack тохиргооны файлд webpack.config.js gettingStarted.jsx ReactJS файлаас үүсэх багцыг чиглүүлэн зааж өгсөн болно. gettingStarted.jsx бол нэг JSX програм бөгөөд ReactJS-ийн Example нэртэй компонентийг getting-started.html дотор байгаа нөгөө <div> рендерлэж харагдана.

Дахин ашиглах компонентийг хөгжүүлэхэд ReactJS компонент болон түүнд холбоотой CSS файлуудыг components дэд хавтас дотор зохион байгуулсан. Жишээ нь, Example компонентийг components/example/{Example.jsx,Example.css} файлуудад хөгжүүлсэн.

Моделийн өгөгдөлийг ихэвчлэн веб серверээс авдаг. Веб сервер нь өгөгдлийн сангаас авдаг. Энэ төслөөр өгөгдлийн санг тохируулж хэрэглэхээс зайлсхийж дотоод файл системээс веб хөтчийн DOM-д шууд өгөгдлийг ачаалах HTML script тагийг бэлдэж өгсөн байгаа. Модел нь DOM-ийн ICSI301models нэртэй шинжид хадгалагдана. ReactJS компонент дотроос window.ICSI301models гэж шууд чөлөөтэй хандах боломжтой.

Даалгавар 1: Example харагдацыг ойлгох ба шинэчлэх (5 оноо)

getting-started.html харагдац болон Example компонентийг үзэж ойлгох хэрэгтэй. Өөрийгөө ойлгосон гэдгийг харуулахын тулд дараах зүйлсийг хийнэ:

1. Example компонентийн модель өгөгдлийг "Unknown name" гэсний оронд өөрийн нэрээр шинэчлэнэ. "Unknown name" гэж хаана байгааг хайж болоод үүнийг солино.
2. Example компонентод байгаа motto-update гэсэн класстай div элементийн агуулгыг таны нэр болон богино (20 тэмдэгт хүртэл) уриа үг (motto) харуулдаг JSX командаар солино. Хэрэглэгчийн нэртэй адилхан уриа үгний утга нь моделийн өгөгдлөөс гарч ирэх ёстой. Үүнийг дэлгэцлэх зарим загвар Example.css файлд бичээрэй.
3. Өмнөх алхамаар хийсэн дэлгэцлэх хэсгийг хэрэглэгч өөрөө уриа үгийг шинэчилж болдог байхаар өргөтгөнө. Гарааны утга нь моделийн өгөгдлөөс гарч ирдэг байх ёстой.

Даалгавар 2: Шинэ компонент үүсгэх - муж улсын харагдац (10 оноо)

Өгөгдсөн тэмдэгт мөрийг агуулж байгаа муж улсын бүх нэрсийг дэлгэцлэх шинэ компонент үүсгэнэ. Таны харагдац тэмдэгт мөр авдаг оролтын талбартай байх ёстой. Харагдац нь тухайн тэмдэгт мөрийг агуулж байгаа (том жижиг үсгийн ялгаагүй) муж улсын нэрсийг нэг жагсаалтад цагаан толгойн үсгийн дарааллаар дэлгэцлэнэ. Жишээ нь, тэмдэгт мөр нь "al" гэсэн утгатай байвал Alabama, Alaska, and California нэрс гарч ирнэ. Энэ хуудас муж улсын нэрсийг шүүхэд хэрэглэсэн тэмдэгт мөр утгыг бас дэлгэцлэдэг байна. Хэрэв тохирох муж улсын нэр олдохгүй бол веб хуудас нь холбогдох зурвасыг (юу ч харуулахгүй байхын оронд) харуулдаг байна. Тэмдэгт мөрийн утга хоосон бол бүх муж улсын нэрийг харуулдаг байна.

Даалгавар #1-д өгсөн шиг муж улсын нэрийг модель өгөгдөл болгож өгсөн байгаа. Үүнд дараах script тагаар холбож өгсөний дараа window.ICSI301models.states гэж хандаж болно:

<script src="modelData/states.js"></script>

states.js файлаас муж улсын нэрний өгөгдлийн форматын тайлбартай танилцаарай.

Энэ даалгаврыг эхлүүлэхэд туслах, чиглүүлэх зорилгоор compiled/p2.bundle.js файлыг холбож дуудсан p2.html файлыг нэрийн зохицолтойгоор бэлдэж өгсөн байгаа. Энэ ЖаваСкрипт багц файлыг p2.jsx файлаас webpack багажаар үүсгэсэн бөгөөд энэ нь States ReactJS компонентийг дэлгэцлэнэ. Энэ хуудсыг веб хөтөч дээр http://localhost:3000/p2.html URL хаягаар дуудаж үзээрэй.

Таны хөгжүүлэх файлууд бол:

• components/states/States.jsx - Муж улсын компонентийг хөгжүүлэх ReactJS компонент.
• components/states/States.css - Компонентод шаардлагатай дурын CSS загварууд. Муж улсын нэрийн жагсаалтыг харуулахад зарим загваар хэрэгжүүлэх ёстой.

Даалгавар 3: Байршлыг өөрчлөх (5 оноо)

Header нэртэй ReactJS компонент үүсгэнэ. Энэ нь харагдацын дээд хэсэгт веб аппын толгойг (header) дэлгэцлэдэг. Толгойг энэ даалгаварт байгаа ReactJS-ийн бүх компонентод (gettingStarted.jsx, p2.jsx, p4.jsx, p5.jsx) нэмж өгнө. Өмнөх даалгаврын эхний хэсгийг (таны нэр ба уриа үгтэй) өөрчлөхгүй. Тэр хэсэг нь толгойгоос тусдаа байх ёстой. Өөрийн төсөөлөл, бүтээлч байдлаараа "зөвхөн чинийх" гэж харагдах толгойг үүсгээрэй. Энэ нь нэмэлт зураг, график, юунд таалагдана, тэр бүгдийг агуулж болно. Та компонентууд дахь JSX/ЖаваСкриптийг өргөтгөх бөгөөд гаднын ReactJS компонент, ЖаваСкрипт санг, жишээ нь, JQuery, ашиглаж болохгүй. Бүтээлч байгаарай!

Таны хөгжүүлэх файлууд бол:

• components/header/Header.jsx - Толгойг хөгжүүлэх ReactJS компонент. Энэ нь React.Component төрлийн Header классаар тодорхойлогдоно.
• components/header/Header.css - Өөрийн компонентод хэрэгтэй ямар нэг CSS загварууд. Толгой компонентод заавал загвар тодорхойлж өгнө.

Даалгавар 4: Харагдацуудыг динамикаар солих (10 оноо)

p4.html болон холбогдох JSX файлыг p4.jsx үүсгэнэ. Энэ нь хоёр харагдац компонентийг (Example болон States components) агуулна. p4.jsx нь энэ хоёр компонентийг хооронд нь сольж харуулдаг байх хэрэгтэй. Нэг харагдац нь дэлгэцлэгдсэн байхад нөгөөг нь сольж дэлгэцлэх нэг товч (button) байна. Жишээ нь, States дэлгэцлэгдсэн байхад үүний дээд талд байрлах товч нь "Switch to Example" гэж харагдах, States гэж дарахад өөрөө алга болоод Example дэлгэцлэгддэг байна.

Энэ даалгаврын хувьд дээрх файлуудыг үүсгэх хэрэгтэй. Мөн webpack тохиргооны webpack.config.js файлд p4.html хуудсанд ашиглах compiled/p4.bundle.js файлыг босгох тухай зааж өгөх хэрэгтэй болно. Хэрэв webpack багажийг --watch горимоор (i.e. npm run build:w) ажиллуулж байгаа бол та webpack.config.js файлаа өөрчилсний дараа дахин ажиллуулах шаардлагатай.

Даалгавар 5: Нэг хуудаст апп (5 оноо)

Хэдийгээр Даалгавар 4-т гүйцэтгэсэн аргаар харагдац хооронд шилжиж болох ч энэ нь тухайн нэг харагдацыг заах URL-ийг хуваалцах (share) болон тэмдэглэж авах (bookmark) боломжийг олгохгүй. Веб хөтчийг дахин ачаалахад веб апп ямар хуудсыг дэлгэцэлж байсныг алдуулна.

Бид энэ дутагдлыг URL-д харагдацын мэдээллийг хадгалснаар шийдвэрлэх боломжтой. React Router нь ReactJS-д ийм функцээр хангаж өгдөг. Энэ даалгаврын хувьд p4.html файлаа p5.html, p4.jsx файлаа p5.jsx нэртэйгээр хуулбарлаж аваарай. Кодоо React Router модулийг ашиглан хоёр харагдацын хооронд нь сольж харуулдаг болгоно. Та тодорхой загвартай хэрэгслийн-мөр маягийн удирдлагатай (styled toolbar-like control) (энгийн бичвэр линк байх нь хангалтгүй) байх ёстой ба энэ нь хэрэглэгчид example болон states компонент харагдацыг сольж шилжих боломжийг олгодог байна.

Энэ бол бидний импортлож байгаа үндсэн ReactJS модулиас гаднах эхний өргөтгөл учир бид танд алхам нэг бүрийг нь тайлбарлаж өгье.

1. Төслийн package.json файлд react-router модулийг тодорхойлсон учир npm install командаар аль хэдийнэ татаад авчихсан байгаа. Бид үүнийг p5.jsx файл дотроо импортлож оруулах ёстой. Дараах мөрүүдийг нэмнэ:

   import { HashRouter, Route, Link } from "react-router-dom";

   Энэ мөр нь ЖаваСкрипт import командаар React Router-аас ReactJS компонентуудыг: HashRouter, Route, болон Link авч ирнэ. React Router-ийн HashRouter модуль URL-ийн ногдол хэсгийг (fragment portion) мэдээллийг хадгалах зорилгоор ашигладаг. Иймд бид States харагдацыг илэрхийлэх p5.html#/states, Example компонент харагдацыг тодорхойлох p5.html#/example тэмдгийг үүсгэж болно.
2. React Router-ийг ашигладаг хамгийн түгээмэл арга нь одоогийн URL дээр нь түшиглээд үзүүлэх гэж байгаа харагдацаа нөхцөлтэй рендерлэх юм. Route компонентийг HashRouter дотор оруулж ийм нөхцөлт рендерлэлтийг хэрэгжүүлж болдог:

   <HashRouter>
     ...
     <Route path="/states" component={States} />
     <Route path="/example" component={Example} />
     ...
   </HashRouter>
   

   Хэрэв URL-д #/states агуулж байвал States, #/example гэж байвал Example компонентийг рендерлэнэ.
3. Хэдийгээр бид хайперлинк (жишээ нь, <a> tags) ашиглаад харагдацыг сольж болох боловч react-router Link компонентоор хайперлинк үүсгэн ашиглахыг зөвлөдөг. Жишээ нь:

   <Link to="/states">States</Link>
   

   Дээрх код href="#/states" утгатай, "States" бичвэртэй хайперлинк үүсгэж өгнө.

Загвар (5 оноо)

Энэ оноог лекц дээр хэлэлцсэн MVC загварын зөвлөмжийг дагаж зөв зохион байгуулсан тохиолдолд өгнө. Таны код DOM-д шууд хандаж удирдсан байж болохгүй. Нэмж хэлэхэд, таны код болон загвар цэвэрхэн, уншууртай байх ёстой. Илгээхээсээ өмнө ESLint багажийг ажиллуулсан байх хэрэгтэй. ESLint ямар нэг алдаа өгөөгүй байна.

Хүлээлгэн өгөх үр дүн

5 дахь хэсгийг хэрэгжүүлсний дараа 1-ээс 4 хүртэл ажиллаж байгааг нягтлаарай!

Даалгавар илгээх зааврын дагуу аппаа бүхэлд нь (project4 хавтас доторх бүгд) илгээнэ.