Tutorial ReactJS Bagian2 : Membuat Tulisan Halo Dunia

Melanjutkan artikel react di bagian1 yaitu pengenalan dan instalasi, kali ini saya akan membuat kalian untuk lebih maju sedikit dengan react. Kenapa saya bilang maju sedikit?… karena kita akan belajar dari nol perlahan tapi pasti. Intinya akan saya cuilkan sedikit. Bahwa dalam react ada yang namanya render, dimana render ini akan menampilkan sebuah output di layar baik itu berupa tulisan maupun gambar.

saya asumsikan kalian telah membaca artikel di bagian1 tentang instalasi

Tutorial ReactJS Bagian1 : Pengertian dan Cara Instalasi

Mengenal Struktur Project di React

Mari kita mulai. Pada artikel sebelumnya saya pernah membahas struktur folder default dari react yang telah di install pada komputer kalian. Silahkan cermati gambar berikut ini :

Dari gambar diatas terdapat beberapa komponen penting yaitu node_modules, public dan src. Masing-masing folder ini mempunyai peran tersendiri. Tetapi kali ini kita batasi permainan kita pada lingkup dasar saja, yaitu menampilkan teks di layar pada browser kamu. Silahkan buka visual studio codenya dan pastikan kamu membukanya melalui git bash karena dengan begitu maka kalian akan mudah melakukan commit dan push lewat visual studio code tersebut. Jangan lupa untuk melakukan konfigurasi pada git kamu. Bagaimana caranya..? tidak akan kita bahas di sini.

Kamu bisa mengetikkan code .commend line pada direktori seperti contoh diatas. Direktori crud-reactjs adalah direktori project dimana saya meletakkan file react saya. Kalau kamu mungkin bisa saja berbeda, tetapi itu tidak masalah.

Hasil dari kamu mengetikkan code .pada command prompt git seperti diatas maka visual studio code kamu akan terbuka sesuai direktori project yang sudah kamu tentukan sebelumnya.

Helo Dunia

Helo dunia sudah wajib hukumnya ketika kamu mempelajari teknologi baru, memulai dengan helo dunia seara tidak sadar kamu telah memahami konsep dari struktur dan alur dari teknologi yang kamu gunakan.

Buka file App.js yang ada di src.

Kira-kira akan  seperti ini isi di dalamnya :

dari kode diatas akan menghasikan outputan berupa logo react berputar dan tulisan dibawahnya, kira-kira seperti ini :

ini sudah kita bahas dan tampilkan pada tutorial bagian pertama. Baiklah sekarang kamu paling tidak sudah paham sedikit tentang reactjs. Kemudian saatnya kita merubah kode diatas dan menghilangkan logo react diatas menjadi tulisan hallo dunia.

Hapus semua kode di atas pada App.js dan di ganti menjadi seperti berikut ini :

Kemudian simpan, maka secara otomatis browser kamu akan melakukan reload, inilah kelebihan dari react, yaitu fitur hot reload browser

Sekarang kamu sudah berhasil membuat dan menampilkan tulisan hello dunia pada browser. Kedepannya kita akan bahas yang lebih jauh lagi di react yaitu melakukan commit dan push di visual studio code, hingga kode kamu tersimpan di repository online seperti github. Kemudian bermain dengan css dan database di react. Silahkan ikuti terus artikel kelanjutannya.

Ringkasan Tutorial

Dari materi react di bagian2 ini, harapan saya kalian sudah bisa :

  1. Memahami struktur folder dan file di react
  2. Memahami alur kode dari react
  3. Membuat tulisan halo dunia di react

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *