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

Read More

Membuat Project Dengan Vue UI

VUE.JS

Pada tutorial kali ini kita akan membahas bagaimana cara  membuat project dengan menggunakan Vue UI, pertama buka command line dan ketikan VUE UI seperti gambar yang dibawah.

Setelah mengetikan comman Vue ui seperti gambar diatas maka akan muncul tampilan seperti dibawah, setelah muncul tampilan seperti dibawah maka selanjutnya isi nama project vue yang ingin dibuat.

Isi nama project , pilih package manager yang ingin digunakan, disini saya mengunakan npm dan isi bagian recommended git repository tapi bisa diabaikan.  lalu untuk preset kita akan pilih secara default dari bawaan VUE. UI  

Biasanya akan memerlukan waktu lama untuk membuat sebuah projeact Vue, setelah selesai maka akan keluar tampilan seperti gambar dibawah.

Selanjutnya kita  perlu menambahkan vue.router, vue router ini berfungsi untuk membuat halaman menjadi lebih dari satu karna untuk saat pertama kali kita membuat sebuah project baru divue maka hanya terdapat satu halaman, untuk mentesting atau menampilkan project yang kita buat maka bisa mengclick tombol.

Setelah menjalankan Run task maka tunggu serve untuk membuild setelah berhasil membuild maka click open App seperti gambar dibawah

Maka akan muncul tampilan seperti dibawah, tapi disini hanya ada single page.

Untuk menambahkan beberapa halaman kita perlu untuk menginstall vue router, untuk menambahkan rouver kalian bisa pergi ke pulgins dan click serach dan pilih  @vue/cli pulgin-router seperti gambar dibawah.

Tunggu beberapa saat dan setelah berhasil di install maka akan ada pemberitahuan seperti gambar dibawah, jadi kalian bisa langsung click finish.

Maka secara otomatis vue akan mengenerate halaman baru dan menambahkan beberapa component, ketika kita mendapatkan perubahan dibeberapa document maka akan langsung otomatis terupload kepada github maka akan ada beberapa pemberitahuan seperti apa saja yang telah dihapus, ditambahkan, diubah maka kita bisa melakukan perubahan terhadap github 

Setelah kembali pada VSC ( visual studio code ) kalian bisa melihat difile yang telah kalian buat sebelumnya terdapat perubahan ke versi terbaru atau perubahan di bagian router, nah untuk melihat perubahan yang telah dilakukan maka kalian bisa check halaman UI dibrowser maka akan tampil hasi seperti gambar maka kalian akan menemukan  dua halaman dari perubahan router yang kalian install sebelumnya.

Read More