Хуудасны элементүүдийг динамикаар  хэвжүүлэх шаардлага ихээр гардаг. Үүнийг хэрхэн хэрэгжүүлэхийг Car компонентийн input элемент дээр

import React from 'react'
import './Car.css'

const car = props => (
  <div className="Car">
    <h3>Машиний нэр: {props.name}</h3>
    <p>Он: <strong>{props.year}</strong></p>
    <input type="text" onChange={props.onChangeName} value={props.name} />
    <button onClick={props.onDelete}>Устгах</button>
  </div>
)
export default car

авч үзье.

Програмчлалын хэлний суурь бүрдүүлэгчдийг нэг бол тодорхой нөхцлөөс хамааран програмын кодийн ажиллагааны дарааллыг өөрчлөх нөхцлийн бүтэц юм. C# хэлний ийм бүтцүүдийн нэг бол if..else бүтэц.
if..else бүтэц нөхцлийн үнэн эсэхийг шалгаад үр дүнгээс хамааран тодорхой кодийг биелүүлдэг. Бүтцийн энгийн хэлбэр if блокоос бүрдэнэ.

if(нөхцөл)
{
    биелэгдэх командууд
}

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

Нөхцөлт илэрхийлэл тусдаа үйлдлийн багц. Ийм үйлдлүүд bool төрлийн логик утгыг буцаадаг. Нөхцөлт илэрхийлэл үнэн бол true, илэрхийлэл худал бол false утгыг буцаана. Ийм үйлдлүүдэд харьцуулах, логик үйлдлүүд хамаарагдана.

Програмийн хэрэглэгч талын интерфейсийг css -ээр хэвжүүлэн ашиглахад эвтэйхэн, ойлгомжтой болгодог. Иймээс энэ хичээлээс react компонентийн элементүүдийг хэрхэн хэвжүүлэх талаар авч үзье. Манай төслийн интерфейс

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

Өгөгдлийн төрлүүд хичээлд төрлүүд ямар утгууд авах, санах ойд хичнээн байт эзэлдэг Арифметик үйлдлүүд хичээлээр төрлүүдэд ямар үйлдлүүдийг хийх талаар үзсэн. C# хэл хатуу төрөлжилттэй хэл тул өгөгдлийн төрлүүд, тэдгээрийн хөрвүүлэлтийг сайн ойлгох хэрэгтэй. Төрлийн хувиргалтууд голдуу нэмэх үйлдлийн үед үүсдэг тул төрөл бүрийн өгөгдлүүдэд нэмэх үйлдлийг хийхийг үзье.

byte a = 4;
int b = a + 70;

Динамик жагсаалттай ажиллах боломжуудын тухай авч үзье. Манай хичээлийн програм App, Car компонентуудтай болоод байгаа.

App компонентийн Toogle car товч машиний мэдээллийн жагсаалтыг нээх, хаах ажиллагааг хийх бол Car компонентийн Дарах товчоор App компонентод h1 гарчигаар үзүүлж буй текстийг машиний нэрээр сольдог. Динамик жагсаалттай ажиллах практик болгон програмд Car компонентийн Дарах товчийг input -ээр солиод input -д оруулсан мэдээллээр Car компонентоос машиний нэрийг өөрчлөх машиний мэдээллийг жагсаалтаас хасах ажиллагаануудыг хэрэгжүүлье.

Утга олгох үйлдэлд хоёр операнд оролцох бөгөөд зүүн операнд зөвхөн өөрчлөгдөж болох илэрхийлэл байх ёстой. Жишээ нь хувьсагч. C# -д бусад програмийн хэлүүдэд байдаг утга олголтын (=) суурь үйлдэл байдаг бөгөөд үйлдэл баруун операндийн утгыг зүүн операндад олгдог.  Жишээ нь

int number = 23;

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

Jsx -д жагсаалтыг циклээр оруулан ирэх ажиллагааг мэдсэн тул зарим элементүүдийг нөхцлөөс хамааран үзүүлэх аргыг сурцгаая. Үүний тулд App компонентийн state обьектод

  state = {
    cars: [
      { name: 'Toyata Prius', year: '2018' },
      { name: 'Toyata Camry', year: '2019' },
      { name: 'Ford', year: '2015' }
    ],
    pageTitle: 'App компонент',
    showCars: false
  }

Битийн үйлдлүүд онцгой үйлдлийн ангилал. Үйлдлүүд тоонуудын бит бүр дээр хийгддэг. Ийм учраас тоонуудыг хоёртын системд авч үздэг. Жишээ нь 2 хоёртын системд 10 бөгөөд хоёр биттэй харин 7 - 111 гээд гурван битээр илэрхийлэгдэнэ.

Жич: Програмийн код бичиж сурахын тулд тооллын системийн ерөнхий ойлголтыг сайн ойлгосон байхыг зөвлөе. Ухагдхуун тийм ч төвөгтэй биш тул тооллын системийн талаар интернетээд судлан мэдээрэй.