Pada tutorial kali ini saya akan berbagi ilmu tentang ReactJS, bagi kamu yang ingin menjadi developer ReactJS kamu menemukan tutorial gratis ReactJS Bahasa Indonesia yang tepat, karena pada web Konsep Koding ini akan dijelaskan tutorial dari basic sampai advanced gratis. Jadi kamu bisa belajar di manapun dan kapanpun mengenai React JS.

Conditional Rendering ReactJS


Tutorial React.JS Bahasa Indonesia kali ini saya akan berbagi mengenai tutorial Kondisional Rendering (Conditional Rendering), 

Apa Yang Akan Kita Pelajari?

1. Apa Itu Conditional Rendering ReactJS
2. Membuat Project Baru React
3. Conditional Rendering Pada Class Component
4. Conditional Rendering Hooks Component
5. Kesimpulan

Apa Itu Conditional Rendering ReactJS

Rendering bersyarat (Conditional Rendering) di React bekerja dengan cara yang sama seperti kondisi bekerja di JavaScript. Gunakan operator JavaScript seperti if atau operator kondisional untuk membuat elemen yang mewakili keadaan saat ini, dan biarkan React memperbarui UI untuk mencocokkannya.

 Membuat Project Baru React

Jika kalian belum membuat project React silahkan buka terminal/cmd kamu untuk membuat project react baru :

npx create-react-app my-app

Setelah anda berhasil membuat project React baru silahkan jalankan project anda untuk test

    cd my-app && npm start


Conditional Rendering Pada Class Component 

Ubah file App.js anda menjadi kode di bawah ini



 Conditional Rendering Hooks Component

Selain Class Component React juga memberikan pattern hooks yang di nilai lebih simple dan lebih sedikit kode dan mudah untuk di baca, silahkan ubah file App.js menjadi seperti kode di bawah ini :


Kesimpulan

Kondisional Rendering (Conditional Rendering) pada React sangat perlu kamu pelajari jika ingin menjadi React Developer, hal ini karena ketika kamu membuat UI dan logic seperti Login dan Logout atau Logic lainnya kamu memerlukan Conditional Rendering untuk mengubah UI di Web App React yang kamu buat.

Baca Juga Tutorial React Bahasa Indonesia Lainnya :