Wednesday, July 8, 2020

Convert Html Ke React





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


0 komentar:

Post a Comment