Belajar Component Pada React Js

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 dijalankan React Js
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  

belajar membuat Component Hello pada React 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.

kemudia Save maka web browsernya akan lansung dijalankan sendirinya seperti gambar dibawah ini.

membuat component menggunakan variabel
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.

membuat component class pada Ract Js
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
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
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.




membuat component React Js menggunakan Javascript
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,...
Previous
Next Post »
0 Komentar