Tutorial Belajar Reactjs #3: Mengenal Jenis Component Pada Reactjs
Tutorial ini merupakan lanjutan materi yang telah kita pelajari sebelumnya
tentang Tutorial Belajar Reactjs #2: Membuat Hello Word dengan Reactjs, agar lebih mudah memahami tutorial part 3 ini kalian bisa membaca tutorial
sebelum nya.
pada tutorial ini kita akan mengenal jenis component yang ada pada react js.
langsung saja kita buka project sebelum dari materi tutorial part 2.
didalam Reactjs kita dapat membuat sebuah component yang dapat kita panggil
berulang pada page atau halaman web yang kita inginkan, reactjs memiliki
dua jenis component yang bisanya sering di gunakan dalam pembuatan component
yaitu
- functional Component
- Class Component
untuk memahami kedua jenis component diatas ,dalam materi kali ini kita akan
coba memnggunakan kedua komponent tersebut untuk mengatahui apa saja
perbedaan dari komponent tersebut.
buka Folder project yang sudah kita buat pada
tutorial sebelum nya, lalu tambahkan sebuah folder baru dengan nama misalkan
sesion 2 , lalu copy file index.html pada folder tutorial sebelumnya ke
folder sesion 2.
1.Functional Component
struktur dasar koding untuk membuat component dengan menggunakan functional
component dengan reactjs seperti berikut ini
#Teknik Penulisan 01
function HelloWorld(){
return(
<h1>Hello World ReactJs </h1>
);
}#Teknik Penulisan 02
var HelloWorld = function () { return ( <h1 >Hello World Dengan ReactJS</h1> ); }
koding di atas merupakan teknik penulisan component di react js dengan
menggunakan functional component. sehingga text Hello Word telah
kita buat menjadi sebuah component dengan nama HelloWord.
untuk menampilkan komponent yang telah kita buat maka kita cukup menuliskan
tag <HelloWorld/>
pada perintah ReactDOM.render() nya. untuk lebih jelas penulisan koding full nya untuk
menggunakan
functional component pada react js Seperti berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- REACT LIBRARY-->
<script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
<!-- REACT DOM LIBRARY-->
<script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
<!--BABEL LIBRARY-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
<title>Belajar React Session 01</title>
</head>
<body>
<div id="app">Isi konten rout react JS</div>
<script type="text/babel">
function HelloWorld(){
return(
<h1>Hello Word Dengan ReactJs</h1>
);
}
ReactDOM.render(
<div>
<HelloWorld/>
</div>, document.getElementById("app") );
</script>
</body>
</html>
untuk menjalakan nya cukup buka file html nya di browser atau opent with
Browser sehinggak hasil dari runing program nya seperti gambar berikut
ini.
#Hasil Running Program
|
| Tutorial Belajar Reactjs #3: Mengenal Jenis Component Pada Reactjs |
untuk hasil nya memang terlihat sama dengan tutorial sebelumnya akan
tetapi disini kita telah menggunakan component functional dari react js
unruk menampilkan text Hello Word.
2.Class Component
struktur dasar koding untuk membuat component dengan menggunakan Class
component dengan reactjs seperti berikut ini
class HelloWorld extends React.Component {
render() {
return (
<h2>Hello Word Dengan ReactJs</h2>
)
}
}
sama halnya dengan langkah no 1 di atas kita telah membuat sebuah component
dengan mennggunakan class component react js, untuk menampilkan komponent yang telah kita buat maka kita cukup menuliskan
tag <HelloWorld/> , pada perintah ReactDOM.render() nya. untuk lebih jelas penulisan koding full nya untuk menggunakan
class component pada react js Seperti berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- REACT LIBRARY-->
<script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
<!-- REACT DOM LIBRARY-->
<script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
<!--BABEL LIBRARY-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
<title>Belajar React Session 01</title>
</head>
<body>
<div id="app">Isi konten rout react JS</div>
<script type="text/babel">
class HelloWorld extends React.Component {
render() {
return (
<h2>Hello Word Dengan ReactJs</h2>
)
}
}
ReactDOM.render(
<div>
<HelloWorld/>
</div>, document.getElementById("app") );
</script>
</body>
</html>
untuk menjalakan nya sama saja dengan langkah pada no 1 diatas cukup buka
file html nya di browser atau opent with Browser sehinggak hasil dari runing
program nya seperti gambar berikut ini.
#Hasil Running Program
|
|
| Tutorial Belajar Reactjs #3: Mengenal Jenis Component Pada Reactjs |
pada tutorial ini, kita telah memengenal jenis Component yang pada react js,
dan kita telah memperaktekan bagaimana cara menggunakan component tersebut,
sampai disini Tutorial Belajar Reactjs #3: Mengenal Jenis Component Pada Reactjs. yang telah selesai kita pelajari.
untuk lebih memahahami lagi tentang react js, bisa lanjut ke Tutorial Part
#4.
Jika ada masukan dan saran mengenai postingan ini bisa berikan di kolom
Komentar..
Sekian Dan Terima kasih...
#Happy Coding
#Keyword Penelusuran
- Belajar ReactJs
- Tutorial ReactJs
- Belajar ReactJs Untuk Pemula
- Tutorial ReactJs Untuk Pemula
- Tutorial Programing ReactJs
- Belajar ReactJs Bahasa Indonesia
- Tutorial ReactJs Bahasa Indonesia
- Membuat Hello Word Dengan Reactjs
- Belajar ReactJs Untuk Pemula Membuat Hello Word Dengan Reactjs
- Tutorial ReactJs Untuk Pemula Membuat Hello Word Dengan Reactjs
- Jenis Component pada React JS
- Functional Component pada Reactjs
- Class Component Pada Reactjs
- Cara menggunakan Functional Component pada Reactjs
- Cara menggunakan Class Component Pada Reactjs
0 Response to "Tutorial Belajar Reactjs #3: Mengenal Jenis Component Pada Reactjs"
Posting Komentar