Төслийн App компонентийн кодыг харвал

class App extends Component {

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

  changeTitleHandler = (newTitle) => {
    this.setState({
      pageTitle: newTitle
    })
  }

  ChangeHandle = (event) => {
    this.setState({
      pageTitle: event.target.value
    })
  }

  render() {
    const divStyle = {
      textAlign: 'center'
    }

    const cars = this.state.cars

    return (
      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>

        <input type="text" onChange={this.ChangeHandle} />

        <button onClick={this.changeTitleHandler.bind(this, 'App өөрчлөлт')}>Гарчиг өөрчлөх</button>
        <Car
          name={cars[0].name}
          year={cars[0].year}
          onChangeTitle={this.changeTitleHandler.bind(this, cars[0].name)}
        />
        <Car
          name={cars[1].name}
          year={cars[1].year}
          onChangeTitle={() => this.changeTitleHandler(cars[1].name)}
        />
        <Car
          name={cars[2].name}
          year={cars[2].year}
          onChangeTitle={() => this.changeTitleHandler(cars[2].name)}
        />
      </div>
    )
  }
}

болсон байгаа.

C# -д бусад програмчлалын хэлүүдэд хэрэглэгдэг ихэнх операторуудыг ашигладаг. Үйлдэл гэдэг нь оролцогчид (операндууд) дээр тодорхой үйлчлэл хийхийг хэлнэ. Оролцогчоор хувьсагч эсхүл ямар нэгэн утга (жишээ нь тоо) байж болно. Үйлдэл нэгдмэл (унар) буюу нэг оролцогч (операнд) дээр, бинар буюу хоёр оролцогч дээр, тернар буюу гурван оролцогчийнх гэж байдаг.

Програмийн кодчлолийг тусгайлан заалгаж сурдаг зүйл биш. Ямарч зүйлийг өөрөө бие даан сурах боломжтой. Энэ талаар Бие даан сурах нийтлэлийг үзээд эрэгцүүлэн бодоорой. Энэ удаад Input талбарын боловсруулалтын талаар судлая.

Өмнөх хичээлүүдэд хуудасны элементүүдэд үйл явцын сонсогчийг тавин, түүнд параметр дамжуулан хүлээн авах аргуудыг сурсан. Энэ хичээлээр Input талбарт үүссэн үйл явцыг хэрхэн боловсруулахыг судлая. Үүний тулд App компонентийн h1 гарчигийн доор input талбарыг

      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>
        <input type="text"/>
        <button onClick={this.changeTitleHandler.bind(this, 'App өөрчлөлт')}>Гарчиг өөрчлөх</button>

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

Мэдээллийн технологийн салбарын хөгжлийг дагаад кодлогчийн хэрэгцээ жилээс жилд өссөөр байна. Програмийн кодлогч болоход туслах зорилгоор сайтад орчин үед өндөр эрэлттэй байгаа хэлүүдийн хичээлүүдийг цувралаар оруулсаар байх болно. Аливаа зүйлийг сурах суурь бол таны хүсэл эрмэлзлэл гэдгийг Суралцах хир хэцүү вэ? нийтлэлийг уншаад эргэцүүлэн бодоорой.

Хичээлээр консолоос өгөгдөл оруулах, консолд өгөгдлийг үзүүлэхийг судлах болно.

Консолийн гаралт

Өмнөх хичээлүүдэд консолд мэдээлэл үзүүлэхдээ компиляторын Console.WriteLine аргыг хэрэглэсэн. Хэрвээ консолд мэдээллийг гаргах хэрэгтэй түүнийг Console.WriteLine аргад дамжуулах хэрэгтэй. Жишээ нь төслийн Program.cs файлд

string hello = "Сайн уу Монгол";
Console.WriteLine(hello);
Console.WriteLine("C# -д тавтай морил!");
Console.WriteLine("Баяртай Монгол...");
Console.WriteLine(24.5);

командуудыг (statement) өгөөд төслийг ажлуулбал консолд

гэж харуулна.

React -д үйл явцыг хэрхэн боловсруулах талаар гүнзгийрүүлэн судлая. Үүний тулд Car компонентийн кодод Дарах нэртэй товчийг

import React from 'react'

const car = props => <div>
  <h3>Машиний нэр: {props.name}</h3>
  <p>Он: <strong>{props.year}</strong></p>
  <button>Дарах</button>
</div>

export default car

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

гэж харагдана.

Зөвлөмж: Хичээлийн материалыг бүрэн ойлгохын тулд React JS сан хичээлийн багцыг бүхэлд нь үзэхийг зөвлөе.

Програмчлалын бусад хэлүүдийн адилаар C# -д хувьсагчийг үүсгэхэд ашиглах өөрийн өгөгдлийн төрлүүд бий. Өгөгдлийн төрөл обьект авч болох, обьектод хэрэглэж болох үйлдлүүдийн өгөгдлийн дотоод илэрхийлэл, утгын олонлогийг тодорхойлдог тул өгөгдлийн төрлүүдийг маш сайн ойлгон зөв хэрэглэж сурах нь програмийн код бичихид маш чухал зүйл гэдгийг сануулъя.

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

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

Литерал нь өөрчлөгдөхгүй утгыг илэрхийлнэ. (хааяа тэдгээрийг тогтмолууд гэж ч нэрлэдэг.) Литералуудыг хувьсагчид утгаар өгч болдог. Логик, бүхэл тоон, бодит тоон, тэмдэгт, мөрийн литералууд байж болно. null түлхүүр үг тусдаа литералийг илэрхийлнэ.

Логикийн литералууд

true (үнэн), false (худал) гэсэн хоёр логик тогтмол бий.

Console.WriteLine(true);
Console.WriteLine(false);

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

        <h1>
          {this.state.pageTitle}
        </h1>
        <button>Гарчиг өөрчлөх</button>
        <Car name={cars[0].name} year={cars[0].year} />

button тегээр Гарчиг өөрчлөх нэртэй товчийг нэмэн оруулаад хуудсаа харвал

Програмд өгөгдөл хадгалахдаа хувьсагчийг ашигладаг. Хувьсагч нь тодорхой төрлийн утгыг хадгалж буй санах ойн нэрлэгдсэн хэсэг юм. Хувьсагч төрөл, нэр, утгатай байна. Хувьсагчид ямар төрлийн өгөгдөл хадгалахыг төрөл тодорхойлдог. Ямарч хувьсагчийг ашиглахын өмнө тодорхойлох хэрэгтэй. Хувьсагч тодорхойлох /зарлах/ бичлэгийн дүрэм

төрөл хувьсагчийн_нэр;

байна. Эхлээд хувьсагчийн төрөл дараа нь түүний нэр. Дараах шаардлагыг хангасан дурын нэрээр хувьсагчийг нэрлэж болно.