Berikut ini adalah Tutorial yang akan mengonversi/Convert halaman web HTML ke React js, Jika Kalian sedang membangun aplikasi / satu halaman web baru dan membutuhkan cara tersrbut, tutorial ini cocok untuk kalian dalam mempelajari React.js.
Karena untuk membangun situs web tidak cukup dengan hanya mengetahui HTML, CSS, dan Javascript, perlu disebutkan bahwa beberapa perusahaan telah memutuskan untuk beralih ke situs web dan mengkususkan bagi para developer untuk bisa menggunakan beberapa library dan framework.
Di tutorial kali ini kita hanya membahas pada bagian navbar, kita akan merubah bagian dari navbar tersebut Menjadi Part / bagian ok sebelum kita melakukan perubahan pertama-tama kita instal react router seperti gambar yang dibawah.
Dan di file index.js tambahkan import dari router
Jadi disini kita akan membungkus app kedalam browser router, setelah itu buat file header.js di folder parts
Di file header.js kita akan mengisikan fungsional component dan kita akan menerima sebuah props dan isikan script header html yang inggin diconvert
Karna kita menggunakan react maka kita harus merubah semua class pada script yang kita convert sebelumnya.
Untuk memanggil images kalian bisa tambahkan seperti dibawah
Untuk menambahkan link dari navbar kita akan menggunakan router yang telah kita install sebelumnya, jadi komponen linknya kita pakai dari react-router-dom. Untuk menerapkannya kita panggil link tersebut.
Dan masukkan img ke dalam link dan hrefnya diganti dengan to
Untuk menampilkan header tersebut kita bisa tampilkan dengan cara seperti gambar dibawah.
maka hasilnya akan terlihat seperti gambar dibawah
