Өмнөх хичээлүүдэд React сан хэрхэн ажилладаг, create react app хэрэгсэл, хуудасны хэвийн бичлэгийн Jsx дүрмүүдтэй танилцан тэдгээрийн ажиллагааг жишээнд дээр судлан танилцсан бол одоо сангийн өөрийнх нь ажиллагаануудтай дэлгэрэнгүй танилцгаая. Эхлээд create react app хэрэгслээр үүсгэсэн төслийн үндсэн компонент болох App -аас өмнөх хичээлд судалсан зарим ойлголтуудын жишээ кодийг

class App extends Component {
  render() {
    const divStyle = {
      textAlign: 'center'
    }
    return (
      <div style={divStyle}>
        <h1>
          Hello world!
        </h1>
        <Car name={'Toyata Prius'} year={'2018'} />
        <Car name="Toyata Camry" year={'2019'} />
        <Car name={'Ford'} year={'2015'} />
      </div>
    )
  }
}

хасан цэвэрлэе.

C# хэл дээрх бүх програмийн код .cs өргөтгөлтэй файлд агуулагдана. Visual Studio -гоор үүсгэсэн төсөлд анхдагчаар Program.cs нэртэй нэг файл л үүснэ.  

Програмыг ажлуулахад анхдагчаар Program.cs файл ажилладаг. Шаардлагатай бол төсөлд C# -ийн бусад файлуудыг нэмж болно.

React компонентод параметр дамжуулах бас нэгэн аргыг авч үзье. Компонентийн хэвд jsx гэж нэрлэгддэг html маягийн бичлэгийг ашиглаж байгаа. App компонентод Car компонентийг оруулан ирэхдээ

<Car name={'Toyata Prius'} year={'2018'} />

гэж компонентийн нэрийг өөрөө хаагдсан (/> -ийг ашиглана) html тег хэлбэрээр бичин өгч байгаа.

Боловсруулагчид C# дээр програм зохиохдоо голдуу Visual Studio эсхүл ямар нэгэн JetBrains компаний Rider мэтийн IDE (integrated development environment) боловсруулалтын хэрэгслийг ашигладаг. Гэхдээ бүхий л IDE -нууд боловсруулалтын ажиллагааг хөнгөвчилж өгдөг ч програм үүсгэх ажиллагааны олон жижиг зүйлүүдийг цаанаа хийдэг. Үнэн хэрэгтэй бид зөвхөн .NET CLI -ийн боломжийг ашиглан боловсруулалтын орчингүйгээр ажиллах боломжтой.

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

C# хэл дээр програм зохиоход бидэнд юу хэрэгтэй вэ?

• Програмийн кодоо бичих текст засварлагч.
• Програмийн кодийг exe өргөтгөлтэй файлд багцлах компилятор /хөрвүүлэгч/
• Програмийн компиляц, цаашдын ажиллагаанд хэрэгтэй .NET фреймворк

хэрэгтэй.

Програмийн кодийг бичих, тестлэн зүгшрүүлэх ажиллагааг хөнгөвчлөх үүднээс ихэнхдээ тусгай боловсруулалтын орчинг ашигдладаг. Тухайлбал Visual Studio.

Өмнөх хичээлүүдэд үүсгэсэн 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 

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

Python -нд модулаас гадна пакетийг үүсгэж болно. Энгийнээр бол модул гэдэг нь .py өргөтгөлтэй файлд хадгалсан бусад .py өргөтгөлтэй файлын код ашиглаж болох скрипт. Пакет бол модулуудийг логикийн талаас нь нэгтгэсэн нэгдэл. Текст засварлагчид үүсгэсэн кодоо .py өргөтгөлтэй файлаар хадгалахад л модул үүсдэг бол пакетийг үүнээс арай өөрөөр үүсгэдэгийг хичээлээр авч үзье.

Өнөө үед мэдээллийн технологийн салбарт эрэлттэй, эрчимтэй хөгжүүлэлттэй, хамгийн хүчирхэг хэлүүдийн нэг бол програмчлалын C# хэл юм. Хэл дээр десктопийн жижигхэн програмаас эхлээд өдөрт сая сая хэрэглэгчид үйлчлүүлдэг том хэмжээний веб портал, сервисүүд гээд маш олон төрлийн програмуудыг боловсруулж байна.
C# залуу хэл биш бөгөөд .NET платформ хөгжлийн урт замыг туулсан. 2002 оны 2-р сард Microsoft Visual Studio .NET -тэй зэрэг хэлний анхны хувилбар гарсан.

Өмнөх хичээлүүдэд бид create-react-app хэрэгслээр үүсгэсэн төслийн суурь код дээр жишээнүүдийг судласан. Одоо react төсөлд өөр компонентууд үүсгэн тэдгээрийг өөр хооронд нь холбон ашиглахыг сурцгаая. react -ийн компонентийг голдуу тусд нь хавтас үүсгэн байршуулдаг тул бид төслийн src хавтаст Car нэртэй хавтасыг үүсгээд түүн дотор Car.js файлыг үүсгээрэй.

react -д компонентийг үүсгэх хоёр үндсэн арга байдаг талаар JSX хичээлд дурдсан.