Дадлага. /Төсөл үүсгэх/

Өмнөх хичээлүүдэд үзсэн онолын мэдлэг дээрээ суурилан түүнийгээ батгах дадлага болгон react дээр төслийг үүсгэе. Төслөө бид үе шаттайгаар өргөжүүлэх бөгөөд эхний ээлжинд компонент хэсэгт сурсан зүйлээ бататган авах болно. Цаашид судлах зүйлүүдийг төсөлдөө нэмэх байдлаар явах юм. Өөрөөр хэлбэл энэ төсөл манай туршилтын талбар болно.

Төслийг үүсгэхдээ консолийг ашиглах тул cmd командаар терминалаа нээгээд төслөө байршуулах хавтастаа шилжээд

react програм үүсгэх npx create-react-app react-quiz командыг өгөөрэй. Би төслөө D:\Projects\React хавтаст хадгалахаар сонгосон. Та өөрийн хүссэн хавтасаа сонгоорой. Төсөл тестийн програм байх тул нэрийг react-quiz гэж өгсөн болно. Нэрийг ч та хүссэнээрээ өгч болно. Та react програм үүсгэх хичээлийг үзсэн бол ажиллагааг мэдэх байх. Команд төслийг үүсгэсний дараа төслийг код засварлагч дээр нээгээд

терминалаас npm start командыг өгөн програм ажиллаж байгааг шалган үзээрэй. Ямар нэгэн асуудал үүсвэл npm install командаар төслийн хамаарлыг шинэчлээрэй.
Төсөлд анхдагчаар генераци хийгдсэн зарим зүйлүүдийг хасан төслийг цэвэрлэе. Төслийн src хавтаст шилжээд бид ашиглахгүй App.test.js, logo.svg, App.css файлуудыг устгаад App.js файлын кодоос

function App() {
  return (
    <div className="App">
      <h1>Hello React</h1>
    </div>
  );
}
export default App;

илүүдэл зүйлсийг хасвал програм хөтөчид

Hello React текстийг л үзүүлнэ. Дадлагын төслөө үүсгэсэн тул дараагийн хичээлүүдээс төслийн хөгжүүлэлтийг хийх болно.

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

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

Үйл явц нэмэх хичээлд хуудасны Гарчиг өөрчлөх товч дээр дарахад үүсэх үйл явцын боловсруулагчийг үүсгэн туршин үзсэн. Үйл явцын боловсруулагч changeTitleHandler функц консолд Товч дарагдсан текстийг л харуулж байгаа. Энэ удаадд үйл явцын боловсруулагчийн функционал ажиллагаа буюу h1 гарчигаар үзүүлж байгаа текстийг өөрчлөлтийг хийе. changeTitleHandler функцэд h1 гарчигаар үзүүлж байгаа текстийг

  changeTitleHandler = () => {
    console.log("Товч дарагдсан")
    this.state.pageTitle = "Товч дарагдсан"
  }

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

React компонентод тулгуурласан тул програмийн бүх элементүүд компонентуудын харьцаа байдаг тул компонентод параметр дамжуулан удирдах зайлшгүй шаардлага гарч ирнэ. Энэ тухай Компонент гэж юу болох хичээлээр өнгөцхөн үзсэн бөгөөд энэ хичээлээр сэдвийг илүү гүнзгийрүүлэн авч үзье.

  Нээгдсэн тоо: 1790 Бүртгүүлэх

Программ ерөнхийдээ мөр мөрөөрөө дээрээсээ доошоо биелэгдэнэ. Нөхцлийн операторууд нь тодорхой нөхцлийг шалгаж түүний үр дүнгээс хамаарч програмын ажиллагааг өөр хэсэгт шилжүүлэх үйлдлийг хийнэ. Хамгийн энгийн нөхцөлт оператор нь ? бөгөөд дараах бүтэцтэй байна.

<нөхцөл> ? <1-р үйлдэл> : <2-р үйлдэл>

Хэрвээ <нөхцөл> үнэн (өөрөөр хэлбэл true утгатай) бол <1-р үйлдэл> биелэгдэнэ. Эсрэг тохиолдолд <2-р үйлдэл> биелэгдэнэ. Жишээ нь

  Нээгдсэн тоо: 973 Бүртгүүлэх

Директивийн амьдралын циклүүдийг /үе/ мэдэж байх хэрэгтэй. Өөрийн директив үүсгэх хичээлд директивийг үүсгэх шатанд ажиллах арга bind -ийг мэдэн авсан. Аргаар директивийн инициализацийг хийн түүнийг виртуал DOM дахь элементэд холбох бөгөөд энэ үед тухайн директив бодит DOM -ийн модонд орж ирээгүй байдаг. Директивийн амьдралын циклүүдийг төслийн color.js файлд тодорхойлсон обьектын кодод нэмье.

export default {
  bind(el, bindings, vnode) {
    console.log('bind')
    el.style.color = 'green'
  },
  inserted(el, bindings, vnode) {
    console.log('inserted')
  },
  update(el, bindings, vnode, oldVnode) {
    console.log('update')
  },
  componentUpdated(el, bindings, vnode, oldVnode) {
    console.log('componentUpdated')
  },
  unbind() {
    console.log('unbind')
  }
}

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

тэгшитгэлийн нэг язгуур нь эерэг, нөгөө язгуур нь сөрөг байх параметрийн бүх утгыг ол.
Тэнцэтгэл бишийн нэг шийд нь M -ээс бага нөгөө шийд нь M -ээс их байх гарцаагүй ба хүрэлцээтэй нөхцөлийг ашиглавал болох бөгөөд энэ тэнцэтгэл бишийг бодвол үед манай тэнцэтгэл бишийн шийдийн нэг нь эерэг нөгөө нь сөрөг байна.

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

 

функц [1;9] завсарын аль хэсэгт буурах вэ?

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

 

функцийн хамгийн бага утгыг ол.

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