Tutorial Belajar Reactjs #2: Membuat Hello World dengan Reactjs
Persiapan.
baiklah sebelum kita memulai tutorial part #2 membuat hello World dengan React
Js ini, ada beberapa tool yang perlu kita siapkan diantara nya.
- Kode Editor
- Koneksi Internet (Dikarnakan kita masih mengambil package, nya memlalui CDN)
1. Buat Struktur dasar Kode HTML
Buat lah sebuah folder pada directory Komputer kalian , Dengan
nama bebas Misalkan Belajar-Reactjs.html , buka Kode Editor yang kalian
pakai lalu buat sebuah file html dan beri nama bebas misalkan sesion-01.htlm
lalu buat struktur dasar html Seperti dibawah ini,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="content">Dokumen root React JS</div>
</body>
</html>
lalu Simpan filenya, pada line 9 kodingan di atas terdapat sebuah tag
<div> dengan id content dan pada tag ini
lah nantinya kita akan merender Object Model yang kita buat dengan menggunakan
react js.
2. Import Library React Js Dari CDN
setelah struktur awal HTLM telah selesai kita buat, selanjut, untuk
menggunakan react js, pada tutorial ini kita menggunakan reactjs dengan masih
meng-Import atau memanggil Library dari React JS nya melalu CDN, maka kita
perlu memanggilnya didalam tag <head> dengan cara menambahkan tag
script berikut ini.
<!-- 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>
letakan kode diatas diantara tag
<head> </head>, terdapat 3 library yang kita
importkan, beriku penjelasan singkat mengenai library yang kita gunakan
#Penjelsan Singkat
React Librabry : Merupakan Lybrary atau core utama dari react js yang akan kita gunakan, dalam library ini berisi kumpulan core dari react js yang nantinya dapat kita gunakan dalam pengembangan aplikasi dengan menggunakan react js
React DOM Librabry : Merupakan Lybray untuk merender komponent yang telah kita buat pada tag atau dokumen yang telah kita tentukan
Babel Library : Merupakan Kumpulan Library atau fungsi syntax , yang kita gunakan untuk memanggil fungsi- fungsi dari javascript yang nantinya kita gunakan dalam penulisan dan pemanggilan core dari reactjs .
3. Penulisan Koding Raeact js
Setelah library telah selesai kita tambahkan , selanjutnya kita masuk ke tahap
penulisan koding nya.
tambahkan koding berikut ini didalam tag <body> dan simpan
di bawah tag <div id="content">
kemudian save
<script type="text/babel">
ReactDOM.render(
<div>
<h1>Hello Word Dengan ReactJs</h1>
</div>, document.getElementById("content") );
</script>#Penjelasan Singkat
Kita memanggil fungsi dari React js denga perintah ReactDOM.render();
Kemudian pada koding diatas kita menampilkan teks Hello Word Dengan ReactJs
lalu kita menampilkan teks tersebut pada document
atau tag HTLM yang memiliki id content
sehingga Secara keseluruhan isi koding dari file Belajar-Reactjs.html nya seperti berikut ini
<!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="content">Isi konten rout react JS</div>
<script type="text/babel">
ReactDOM.render(
<div>
<h1>Hello Word Dengan ReactJs</h1>
</div>, document.getElementById("content") );
</script>
</body>
</html>untuk menjalankan program nya, kita cukup memanggil lokasi file tersebut pada browser di komputer kita. atau buka folder tempat disimpan nya file yang telah kita tulis dan klik kanan open with lalu pilih browser nya. sehingga hasilnya menjadi seperti gambar berikut ini.
 |
| Tutorial Belajar Reactjs #2: Membuat Hello World dengan Reactjs |
sampai disini anda telah berhasil membauat sebuah program yang sederhana dengan menggunakan react js. itulah Tutorial Belajar Reactjs #2: Membuat Hello Word dengan Reactjs yang kita telah selesai pelajari. untuk lebih memahahami lagi tentang react js, bisa lanjut ke Tutorial Part #3.
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
0 Response to "Tutorial Belajar Reactjs #2: Membuat Hello World dengan Reactjs"
Posting Komentar