Хичээлээр react -ийн хукуудаас их өргөн ашиглагддаг useEffect -ийн талаар авч үзье. useEffect -ийн ажиллагааг судлах хуудасны кодийг

import React, {useState} from 'react'

function App() {
  const [type, setType] = useState('users')
  
  return (
      <div className="container">
        <h1>Өгөгдлүүд: {type}</h1>
        
        <button onClick= {() => setType('users')} className="btn btn-primary mx-3">Хэрэглэгчид</button>
        <button onClick= {() => setType('todos')} className="btn btn-primary mx-3">Хийх ажлууд</button>
        <button onClick= {() => setType('posts')} className="btn btn-primary mx-3">Нийтлэлүүд</button>
        
      </div>
  );
}

export default App;

гэж үүсгэе.

Javascript хэл сайтын хэрэглэгч талын буюу frontend хэсгийн програмчлалд хүчтэй түрэн орж ирлээ. Орчин үед хэрэглэгч талын хуудасыг SPA буюу нэг хуудаст аппликашн байдлаар хэрэгжүүлэх хандлага түлхүү зонхилох болсноор frontend кодлогчийн өндөр түвшинд эзэмшсэн байх зүйл бол Javascript болон түүнд дээр зохиогдсон фреймворкууд яалтгүй болоод байгаа. Ямар нэгэн зүйлийг өнгөцхөн судлаад өнгөрөх нэг хэрэг. Харин тухайн зүйлээ сайн эзэмших тийм ч амаргүй. Байнга суралцан судлах хэрэгтэй. Та frontend кодлогч болохоор шийдсэн бол сайтад нийтлэгдсэн хичээлүүдийг үзэхийг хичээнгүйлэн зөвлөе.     

useContext хукийн ажиллагааг судлахын тулд жижиг хэмжээний програмийг зохиоцгооё. Програмийн суурь бүтцийг App компонентод

import React from 'react'
import Alert from './Alert';
import Main from './Main';

function App() {
  return (
      <div className="container pt-3">
        <Alert />
        <Main />
      </div>
  );
}

export default App;

байдлаар зохион байгуулъя.

Сервертэй ажиллах бэлтгэл хичээлээр төсөлд сервертэй ажиллах тохиргоог хийсэн тул vue-resource сангийн ажиллагаатай танилцгаая. Үүний тулд төслийн үндсэн комдонент App.vue файлд

<template>
  <div class="container pt-2">
    <div class="form-group">
      <label for="name">Машины нэр</label>
      <input type="text" id="name" class="form-control" v-model.trim="carName">
    </div>
    <div class="form-group">
      <label for="year">Машины он</label>
      <input type="text" id="year" class="form-control" v-model.number="carYear">
    </div>
    <button class="btn btn-success" @click="createCar">Машин үүсгэх</button>    
  </div>
</template>

<script>
  export default {
    data () {
      return {
        carName: '',
        carYear: 2020
      }
    },
    methods: {
      createCar () {
        console.log('Машин үүсгэх')
      }
    }
   }
</script>

кодыг оруулан өгье.

Javascript хэлний үндсэн үүргийн нэг бол хэрэглэгч талын хуудаст динамик байдлыг үүсгэн програмтай харьцах ажиллагааг илүү уян хатан, хөнгөн, эвтэйхэн болгох юм. Html хуудас дээрх сонголтуудаас боломжит сонголтуудыг хийхдээ CheckBox элементийг ашигладаг бол сонголтуудаас боломжит нэгийг сонгохыг Радио товчоор хийдэг. Жишээ нь бүртгэлийн хуудаст хэрэглэгчийн хүйсийн сонголтыг хийх гэх мэт. Үүнийг VueJs -дээр checkbox -той төстэйгөөр хэрэгжүүлдэг тул CheckBox хичээлийн

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

  </div>
</template>

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

жишээний input тегийн төрлийг radio болгоод програмыг ажлуулан хуудасны ажиллагааг шалгавал