Menampilkan Data JSON Pada React

Kita lanjutkan pembelajaran React, sekarang kita akan menampilkan data JSON. Perlu teman-teman tahu bahwa JavaScript tidak memiliki kemampuan untuk memanggil database secara langsung, untuk itu JavaScript akan melakukan request HTTP/Server. Request tersebut akan di-handle oleh bahasa server seperti PHP, Java atau Python untuk memanggil database dan merubahnya menjadi format JSON, kemudian dikembalikan pada JavaScript.

Sekarang, silahkan teman-teman buat class React seperti pada gambar berikut.

Pada class Blog, dalam method getInitialState, masukan data JSON seperti berikut.

Dan di dalam method render, ketik perintah berikut.

Perhatikan sintaks di atas, pertama kita buat dulu variabel articles di luar fungsi return(), kemudian di dalam variabel articles kita tampilkan data JSON pada JavaScript dengan menggunakan Array.map(). Kemudian kita panggil variabel articles dalam fungsi return() dengan cara {articles}.

Jalankan pada browser.