1. ReactJS

ReactJS - bu Facebook (Meta) tərəfindən yaradılmış, komponentlərə əsaslanan kitabxanadır (library). O çərçivə deyil, çünki React yalnız "view layer" üçün cavabdehdir, digər strukturlar adətən əlavə kitabxanalarla istifadə olunur.

• Məqsədə yönəlik minimalizm (minimal core)

  React yalnız lazım olan şeyləri təklif edir. Məsələn, routing (yolları idarə etmək) və ya qlobal state management (məlumatların idarə olunması) üçün əlavə kitabxanalar əlavə etməlisiniz.

• Virtual DOM

  Virtual DOM React-in ən güclü xüsusiyyətlərindən biridir. UI-nin dəyişməsi lazım olduqda, React əvvəlcə virtual DOM-da hesablamalar aparır, sonra real DOM-da lazımi dəyişiklikləri həyata keçirir. Bu, adətən məhsuldarlığı artırır.

• Öyrənmə səviyyəsi

  React nisbətən asan öyrənilir, lakin siz əlavə kitabxanalarla (məsələn, React Router, Redux və s.) işləməyi də öyrənməlisiniz.

React kod nümunəsi:

import React from 'react';

// Kiçik bir React komponenti
function HelloWorld() {
  // return-da bir neçə tag qaytarmaq üçün Fragment və ya <> </> istifadə olunur
  return (
    <>
      <h1>Hello World!</h1>
      <p>Bu React komponentinin nümunəsidir</p>
    </>
  );
}

export default HelloWorld;

2. Angular

Angular - bu Google tərəfindən yaradılmış tam "front-end" çərçivəsidir və TypeScript üzərində işləyir. O bütün vacib funksiyaları bir yerdə təmin edir.

• Dəqiq struktur (strict structure)

  Angular komponentlər, xidmətlər və modullar kimi tamamilə dəqiq struktura malikdir.

• TypeScript

  TypeScript - bu, JavaScript-in genişləndirilmiş versiyasıdır (superset).

Angular kod nümunəsi:

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

@Component({
  selector: 'app-hello-world',
  template: `
    <!-- Şablonda iki tərəfli data bağlanması görünüşü -->
    <h1>Hello World</h1>
    <p>Bu Angular komponent nümunəsidir</p>
  `
})
export class HelloWorldComponent {
  // Angularda TypeScript-dən istifadə edirik
}

3. VueJS

VueJS - bu Evan You tərəfindən yaradılmış "progressive" çərçivədir.

Vue kod nümunəsi:

<template>
  <!-- Vue-dakı şablon hissəsində məlumat {{ }} ilə çağırılır -->
  <div>
    <h1>Hello World</h1>
    <p>Bu Vue komponentinin nümunəsidir</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    // data - komponentdəki məlumatları saxlayır
    return {
      message: 'Vue komponentindən salam!'
    };
  }
};
</script>

<style scoped>
/* Scoped style - yalnız bu komponent daxilində işləyir */
h1 {
  color: #42b983;
}
</style>