Thinking in ReactJS

   April 13, 2025       Mahatma Mahardhika

---

Thinking in ReactJS

Table of Contents

• Pengertian Thinking in React
• Langkah-langkah Thinking in React
• Membagi UI Menjadi Komponen
• Membuat Hirarki Komponen
• Menggunakan State dan Props
• Manfaat Thinking in React
• Contoh Penerapan
• Kesimpulan

---

Pengertian Thinking in React

Thinking in React adalah pendekatan dalam membangun aplikasi dengan cara berpikir secara komponen. React mendorong pengembang untuk memecah UI menjadi bagian-bagian kecil yang dapat digunakan kembali, mengikuti pola komponen yang modular.

---

Langkah-langkah Thinking in React

1. Memahami UI sebagai Hierarki Komponen: Pisahkan UI menjadi beberapa komponen kecil yang independen.
2. Membuat Struktur Komponen: Tentukan komponen mana yang memiliki state dan mana yang hanya menerima props.
3. Mengelola State: Tentukan di mana state dikelola dan bagaimana state akan dikirim ke komponen lain.
4. Menangani Interaksi Pengguna: Pastikan setiap perubahan UI berasal dari perubahan state.
5. Membuat Komponen Reusable: Pastikan komponen dapat digunakan kembali di berbagai bagian aplikasi.
6. Memisahkan Logika dan Presentasi: Gunakan pola container dan presentational component untuk struktur kode yang lebih bersih.

---

Membagi UI Menjadi Komponen

Pemecahan UI menjadi komponen adalah salah satu langkah penting dalam Thinking in React. Misalnya, sebuah tampilan daftar produk dapat dibagi menjadi:

• ProductList: Menampilkan daftar produk.
• ProductItem: Menampilkan satu produk.
• SearchBar: Untuk pencarian produk.
• Filter: Untuk memfilter produk berdasarkan kategori.

---

Membuat Hirarki Komponen

Setelah memecah UI menjadi komponen, buat hirarki yang jelas.

App
 ├── SearchBar
 ├── Filter
 ├── ProductList
 │   ├── ProductItem
 │   ├── ProductItem
 │   ├── ProductItem

---

Menggunakan State dan Props

State digunakan untuk mengelola data yang berubah, sedangkan props digunakan untuk mengirim data ke komponen anak.

const ProductItem = ({ name, price }) => {
  return (
    

      
{name}
      
Harga: {price}
    
  );
};

const ProductList = ({ products }) => {
  return (
    

      {products.map((product) => (
        
      ))}
    
  );
};

---

Manfaat Thinking in React

• Kode lebih modular: Memudahkan pengelolaan dan pemeliharaan kode.
• Komponen lebih reusable: Komponen dapat digunakan di berbagai bagian aplikasi.
• Efisiensi pengembangan: Memudahkan tim bekerja secara paralel dengan komponen yang terpisah.
• Debugging lebih mudah: Memisahkan logika dan tampilan membantu menemukan bug dengan lebih cepat.
• Meningkatkan performa: Dengan pembagian komponen yang baik, React dapat mengoptimalkan rendering.

---

Contoh Penerapan

Misalnya, aplikasi pencarian produk dengan filter:

const App = () => {
  const [search, setSearch] = useState("");
  const products = [
    { id: 1, name: "Laptop", price: "$1000" },
    { id: 2, name: "Mouse", price: "$50" }
  ];

  const filteredProducts = products.filter((product) =>
    product.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    

      
      
    
  );
};

---

Kesimpulan

Thinking in React membantu pengembang membangun aplikasi yang lebih modular, terstruktur, dan mudah dikelola. Dengan memecah UI menjadi komponen kecil, menggunakan state dengan bijak, dan mengelola data dengan props, pengembang dapat menciptakan aplikasi React yang lebih efisien dan scalable.