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

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

React бол динамик ажиллагаатай, нарийн төвөгтэй веб програмийг боловсруулах сайн технологи бөгөөд хичээлээр React -ийг яагаад судлах хэрэгтэй, технологийн үндсэн зарчмуудын талаар авч үзнэ. React -ийн албан ёсны сайтад хандвал түүнийг зохиогчид хэрэглэгчийн интерфейсийг үүсгэх Javascript сан хэмээн тодорхойлсон байгаа. Хэрэглэгчийн интерфейс гэдэг нь ямарч веб програмд хандахад таны хөтөч дээр нээгдэх дэлгэцүүдийг хэлж байгаа юм.

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

<template>
  <div>
    <h1>Car id {{ id }}</h1>
    <button class="btn btn-sm btn-primary mb-2" @click="backToCars">Back</button>
    <br>
    <button class="btn btn-info mt-2">Full info</button>
  </div>
</template>

дахин нэг товчийг нэмэн өгье.

Жич: Хичээлийн материалийг ойлгохын тулд өмнөх хичээлүүдийг үзсэн байх хэрэгтэйг сануулахын дээр Vuejs фреймворкийн үндсэн ойлголтууд хичээлийн багцыг үзэхийг зөвлөе.

Өмнөх хичээлүүдэд бид хоёр хуудсыг үүсгээд тэдгээрт шилжих чиглүүлэгчийг (router) тохируулаад байгаа. Энэ удаад динамик чиглүүлэгчийг хэрхэн хэрэглэхийг авч үзье. Үүний тулд дараах тохиолдлыг авч үзье. Програмын Cars хуудаст машинуудын жагсаалтыг үзүүлэхээр болгон

<template>
  <div>
    <h1>Cars page</h1>
    <ul>
      <router-link 
        tag="li" 
        v-for="car in 5" 
        :to="'/car/' +car"
        :key=car 
      >
        <a>Car {{car}} </a>
      </router-link>
    </ul>
  </div>
</template>

гэж өөрчилье.

Навигацийг /чиглүүлэгч/ үүсгэх хичээлээр үүсгэсэн цэснүүдээс шилжилт хийхэд сүүлд сонгогдсон цэс аль нь болохыг мэдэхэд хүндрэлтэй байгаа. Иймээс хуудасны идэвхитэй холбоосыг тэмдэглэх классыг хэрхэн оруулан ирэхийг авч үзье. Bootstrap -д сонгогодсон цэсийг тэмдэглэх active гэсэн класс байдгийг цэснүүдийн аль нэгэнд

        <ul class="navbar-nav">
          <li class="nav-item">
            <router-link class="nav-link" to="/">Home</router-link>
          </li>
          <li class="nav-item active">
            <router-link class="nav-link" :to="'/cars'">Cars</router-link>
          </li>
        </ul>

тавин өгөөд хуудсаа хөтөч дээр нээвэл

Роутерийг тохируулах хичээлээр төсөлд Home, Cars хуудсуудыг үүсгэн чиглүүлэгчийг тохируулан бүртгүүлсэн хэдий ч хуудас хооронд шилжихдээ хаягийн мөрөнд шууд бичин өгч байгаа. Иймээс хуудас хоорондын шилжилтийг цэс үүсгэн түүгээр дамжуулан хийе. Та Формын шалгалтын бэлтгэл хичээлийг үзсэн бол төсөлд Bootstrap -ийг суулгасан гэдгийг мэдэж байгаа.

Vuejs фреймворкт роутингийг /чиглүүлэгч/ хийдэг vue router пакетыг vue-router -ийг суулгах хичээлээр төсөлдөө нэмэн суулгасан. Одоо хэрэглэгчийн сонгосон хаягаас хамааран дэлгэц дээр үзүүлэх хуудсуудыг бэлтгэх хэрэгтэй. Иймээс төслийн src хавтаст pages хавтасыг үүсгээд түүнд роутерийн утгаас хамааран үзүүлэх хуудас буюу компонентуудыг үүсгэн өгье. pages хавтаст

<template>
  <h1>Home page</h1>
</template>

<script>
export default {
    
}
</script>

<style scoped>

</style>

кодтой Home.vue

Хичээлээр Vuejs фреймворкийн роутинг /чиглүүлэгч гэж орчуулж болох юм/ ойлголтын тухай авч үзье. Орчуулга муухан болсон байх талтай тул Routing гэсэн хэллэгээр нь шууд ойлгох нь илүү болов уу. Програмчлалын хэлний ухагдхуунуудыг шууд гадаад үгээр нь ойлгон тогтоох нь сайн. Учир нь монгол хэл дээр програмчлалтай холбоотой мэдээллүүд бага болохоор бид ихэнх зүйлийг интернетийн гадаад хэлтэй орчноос эсхүл гадаадын ном, хэвлэлээс судлах хэрэгтэй болдог. Vuejs фреймворкийн роутингийг ашиглахын тулд төслийн хуудас хоорондын чиглүүлэгчийг зохион байгуулдаг vue-router пакетыг төсөлдөө суулгах хэрэгтэй.

Өмнөх хичээлүүдэд хэрэглэгчийн оруулсан эмайл, нууц үгэнд шалгалт хийх формыг зохиогоод байгаа. Өөрөөр хэлбэл бид бүртгэлийн формийг үүсгэсэн. Одоо формдоо түүнийг илгээх товчийг нэмвэл бүрэн хэмжээний ажиллагаатай болохоор байгаа. Иймээс формийн хэвд хамгийн сүүлийн form-group класстай div -ийн ард

<template>
  <div class="container">
    <form action="" class="pt-4">
      ...    
      <button class="btn btn-success">Submit</button>            
    </form>
  </div>
</template>

bootstrap -ээр хэвжүүлсэн Submit товчийг нэмэн оруулаад хуудсаа шинэчилбэл

Форм дээрх контролуудыг Vuelidate пакетийн боломжийг ашиглан шалгахыг сурсан. Vuelidate пакетад олон тооны шалгагчид байгаа хэдий ч бид өөрсдийн шалгагчийг үүсгэх шаардлага гардаг. Жишээ нь шинэ хэрэглэгчийг бүртгэх форм хэрэглэгчийн цахим шуудангийн хаяг давтагдахгүй байхыг шалгах хэрэгтэй боллоо гэе. Өөрөөр хэлбэл манай өөрийн өгөгдлийн санд хэрэглэгчийн оруулсан цахим шуудангийн хаяг байгаа эсэхийг шалгах хэрэгтэй болсон гэсэн үг. Vuelidate пакетад манай өгөгдлийн санд хандан шалгалт явуулах шалгагч байхгүй гэдэг нь ойлгомжтой. Эндээс бид өөрсдийн шалгагч үүсгэхийг сурах хэрэгцээ гарч ирнэ.