Үйл явдлыг боловсруулах бол Javascript программын үндсэн үүрэг гэж үзэхэд бараг болно. Иймд хичээлийг сайн үзээд ойлгон авах хэрэгтэй. Нэг үйл явдал тухайн үйл явц болсон элементэд нөлөө үзүүлэхээс гадна түүний дээрх элементүүдэд бас үйлчилдэг. Энэ нь элементэд олон дараалсан HTML тег агуулагдаж байх тохиолдолд тег бүрд боловсруулагч тавихгүйгээр дээд түвшин буюу эцэг элементэд ганц боловсруулагч заагаад бүх үйл явцыг барихад их эвтэйхэн байдаг. Гурван элемент нэг нэгдээ орон байрласан тохиолдлыг авч үзье.

Хукууд ердийн функцууд тул бид ч өөрсдөө хукийг зохион ашиглах боломжтой. Үүнийг input элемент, түүнд оруулсан текстийг үзүүлэх h1 гарчиг бүхий дараах энгийн

import React, {useState} from 'react'

function App() {
  const [name, setName] = useState('')
  
  const changeHandler = event => {
    setName(event.target.value)  
  }
  
  return (
    <div className="container pt-3">
      <input type="text" value={name} onChange={changeHandler}/>
      <h1>{name}</h1>
    </div>      
  );
}

export default App;

жишээгээр харцгаая.

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

Энэ удаад Html хуудас дээрх сонголтуудаас тохирохыг нь зөвлөх тэмдэглэгээ хийдэг CheckBox гэж нэрлэдэг элементийн тухай авч үзье. Жишээ нь бүртгэлийн хуудаст хэрэглэгчийн сонирхдог зүйлсийг тодорхой төрлүүдээс сонгох байдлаар ихээр авдаг. Үүнийг VueJs -дээр хэрхэн хэрэгжүүлэхийг

<template>
  <div>
    <h2>Form inputs</h2> 
    <label>
      <input type="checkbox"> instagram
    </label>
    <label>
      <input type="checkbox"> twitter
    </label>    
    <label>
      <input type="checkbox"> facebook
    </label>    
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

жишээгээр харцгаая.

Хичээлээр төслийн үндсэн хуудсыг зохиоё. Эхлээд төслийн src хавтаст өөрийн төлөв бүхий төслийн хэмжээнд суурь болох компонентуудийг хадгалах containers хавтасыг үүсгэе. Үүний зэрэгцээ функционал компонентуудийг хадгалах components хавтасыг бас үүсгэн өгье. containers хавтаст Quiz хавтасыг үүсгээд түүнд

Классийн компонентийн код

import React, { Component } from "react";

class Quiz extends Component {
  render() {
    return (
      <div>
        <h3>Сорилго</h3>
      </div>
    );
  }
}

export default Quiz;