Хичээлээр react компонентийн элементүүдийн хэвжүүлэлтэд хэрэг болох нэгэн аргачлалыг авч үзье. Тухайлбал элементийг inline -аар хэвжүүлэлтийн үед ашиглах техник юм. Иймээс Car компонентийн хэвжүүлэлтийн Car.css файлаас

.Car {
  margin-bottom: 10px;
  display: block;
  padding: 10px;
  border-radius: 5px;
}

border, box-shadow хэвүүдийг хасан тэдгээрийг Car компонентод inline -аар хэвжүүлэлтээр

  const style = {
    border: '1px solid #ccc',
    boxShadow: '0 4px 5px 0 rgba(0, 0, 0, .14)'
  }
  return (
    <div className="Car" style={style}>
      <h3>Машиний нэр: {props.name}</h3>
      <p>Он: <strong>{props.year}</strong></p>
      <input
        type="text"
        onChange={props.onChangeName}
        value={props.name}
        className={inputClasses.join(' ')}
      />
      <button onClick={props.onDelete}>Устгах</button>
    </div>
  )

style хувьсагчид тодорхойлоод Car компонентийг багцалж буй div -ийн style атрибутад дамжуулах болгон өөрчилье.

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

Циклийн боломжийг дараах

const array = [1, 2, 3, 4, 5];

массиваар авч үзье. Дээрх массивын элементүүдийг консолд гаргахад өмнө хоёр аргыг ашиглаж болдогийн нэг бол for циклийг

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

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

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

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

Чиглүүлэгч буюу url хаягт ямар параметрүүдийг дамжуулж болохыг үзье. Давхар чиглүүлэгчид хичээлд машины тухай дэлгэрэнгүй мэдээллийг

гэж харуулсан. Өөрөөр хэлбэл ямарч машиныг мэдээллийг CarFull компонентод шууд заасан байгаа.