Сангийн албан ёсны сайтын нүүр хуудас дахь Get Started товчоор шилжилт хийвэл React -ийн материалууд /Docs/ хэсэгт шилжинэ.

Getting Started хэсэгт React -ийг ажиллуулах аргуудын мэдээлэл бий. Жишээ нь CodePen, CodeSandbox гэх мэт онлайн сервисүүд дээр турших, веб сайтад санг нэмэх, React app үүсгэх гэх мэтээр.

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

Vuejs - д компонент үүсгэсний дараа түүнийг бүртгүүлэх хэрэгтэй болдог. Энэ хичээлээр компонентүүдийг бүртгүүлэх аргуудын талаар авч үзнэ. Яагаад компонентийг бүртгүүлэх шаардлагатайг ойлгохын тулд Компонентууд ямар хэрэгтэй вэ? хичээлд my-counter компонент үүсгэсэн

Өмнөх хичээлүүдэд бид react -ийг нилээд сайн судлан энгийн төслийг үүсгэн ажлуулж сурсан. Одоо react компонентуудийн талаар цааш гүнзгийрүүлэн судлах цаг болсон. Хичээлээр Component классаас удамшсан класс хэлбэрээр үүсгэгдсэн компонентод параметр дамжуулахыг авч үзье. Үүнийг төслийн App компонент дээр харцгаая. App компонентийг index.js файлд

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM сангийн render аргаар DOM -д оруулан өгч байгаа.

Сервертэй ажиллах бэлтгэл хичээлээр төсөлд сервертэй ажиллах тохиргоог хийсэн тул vue-resource сангийн ажиллагаатай танилцгаая. Үүний тулд төслийн үндсэн комдонент App.vue файлд

<template>
  <div class="container pt-2">
    <div class="form-group">
      <label for="name">Машины нэр</label>
      <input type="text" id="name" class="form-control" v-model.trim="carName">
    </div>
    <div class="form-group">
      <label for="year">Машины он</label>
      <input type="text" id="year" class="form-control" v-model.number="carYear">
    </div>
    <button class="btn btn-success" @click="createCar">Машин үүсгэх</button>    
  </div>
</template>

<script>
  export default {
    data () {
      return {
        carName: '',
        carYear: 2020
      }
    },
    methods: {
      createCar () {
        console.log('Машин үүсгэх')
      }
    }
   }
</script>

кодыг оруулан өгье.