useState

React аппликашний төлөвтэй ажиллахад зориулагдсан UseState хукийн ажиллагааг

import React from 'react'

function App() {
  return (
      <div className="container">
        <h1>Тоолуур</h1>
        <button className="btn btn-success mx-3">Нэмэх</button>
        <button className="btn btn-danger">Хасах</button>
      </div>
  );
}

export default App;

кодоор судлая. Туршилтын төслийг React хук хичээлд үүсгэсэнг сануулъя. Дээрх код бол харагдах байдлыг л тодорхойлж байгаа. Харин тоолууртай ажиллахын тулд төлвийг UseState хукийг ашиглан оруулан ирье.

Материалыг тусгай эрхтэй хэрэглэгч үзнэ.

request_quoteТусгай эрх авах

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 1493 Нийтийн

Хичээлээр компонент хоорондын харилцан ажиллагааны бас нэгэн аргыг авч үзье. Доод шатны /хүүхэд/ компонентоос параметр дамжуулах хичээлд бид хүүхэд компонентод үйл явц үүсгээд түүнийг эцэг компонентод сонсохыг сурсан. Өөрөөр хэлбэл эцэг компонентод тодорхойлогдсон талбарын утгыг хүүхэд компонентоос өөрчилсөн. Үүнийг хийх бас нэгэн арга бий. Жишээ нь App компонентод

<script>
import Car from './components/Car.vue'

export default {
  data () {
    return {
      carName: 'Toyota',
      carYear: 2018
    }
  },
  methods: {
    changeCarName() {
      this.carName = 'Benz'
    }
  },
  components: {
    appCar: Car
  }
}
</script>

  Нээгдсэн тоо: 1817 Төлбөртэй

Математикийн тогтмолууд болон математик тооцоолол хийх аргууд болон шинжүүдийг агуулсан дотоод обьект юм. Array, Date обьектуудаас ялгаатай нь хуулбар үүсгэх боломжгүй. Иймээс Math обьектын хуулбар үүсгэх албагүй байдаг бөгөөд үүнийг хөрвүүлэгч өөрөө хийдэг. Жишээ нь 10 -аас квадрат язгуур авах хэрэгтэй боллоо гэхэд Math обьектын sqrt() аргыг шууд ашиглаж болно.

    var root = Math.sqrt(10);    //  10 -ын квадрат язгуур
    document.write("Math.sqrt(10) = " + Math.sqrt(10) + "<br />");

  Нээгдсэн тоо: 478 Нийтийн

ReactDOM элементэд хандах бас нэгэн боломжийн талаар авч үзье. Энэ боломжийг референс гэдэг бөгөөд та өөр фреймворкуудыг судлаж байсан бол мэдэх байх. Референс React -д хэрхэн ажилладаг ямар хэрэгтэйг харцгаая. Машинуудын жагсаалтыг үзүүлэх Car компонент машины мэдээллийг үзүүлэхдээ түүний нэрийг өөрчлөх input элементийг агуулж байгаа. Тэгвэл Car компонент машины мэдээллийг үзүүлэхэд жагсаалтын аль нэгэн элемент дээр фокус буюу сонголт хийгдсэн байх асуудлыг шийдэх гэе. Үүнийг хэрхэн хэрэгжүүлэх вэ? гэвэл үнэн хэрэгтээ сонголт хийгдэх элементийг DOM -оос аваад түүнд focus аргыг хэрэглэх юм.

  Нээгдсэн тоо: 1063 Төлбөртэй

Програмчлалын хэлүүдийг хамгийн сайн, хүчирхэг гэх мэтээр рейтенг гарган сургалтад ашиглах гээд байх шиг харагддаг. Эрэлт өндөртэй хэлүүдийг сургалтын суурь болгон ашиглах ёстой. Гэхдээ юунаас эхлэх, ямар програмаар яван хир бэлтгэгдсэн мэрэгжилтэн гаргах төлөвлөгөөтэй байхгүй бусдын жишгээр эсхүл моод хөөцөлдвөл ямарч чадваргүй мэргэжилтэнээр л дүүрэх байх. Гол анхаарах зүйл бол ямар хэлийг эзэмшсэн мэрэгжилтэн өндөр эрэлттэй, цалин хөлс сайтай, ирээдүйтэй вэ гэдгийг л сайн ажиглаж байх хэрэгтэй. Сүүлийн жилүүдэд програм зохиох технологид олон зүйлүүд шинээр орон ирснээр frontend програм зохиогчидын эрэлт тасралтгүй нэмэгдсээр байгаа. Энэ бол та javascript хэлийг судлах ёстойг зааж буй чиг. Иймээс сайтын javascript хэлний хичээлүүдийг үзэхийг санал болгоё.

Хуудас дээрх формоос хэрэглэгч жагсаалтаас сонголт хийн ажиллах тохиолдол олон. Иймээс энэ хичээлээр формын бас нэгэн чухал элемент болох сонголтын select тегийг

<template>
  <div>
    <h2>Form inputs</h2>
    <select>
      <option v-for="s in socialsList"> {{ s }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data () {
    return {
      socialsList: ['instagram', 'twitter', 'facebook']
    }
  }
}
</script>

жишээгээр авч үзье.

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

Нээгдсэн тоо : 231

 

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

Нээгдсэн тоо : 321

 

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

Нээгдсэн тоо : 279

 

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 379

 

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 424

 

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Нээгдсэн тоо : 449

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 518

 

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 597

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 624

 
Энэ долоо хоногт

Тэмцээнд 16 шатарчин оролцсон. Нэгийн давааны хуваарийн хичнээн хувилбар байж болох вэ? / Хуьаарьт дор хаяж нэг өрөгт тоглох хүмүүс нь ялгаатай бол хувилбар гэж тооцно. Тоглох өнгө, ширээний дугаарыг тооцохгүй/

Нээгдсэн тоо : 1299

 

Нээгдсэн тоо : 1069

 

prob02_187_01 илэрхийллийг хялбарчил.

Нээгдсэн тоо : 179