Salam,,,
Pada
kesempatan kali ini kita akan belajar mengenai React Js yaitu
melanjutkan tutorial yang sebelumnya yaitu membuat aplikasi React
tentang Hello World dan pada tutorial ini kita akan belajar mengenai
membuat component pada React Js, sebelumnya terlebih dahulu kita
menjalankan servernya terlebih dahulu dengan mengetik perintah
dibawah ini pada terminal.
npm start
maka
web browser akan terbuka dengan sendirinya yang tutorial yang
sebelumnya kita membuat Selamat datang di blogarif.com seperti gambar
dibawah ini.
Tampilan Pertama Saat dijalankan React Js |
Sekarang
kita akan melihat sintaknya disini saya menggunakan Sublime Text,
kalau sudah terbiasa dengan IDE Atom silahkan buka projectnya.
Pada
tutorial sebelumnya kita juga sudah melihat sebuah Component contoh
yang dibuat oleh React yang bernama App.js nah pada tutorial kali ini
kita akan belajar membuat components sendiri.
Terlebih
dahulu kita buat dahulu sebuah file didalam folder src dengan nama
file hello.js
Membuat Component Hello |
Pertama
kita bisa membuat component menggunakan variabel seperti dibawah ini.
Pada
baris pertama yang berati kita mengimport React, lalu pada baris
kedua kita membuat membuat sebuah component menggunakan Variabel
const Hello = funtion => dan lansung kita memasukan sebuah elemen
<h1> Hello Blogarif.com</h1> kalau kita lihat <h1>
yang hampir sama seperti element HTML, cuma kalau di React Js itu
disebut JSX, yaitu elemen HTML yang mirip dengan JSX artinya HTML
yang ditanam didalam JavaScript, kemudian pada baris terakhir kita
export isi filenya ke index.js, langkah terakhir adalah mengimport
isi file Hello.js kedalam file indek.js agar bisa dibaca oleh web
brower caranya tambahkan import Hello from './Hello';
maka
sintaknya setelah diedit pada file index.js seperti dibawah ini.
Hello Componet Variabel |
kemudian
cara kedua dalam membuat React Component yaitu dengan menggunakan
sebuah Class silahkan lihat sintak dibawah ini.
Pertama
kita import dulu react, kemudian didalam class Hello extends
React.Component ini kita bisa membuat bermacam - macam kode disana,
tapi yang yang paling utama atau paling sering digunakan adalah
render(), render() adalah method yang wajib digunakan pada React Js
jika kita membuat sebuah component menggunakan sebuah Class, kemudian
didalam render kita akan mengretrun yang nantinya didalamnya kita
akan membuat JSX seperti contoh diatas <h1>hello Component
class </h1> lalu kita save maka web browser akan lansung
dijalankan seperti gambar dibawah ini.
Hello Component Class |
Pada
gambar diatas bisa kita lihat didalam render method hanya satu baris
element saja <h1>Hello Component Class</h1>, nah
bagaimana kalau kita ingin menambahkan beberapa elemen lagi didalam
return, caranya kita harus membungkus dengan tag tunggal bisa itu
<div>, disini saya menambahkan 5 baris element Heading ,
silahkan lihat contoh dibawah ini.
kalau kita jalankan maka web browsernya akan menampilkan error seperti dibawah ini.
Tampilan error pada React Js |
Nah
bagaiman kita menggakali React Js, caranya kita tambahkan Tag atau
atribut tunggal disini saya menambahkan <div> caranya silahkan
dilihat seperti dibawah ini.
Kemudian Save dan lihat web browsernya.
Tampilan cara menambahkan beberapa element pada react component |
Kemudia
didalam React Js bila kita tidak ingin menggunakan JSX kita juga bisa
menggunakan Javasrcipt mungkin kita bisa menuliskan sintak seperti
dibawah ini.
Hello Javascript |
Contoh
diatas adalah murni kita menggunakan javascript, baik itu adalah tiga
cara dalam membuat componen dalam React kalau ada saran silahkan di
tinggalkan karena penulis juga seorang baru yang belajar tentang
React Js.
Sekian
Terima Kasih,...
0 Komentar