Өмнөх хичээлүүдэд үүсгэсэн App, Car компонентууд өөрийн статик агуулгуудыг л хуудаст харуулж байгаад бага зэргийн динамик ажиллагааг оруулах гээд үзье. Компонентийн агуулгын хэсэг jsx бичлэгийн дүрмээр бичигдсэн javascript код учраас бид түүнд динамик ажиллагааг оруулахад төвөггүй мэт. Иймээс Car компонентийн кодийг

import React from 'react'

const car = () => <div>
  <p>This is car component</p>
  <p><strong>1+1</strong></p>
</div>

export default car 

гэж өөрчлөөд хуудсаа харвал

гэж харагдана. javascript -д 1+1 -г уул нь 2 гэж үзүүлэх ёстой байтал хуудаст ердийн статик текст байдлаар харуулсан. jsx -д 1+1 -г javascript код гэдгийг хэрхэн ойлгуулах вэ гэвэл түүнийг {} хаалтанд авах хэрэгтэй. Тэгвэл jsx хаалтан дахь хэсгийг javascript код гэж үзэн түүнд үйлдэл хийх болно. Өөрөөр хэлбэл кодийг

import React from 'react'

const car = () => <div>
  <p>This is car component</p>
  <p><strong>{1+1}</strong></p>
</div>

export default car

гэж өөрчлөн хадгалаад хуудсаа харвал

гэж харагдана. {} хаалтанд javascript -ийн энгийн функцийг ч

const car = () => <div>
  <p>This is car component</p>
  <p><strong>{Math.random()}</strong></p>
</div>

өгч болно. Өөрчлөлтийг хадгалаад хуудсаа харвал

гэж харуулна. Хуудсаа шинэчилбэл динамикаар санамсаргүй тоог дахин гарган ирнэ. Одоо App компонентод Car компонентийг

class App extends Component {
  render() {
    const divStyle = {
      textAlign: 'center'
    }
    return (
      <div style={divStyle}>
        <h1 style={{ color: 'blue', fontSize: '20px' }}>
          Hello world!
        </h1>
        <Car />
        <Car />
      </div>
    )
  }
}

хоёр оруулан ирвэл

компонент бүр өөрийн санамсаргүй тоог тооцон гаргах болно. {} хаалтанд javascript -ийн энгийн функц, илэрхийллийг өгөн тооцоо хийлгэхийг

import React from 'react'

const car = () => <div>
  <p>This is car component</p>
  <p>Number: <strong>{Math.round(Math.random()*100)}</strong></p>
</div>

export default car

жишээгээр харуулъя. {} хаалтанд javascript -ийн энгийн функц, илэрхийллийг өгөн тооцоо хийлгэх дадлагыг өөрсдөө хийн туршин үзээрэй.

Зөвлөмж: Суралцах нь тийм амар ажил биш ч гэлээ хүн өөрийгөө дайчилж чадвал юуг сурах чадвартай. Сайтын програмчлалтай холбоотой хичээлүүдээс та тухайн хэлний анхан шатны баттай суурь мэдлэгтэй болно гэдгийг баттай хэлэх байна. Програмчлалын хэлийг дээд сургуульд л заадаг гэж буруу ойлгож болохгүй. Програмчлалын хэлийг ЕБС -ийн 7, 8 -р ангиас эхлэн судлан суралцах бүрэн боломжтой. Програмийн код бичих, програм зохиох ажилд хийсвэр сэтгэлгээ, юмыг олон талаас нь ухан ойлгох, өөрөө суралцах чадвар нэн чухал. Энэхүү чадваруудыг танд суулгах нь манай сайтын үндсэн үүрэг. Аливаа зүйлийн суурь онолыг судлахгүйгээр шууд практикт ашиглах гэж оролдох нь тун хэцүү болоод үр дүн муутай. Иймээс эхлээд суурь ухагдхуунуудыг судлан ойлгоод дараа нь түүнийгээ бодит ажилд хэрэглэж сураарай. Эзэн хичээвэл заяа дагана гэдэг тул танд ч бас боломж бүрэн байгаад итгээрэй.