useEffect

Хичээлээр 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;

гэж үүсгэе.

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

how_to_regБүртгүүлэх

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

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

react програм үүсгэх хичээлд create-react-app хэрэгслээр үүсгэсэн шинэ төслийг бүтэцтэй танилцая. Хичээлийн кодийн засварт би VSCode -ийг ашиглах бөгөөд D дискний projects хавтас дахь react хавтаст үүсгэсэн react-less хавтасыг код засварлагч дээр нээе.

Төслийн хавтас доторх үндсэн файлуудаас package.json бол маш чухал файл.

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

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох цэс бусдаасаа ялгагдахгүй байгаа нь сайнгүй. 
Үнэхээр / чиглүүлэгч нүүр хуудас буюу http://localhost:3000/ хаягаар нүүр хуудасыг үзүүлж байхад

r_07_02_01

кодийн a тегээр тодорхойлогдсон Нүүр холбоост ямар нэгэн атрибут байхгүй байгаа нь харагдана. 

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

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

<template>
  <div>
      <h2 v-colored>{{ title }}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue!"
    }
  }
}
</script>

кодтой болгосон.

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

Компонентод Inline хэвжүүлэлт хийх нь javascript кодтой холилдон тийм аятайхан бус санагдаж байж болох. Кодлогчид css хэвжүүлэлтийг тусдаа файлд гаргаад хэрэгтэй файлдаа татан оруулан ашиглахыг ихэнхдээ илүүд үздэг. React -д хэвжүүлэлтийг тусдаа гарган ашиглах боломжтой бөгөөд үүний талаар хичээлд авч үзье.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

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

 

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

 

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

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