Komponen Cerdas & Bodoh dalam Sudut

Jenis komponen berbeda di Angular

Saat Anda mulai membuat aplikasi dengan kerangka kerja UI seperti Angular dan React, hal pertama yang akan Anda hadapi adalah konsep komponen. Komponen mungkin tampak cukup sederhana tetapi ada lebih banyak daripada yang terlihat. Struktur Komponen memecah halaman menjadi beberapa bagian dan membantu Anda mengelola halaman dengan cara yang sangat fleksibel dengan merangkum semua gaya, markup, dan logika bisnis ke dalam masing-masing Komponen, lalu Anda menggabungkannya untuk membangun aplikasi Anda.

Karena itu, saat menyelami komponen, Anda mungkin bertanya:

Apakah ada tipe Komponen yang berbeda?

Ya ada dua jenis atau lebih tepatnya konsep komponen.

• Komponen Cerdas
• Komponen Bodoh

Komponen Bodoh

Di dunia nyata, Kita sering menganggap orang-orang Bodoh yang tidak memiliki tujuan atau bergantung pada orang lain untuk maju atau mendapatkan sesuatu. Itulah tepatnya Dumb Component di dunia pemrograman. Komponen yang sama sekali tidak melakukan apa pun dan bergantung pada Komponen Smarter.

Semua Komponen Dumb menampilkan dirinya sendiri ke DOM. Karenanya mereka juga disebut sebagai " Komponen Presentasional " atau sesuatu yang disebut " Komponen Terisolasi ".

import{ Component, Input, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-book-list’,
templateUrl: ‘./book-list.component.html’,
styleUrls: [‘./book-list.component.css’]
})
export class BookListComponent implements OnInit {
@Input(‘book’) book: any[];
constructor() { }
ngOnInit() {
}
}

<div class="books-list-container">
<h3>{{book.volumeInfo.title}}</h3>
<p>{{book.volumeInfo.authors[0]}}</p>
<p>{{book.description}}</p>
</div>

Komponen yang Lebih Cerdas

Komponen Cerdas adalah komponen yang mengetahui cara menangani data, Cara mengambil data dari layanan, Cara berinteraksi dengan layanan, dan melacak status serta peduli tentang cara kerja aplikasi secara keseluruhan. Mereka disebut container karena mengirimkan data ke Dumb Components melalui property binding.

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import {map} from 'rxjs/operators';
import { Observable } from 'rxjs';
@Component({
selector: 'app-books',
templateUrl: './books.component.html',
styleUrls: ['./books.component.css']
})
export class BooksComponent implements OnInit {
private API_KEY:string = 'API_KEY';
book: Observable<any[]>;
constructor(private _http: HttpClient) { }
ngOnInit() {
const URL = 'https://www.googleapis.com/books/v1';
//Fetch All Books from API
//@Params = URL: String
this.fetchBooks(URL);
}
fetchBooks(URL: string){
this.book = this._http.get<any>(`${URL}/q=&key=${this.API_KEY}`,             {headers}).pipe(
   map(resp=>{
    return resp.items;
   });
 );
}}

<app-book-list [book]="book | async"></app-book-list>

Kesimpulan

Dengan menggunakan konsep ini, kami telah memisahkan kode logika bisnis dan kode presentasi antara komponen pintar dan bodoh. Bagian internal ini memungkinkan satu komponen untuk melakukan semua pekerjaan berat sambil membiarkan komponen lainnya menampilkan data dengan lancar.

Itu saja, saya harap posting ini membantu membangun pemahaman tentang konsep-konsep ini jika jangan lupa untuk menekan tombol tepuk. Berikut ini tautan Github untuk kodenya:

Anda juga dapat membaca artikel saya yang lain di komponen web juga jika Anda mau.

Mendalami Komponen Web

Akhirnya! Terima kasih telah membaca dan Selamat membuat kode!