Нотатки програміста

template: `
    <h2>{{ title }}</h2>
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
  `,
})
export class ListComponent {
  @Input() title: string;
  @Input() items: string[];
}

Цей код описує компонент ListComponent, який містить два вхідних параметри: title та

 items

Компонент відображає заголовок та список елементів items, використовуючи директиву *ngFor (саме завдяки ній ти можеш зробити цикл по кожному елементу в масиві та вивести їх)

Компонент може бути використаний також і в інших компонентах, шляхом написання тегу <app-list> (ми його написали, там де була стрічка: selector: ‘app-list’) 😉

Angular має багато інших можливостей для створення складних веб-додатків, таких як маршрутизація, обробка подій, робота з формами та багато іншого

Ось приклад компонента на Vue, який також відображає список елементів зі списку, переданого як вхідний параметр:



<template>
  <div>
    <h2>{{ title }}</h2>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ListComponent',
  props: {
    title: String,
    items: Array
  }
}
</script>

Цей код описує компонент ListComponent, який також містить два вхідних параметри: title та

 items

Компонент відображає заголовок та список елементів items, використовуючи директиву v-for (саме завдяки ній ти можеш зробити цикл по кожному елементу в масиві та вивести їх)

Компонент може бути використаний в інших компонентах шляхом включення тегу <list-component> (ми його написали, там де була стрічка: name: ‘AppComponent’)

Vue також має багато інших можливостей для створення складних веб-додатків, таких як маршрутизація, обробка подій, робота з формами та багато іншого)

Як ти бачиш, усе дуже схоже, тільки можливості та написання - трішки різне 😌

А ось приклад компонента на React, який також відображає список елементів зі списку, переданого як вхідний параметр:



import React from 'react';

function ListComponent(props) {
  return (
    <div>
      <h2>{props.title}</h2>
      <ul>
        {props.items.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
}

export default ListComponent;

Цей код описує функціональний компонент (компонент написаний завдяки слову function) ListComponent, який має два вхідних параметри: title та

 items

Компонент відображає заголовок та список елементів items, використовуючи метод map для проходженні по масиву та відображає кожен елемент на сайті

Компонент може бути використаний в інших компонентах шляхом включення тегу <ListComponent> (тому що, ми таким словом назвали назву функції: function ListComponent(props) {)

Як ти міг здогадатися, React також має багато інших можливостей для створення складних веб-додатків)

Ось так ось!
Як бачиш, усе дуже схоже одне на одне 😌

Так що, вибирай, те що тобі легше та цікавіше - і дізнавайся про цю технологію більше) 😉

Якщо ти насолоджуєшся моїми постами, донат допоможе мені віддавати більше часу на створення якісного контенту 🤗
5375411501575463

#web

🔥9👍4🤩1

289 views11:59