1. ReactJS

ReactJS – бул Facebook (Meta) тарабынан түзүлгөн, компонентке негизделген китепкана. Бул фреймворк эмес, анткени React “view layer” үчүн гана жооптуу, калган түзүлүштөр үчүн башка китепканаларды кошуу керек.

• Максатка багытталган минимализм

  React минималдуу функционалдуулукту сунуштайт. Мисалы, багыттоо (routing) же глобалдык абал башкаруу үчүн кошумча китепканалар керек.

• Виртуалдык DOM

  React'тин негизги өзгөчөлүктөрүнүн бири – бул “виртуалдык DOM”. Бул көп учурда иштөөнү жакшыртат.

• Оңой үйрөнүү

  React'ти үйрөнүү салыштырмалуу жеңил, бирок кошумча китепканалар менен иштөө керек болот.

React мисалы:

import React from 'react';

// Жөнөкөй React компоненти
function HelloWorld() {
  // Бир нече тэгди кайтаруу үчүн Fragment же <> </> колдонулат
  return (
    <>
      <h1>Hello World!</h1>
      <p>Бул React компонентине мисал</p>
    </>
  );
}

export default HelloWorld;

2. Angular

Angular – бул Google тарабынан иштелип чыккан толук фреймворк. TypeScript негизинде иштейт жана бардык керектүү функционалдуулуктарды камтыйт.

• Катуу структура

  Angular'да “components”, “services” жана “modules” сыяктуу так структура бар.

• TypeScript

  Angular TypeScript'ти колдонот, бул чоң долбоорлор үчүн ыңгайлуу.

• Эки тараптуу байланыш

  Angular эки тараптуу маалымат байланышын камсыздайт, бул модел жана көрүнүш (view) ортосундагы синхрондоштукту камсыз кылат.

Angular мисалы:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `
    <!-- Шаблондо эки тараптуу маалымат байланышын көрсөтөт -->
    <h1>Hello World</h1>
    <p>Бул Angular компонентине мисал</p>
  `
})
export class HelloWorldComponent {
  // Angularда TypeScript колдонулат
}

3. VueJS

VueJS – бул Evan You тарабынан түзүлгөн “прогрессивдүү” фреймворк. Vue'ну кичинекей долбоорлордон баштап чоң долбоорлорго чейин колдоно аласыз.

• Минималдуу өзөк + экосистема

  Vue'да минималдуу өзөк бар, бирок расмий кошумчалар оңой интеграцияланат.

• Оңой интеграция

  Vue'ну колдонуу оңой жана тез.

Vue мисалы:

<template>
  <!-- Vue шаблонунда маалыматты {{ }} аркылуу чакырабыз -->
  <div>
    <h1>Hello World</h1>
    <p>Бул Vue компонентине мисал</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    // data - бул компоненттеги маалыматтарды сактайт
    return {
      message: 'Vue компонентинен салам!'
    };
  }
};
</script>

<style scoped>
/* Scoped style - бул стиль компоненттин ичинде гана иштейт */
h1 {
  color: #42b983;
}
</style>

4. Кайсынысы сизге ылайыктуу?

• ReactJS – тез үйрөнүүчү жана ийкемдүү китепкана.
• Angular – чоң жана татаал долбоорлор үчүн ылайыктуу.
• VueJS – жаңы баштагандар үчүн эң ылайыктуу.