Ладно, это модное вступление, но… Надеюсь, у меня были эти концепции, когда я переходил с Angular на React. Что-то подобное сделает переход с Angular на React более простым и эффективным. Давайте начнем.

Компоненты «родитель-потомок», обменивающиеся данными

Угловой

Angular предоставляет два основных способа обмена данными между компонентами:

  1. @Input() — для передачи данных от родительского компонента к дочернему компоненту
  2. @Output() и EventEmitter — для передачи данных от дочернего компонента к родительскому.

Использование @Input()

Декоратор @Input() позволяет дочернему компоненту получать данные от родительского компонента.

В шаблоне родительского компонента вы передаете данные дочернему компоненту с помощью привязки свойств:

  <app-child [childData]="parentData"></app-child>

В дочернем компоненте вы определяете свойство @Input() для получения данных:

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

  @Component({
    selector: 'app-child',
    templateUrl: './child.component.html',  
    styleUrls: ['./child.component.css']
  })
  export class ChildComponent {

    @Input() childData: string;

  }

Когда родительский элемент передает данные с использованием привязки свойства, Angular свяжет их со свойством childData в дочернем компоненте.

Затем вы можете использовать {{ childData }} в шаблоне дочернего компонента для доступа к данным.

Использование @Output() и EventEmitter

Чтобы передать данные из дочернего компонента его родительскому компоненту, мы используем:

  • @Output() декоратор
  • Класс EventEmitter

Сначала определите свойство @Output(), которое генерирует событие:

  @Output() childEvent = new EventEmitter<any>();

Затем вызовите emit() на EventEmitter, чтобы создать событие и передать данные:

  this.childEvent.emit(data);

в шаблоне родительского компонента вы прослушиваете это событие:

  <app-child (childEvent)="someParentMethod($event)"></app-child>

И определите метод для обработки созданного события:

  someParentMethod(data) {
    // use data emitted from child here
  }

Условный рендеринг и циклические элементы

Угловой

В angular вы используете так называемые директивы для условного рендеринга, цикл по элементам html, условное оформление и так далее.

Условный рендеринг: вы используете «ngIf={condition}» для рендеринга элемента. Если условие истинно, элемент будет визуализирован, если нет, элемент не будет визуализирован.

Цикл по элементам Html: вы используете «ngFor={let переменную массива}», чтобы создать цикл для создания повторяющихся элементов. Переменная будет содержать элемент массива, как в функции forEach.

Реагировать

В реакции вы используете jsx, который дает вам ощущение обычного js.

Условный рендеринг: вы используете обычное условие, возвращающее элемент html. Например:

<div>
{10 > 5 ? <span>The condition is true</span> : <span>The condition is false</span>}
</div>

Or

function App() {
if (true) {
return <span>The condition is true</span>
 }else {
return <span>The condition is false</span>
 }
}

Цикл по элементам Html: вы используете «array.map()» для цикла по массиву и возврата элементов из него. Например:

<div>
{array.map(
 (element) => {
return <span>element</span>})
}
</div>

Маршрутизатор

Угловой

Angular маршрутизация позволяет переходить от одного представления к другому в приложении Angular. Маршрутизация в Angular определяет навигацию между представлениями и компонентами.

Маршрутизатор Angular состоит из двух основных компонентов:

  • RouterModule — Основной компонент маршрутизации, управляющий навигацией между компонентами.
  • Routes — массив объектов конфигурации маршрута, определяющих способ сопоставления URL-путей с компонентами.

Основные шаги по настройке маршрутизации в Angular:

  1. Импортируйте RouterModule из @angular/router.
  2. Определите маршруты, используя массив routes. Каждый маршрут имеет свойства path и component.
  3. Добавьте RouterModule в массив imports @NgModule.
  4. Добавьте розетки маршрутизатора в свои шаблоны.
  5. Перейдите к маршрутам с помощью директивы routerLink или службы Router.

Например:

  import { RouterModule, Routes } from '@angular/router';

  const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'products', component: ProductsComponent } 
  ];

  @NgModule({
    ...
    imports: [
      RouterModule.forRoot(routes)
    ]
  })
  export class AppModule { }
  <a routerLink="/products">Products</a>

  <router-outlet></router-outlet>

Вложенная маршрутизация. Чтобы определить дочерние маршруты, используйте свойство children в конфигурации маршрута:

  const routes: Routes = [
    { 
      path: 'products', 
      component: ProductsComponent,
      children: [
        { path: 'new', component: NewProductComponent },
        { path: ':id', component: ProductDetailsComponent }
      ] 
    }
  ];

Затем вы можете иметь несколько <router-outlet>s для отображения дочерних маршрутов внутри компонента.

Реагировать

Библиотека React Router — самое популярное решение для маршрутизации для приложений React. Он предоставляет следующие компоненты для реализации маршрутизации:

  • BrowserRouter: основной компонент маршрутизатора, который отслеживает URL-адрес в адресной строке браузера.
  • Routes: Содержит набор из Route компонентов.
  • Route: определяет маршрут, который отображает путь к компоненту.
  • Link: используется для навигации внутри приложения. Предотвращает поведение браузера по умолчанию при перезагрузке страницы.

Вот пример реализации базовой маршрутизации:

  import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

  function Home() {
    return <h2>Home</h2>;
  }

  function About() {
    return <h2>About</h2>;
  }

  function App() {
    return (
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Router>
    );
  }

Мы можем перемещаться между маршрутами с помощью компонента Link:

  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link> 
  </nav>

Мы можем определить динамические маршруты, используя параметры URL:

  <Route path="/user/:id" element={<User />} />

И получите доступ к параметрам компонента с помощью хука useParams:

  const { id } = useParams();

Мы также можем вкладывать маршруты внутри компонентов и определять маршруты в методе render() компонента.

Вот и все.

Заключение

Это некоторые концепции angular и реакции, а также сравнение методов. Эта статья была написана с помощью искусственного интеллекта. Почему? Чтобы подготовиться к моим следующим статьям о том, как использовать его для обучения.

Спасибо за чтение.