Współczesne biblioteki i frameworki, takie jak Angular, Vue oraz React, oferują bardziej zaawansowane i elastyczne podejście do tworzenia aplikacji webowych. Są one zbudowane wokół komponentów i umożliwiają wydajne zarządzanie stanem aplikacji, routowaniem, interakcjami z API i innymi zadaniami.

1. React

React to biblioteka do tworzenia interfejsów użytkownika, która pozwala na budowanie aplikacji w oparciu o komponenty. React umożliwia tworzenie dynamicznych widoków oraz efektywne zarządzanie stanem.

Przykład – React:

import React, { useState } from "react";

function App() {
  const [tekst, setTekst] = useState("Kliknij, aby zmienić tekst");

  return (
    <div>
      <p>{tekst}</p>
      <button onClick={() => setTekst("Tekst został zmieniony!")}>Kliknij mnie</button>
    </div>
  );
}

export default App;

W powyższym przykładzie używamy useState() do zarządzania stanem tekstu w komponencie. Po kliknięciu przycisku, stan tekstu zostaje zaktualizowany.

2. Vue.js

Vue.js to framework JavaScript, który pozwala na łatwe tworzenie interaktywnych interfejsów użytkownika. Vue skupia się na deklaratywnym renderowaniu HTML i oferuje mechanizm bindowania danych.

Przykład – Vue.js:

<div id="app">
  <p>{{ message }}</p>
  <button @click="changeMessage">Kliknij mnie</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      message: "Kliknij, aby zmienić tekst"
    },
    methods: {
      changeMessage: function() {
        this.message = "Tekst został zmieniony!";
      }
    }
  });
</script>

Vue.js pozwala na łatwe zarządzanie stanem aplikacji, a jego składnia jest bardzo zbliżona do HTML, co sprawia, że jest intuicyjny w użyciu.

3. Angular

Angular to pełnoprawny framework oparty na TypeScript, który oferuje rozwiązania do routingu, zarządzania stanem aplikacji, formami oraz komunikacją z API. Jest bardziej kompleksowy niż React i Vue.

Przykład – Angular:

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

@Component({
  selector: 'app-root',
  template: `
    <p>{{ message }}</p>
    <button (click)="changeMessage()">Kliknij mnie</button>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  message = 'Kliknij, aby zmienić tekst';

  changeMessage() {
    this.message = 'Tekst został zmieniony!';
  }
}

Angular oferuje pełne wsparcie dla TypeScript, co pozwala na bardziej typowane i bezpieczne programowanie.