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

import React from "react";
import styles from "./Car.module.css";

class Car extends React.Component {
  render() {
    const inputClasses = [styles.input];

    if (this.props.name !== "") {
      inputClasses.push(styles.green);
    } else {
      inputClasses.push(styles.red);
    }

    if (this.props.name.length > 5) {
      inputClasses.push(styles.bold);
    }

    return (
      <div className={styles.Car}>
        <h3>Машиний нэр: {this.props.name}</h3>
        <p>
          Он: <strong>{this.props.year}</strong>
        </p>
        <input
          type="text"
          onChange={this.props.onChangeName}
          value={this.props.name}
          className={inputClasses.join(" ")}
        />
        <button className={styles.btn} onClick={this.props.onDelete}>
          Устгах
        </button>
      </div>
    );
  }
}

export default Car;

өөрчилье.

Компонентийн төлвийн өөрчлөлтийг хийх setState арга ансинхрон ажиллагаатай тул төлвийн өөрчлөлтийг зөв хийж сурах хэрэгтэй. Үүнийг Фрагмент хичээлд үүсгэсэн

import React, { Component } from 'react'

export default class Counter extends Component {
  state = {
    counter: 0
  }
  addCounter = () => {
    this.setState({
      counter: this.state.counter + 1
    })
  }
  render() {
    return (
      <div>
        <h2>Тоолуур {this.state.counter}</h2>
        <button onClick={this.addCounter}>+</button>
        <button onClick={() => this.setState({ counter: this.state.counter - 1 })}>-</button>
      </div>
    )
  }
}

Counter компонентийн жишээн дээр авч үзье.

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

  var a;
  a=[3, 5, 8];

Програмийн цэсийн хэрэгжүүлэлтийн компонентийг хийсний дараа хуудсаа нээгээд fa-bars икон дээр дарахад

дээрх байдлаар харагдаж байгаа. Харин цэсийг эргэн харагдахгүй болгох ажиллагааг fa-times буюу x дүрс хариуцаж байгаа. Цэсийг хаах ажиллагаа fa-times буюу x дүрс дээр дарах үйл явцын боловсруулагчаас гадна цэсний гадна талд дарахад хийгддэг байвал ашиглалтын талаасаа илүү эвтэйхэн гэдэг нь ойлгомжтой.