Belajar React JS: Card Part 1

Selamat datang di tutorial Belajar React JS! Pada bagian ini, kita akan belajar bagaimana membuat Card komponen dengan menggunakan React JS. Card merupakan salah satu komponen yang sering digunakan dalam pembuatan website, karena dapat menampilkan informasi secara terstruktur dan menarik.

Step 1: Membuat Komponen Card

Pertama-tama, kita perlu membuat komponen Card. Berikut adalah contoh kode untuk membuat komponen Card:

    import React from 'react';

  class Card extends React.Component {
    render() {
      return (
        

          
          

            
{this.props.title}
            
{this.props.description}
          
        
      );
    }
  }

  export default Card;
  

Pada kode di atas, kita menggunakan React.Component untuk membuat komponen Card. Komponen ini menerima props berupa imageUrl, imageAlt, title, dan description untuk menampilkan informasi pada Card.

Step 2: Menggunakan Komponen Card

Setelah komponen Card berhasil dibuat, sekarang kita akan menggunakan komponen tersebut dalam sebuah file App.js. Berikut adalah contoh kode untuk menggunakan komponen Card:

    import React from 'react';
  import Card from './Card';

  class App extends React.Component {
    render() {
      return (
        

          
Artikel Terbaru
          
        
      );
    }
  }

  export default App;
  

Dalam kode di atas, kita menggunakan import Card from './Card' untuk mengimpor komponen Card yang telah kita buat sebelumnya. Kemudian, kita menggunakan <Card /> untuk menampilkan komponen Card beserta props-nya.

Dengan demikian, kita telah berhasil membuat dan menggunakan komponen Card dalam React JS. Selamat mencoba!